哈Ha!我叫Bogdan,我是PIC数字前端团队的负责人。我们正在Angular上开发大多数项目,最近我决定查看我们的样式指南,并添加新工具以更方便地工作。作为一个小子,我决定使用ESLint,因为他们计划将Angular很快转移到它。在本文中,我想分享有关从TSLint切换到ESLint的说明,同时讲述如何从ESLint运行Prettier,如何添加AirBnB样式指南规则以及如何通过设置VS Code和Git钩子使棉绒变得方便和不可见。漂亮和ESLint
ESLint是用于静态代码分析的工具,规则分为两组:- 格式化 -将代码带入一个视图:行长,逗号,分号等。
- 代码质量 -搜索有问题的代码模板:不必要的代码,错误。
Prettier是一种自动代码格式化工具。我感兴趣的问题是:如果ESLint也可以格式化代码,为什么要使用Prettier?答案很简单-漂亮的代码可以更好地格式化代码:删除所有格式并完全以一种样式重写代码。这使开发人员可以省去代码格式,而不必浪费时间讨论代码样式以供查看。例如,我们有很长的代码行:
如果尝试通过ESLint更改格式,则只会给我们一个错误:eslint example.ts --fix
output:
error This line has a length of 97. Maximum allowed is 80
这样的示例说明了linter不能总是帮助代码格式化,并且开发人员可以根据他们的个人考虑,以不同的方式格式化此代码。如果我们使用Prettier保存或格式化文件,则该行将采用以下形式:
Prettier在整个代码库中提供统一的样式。因此,它可以并且应该与ESLint一起使用,但是您需要对其进行配置,以使它们不会相互干扰。ESLint设置
使用ESLint进行lint的实质是在解析器中,解析器将代码转换为AST(抽象语法树)以进行进一步的软件处理,以及包含规则的插件,例如,TypeScript linting的推荐规则或AirBnB代码指南规则。安装
要将Angular应用程序迁移到ESLint,我们需要以下依赖项:要安装它们,只需运行以下命令:ng add @angular-eslint/schematics
在撰写本文时,typescript-eslint和angular-eslint并不具有TSLint的标准Codelyzer配置中的规则的所有等效项,但其中大多数已经存在。您可以在Angular ESLint和TypeScript ESLint单一存储库中监视从TSLint到ESLint传输规则的当前状态。配置配置
我们已经安装了Angular应用程序所需的一切。现在让我们继续配置ESLint。让我们创建一个.eslintrc.js文件,并为Angular ESLint 添加推荐的设置:module.exports = {
extends: ['plugin:@angular-eslint/recommended'],
rules: {
'@angular-eslint/directive-selector': [
'error',
{ type: 'attribute', prefix: 'app', style: 'camelCase' },
],
'@angular-eslint/component-selector': [
'error',
{ type: 'element', prefix: 'app', style: 'kebab-case' },
],
},
overrides: [
{
files: ['*.component.ts'],
parser: '@typescript-eslint/parser',
parserOptions: {
ecmaVersion: 2020,
sourceType: 'module',
},
plugins: ['@angular-eslint/template'],
processor: '@angular-eslint/template/extract-inline-html',
},
],
};
可以用不同的格式描述配置:JavaScript,JSON或YAML文件。您可以在JavaScript中留下评论。
“插件:@ angular-eslint /推荐”包含三个插件的设置:“ @ typescript-eslint / eslint-plugin”,“ @ angular-eslint / eslint-plugin”和“ @ angular-eslint / eslint-plugin-template ” 您可以在这里阅读他设定的规则。ng lint命令更新
同样在angular.json配置中,您需要更新ng lint命令以运行@ angular-eslint / builder:"lint": {
"builder": "@angular-eslint/builder:lint",
"options": {
"eslintConfig": ".eslintrc.js",
"tsConfig": [
"tsconfig.app.json",
"tsconfig.spec.json",
"e2e/tsconfig.json"
],
"exclude": [
"**/node_modules/**"
]
}
},
基本的ESLint设置已准备就绪,现在您可以使用标准的ng lint命令启动ESLint 。安装其他插件
要安装用于ESLint的插件(例如,为了在Angular中进行单元测试),您需要下载Jasmine插件并将其添加到设置中:npm install eslint-plugin-jasmine --save-dev
并为扩展名为* .spec.ts的文件添加一个新的设置块,用于“ overrides”属性:overrides: [
...,
{
files: ['src/**/*.spec.ts', 'src/**/*.d.ts'],
parserOptions: {
project: './src/tsconfig.spec.json',
},
extends: ['plugin:jasmine/recommended'],
plugins: ['jasmine'],
env: { jasmine: true },
rules: {
'@typescript-eslint/no-unused-vars': 'off',
},
}
],
以此类推,您可以为其他文件扩展名添加其他插件。添加样式指南指南
为了实现代码库的更大一致性,您可以选择一种流行样式指南的规则并将其添加到ESLint配置中:选择一种更适合您的团队的风格指南。您可以轮流尝试某个大型项目中的所有样式指南,查看短绒棉会产生哪些错误,并以此为基础进行选择。选择一种TypeScript样式指南的实现,因为JavaScript规则可能无法在TypeScript上正常工作。
例如,让我们将AirBnB样式指南添加到我们的ESLint配置中。为此,请使用带有用于TypeScript的AirBnB规则的配置以及带有使用导入/导出语法的规则的插件来安装该配置:npm install eslint-plugin-import eslint-config-airbnb-typescript --save-dev
为了不更改顶层设置,我们将使用AirBnB样式指南规则和其工作所需的TypeScript解析器在“覆盖”属性中创建新规则块:module.exports = {
...,
overrides: [
...,
{
files: ['*.ts'],
extends: [
'airbnb-typescript/base',
],
parser: '@typescript-eslint/parser',
parserOptions: {
ecmaVersion: 2020,
sourceType: 'module',
},
},
]
}
要添加另一个样式指南,您需要为TypeScript安装一组规则,使用样式指南的规则在“替代”中创建一个新规则块,并指定其工作所需的解析器。定制规则
如果要禁用或重新定义指南样式的某些规则,可以在“规则”属性中执行此操作:module.exports = {
...,
overrides: [
...,
{
files: ['*.ts'],
extends: [
'airbnb-typescript/base',
],
parser: '@typescript-eslint/parser',
parserOptions: {
ecmaVersion: 2020,
sourceType: 'module',
},
rules: {
'import/no-unresolved': 'off',
'import/prefer-default-export': 'off',
'class-methods-use-this': 'off',
'lines-between-class-members': 'off',
'@typescript-eslint/unbound-method': [
'error',
{
ignoreStatic: true,
},
],
},
},
]
}
配置更漂亮
要将Prettier添加到我们的配置中,我们需要安装Prettier本身,具有Prettier规则的插件以及将禁用所有可能与Prettier冲突的规则的配置:npm i prettier eslint-config-prettier eslint-plugin-prettier --save-dev
在最下面的“ extends”属性中带有扩展名* .ts的文件规则的块中的“替代”中,添加规则和“更漂亮”设置:module.exports = {
...,
overrides: [
...,
{
files: ['*.ts'],
extends: [
'airbnb-typescript/base',
'prettier/@typescript-eslint',
'plugin:prettier/recommended',
],
...,
},
]
}
Prettier的配置必须始终位于列表的最底部,以覆盖可能与Prettier冲突的任何规则。`prettier / @ typescript-eslint`禁用@ @ typescript-eslint`规则,该规则可能与Prettier冲突,并且`plugin:prettier / Recommendation`做三件事:- 包括eslint-plugin-prettier,
- 将更漂亮/更漂亮的规则错误打印为“错误”到控制台,
- 添加更漂亮的eslint-config-prettier格式设置规则。
配置更漂亮:
漂亮的东西可以设置代码格式而无需任何设置,但是要匹配AirBnB样式指南,您需要添加一些设置。在应用程序的根目录中创建.prettierrc.js文件:module.exports = {
trailingComma: "all",
tabWidth: 2,
semi: true,
singleQuote: true,
bracketSpacing: true,
printWidth: 100
};
如果您使用ESLint和Prettier在VS Code或以下命令中设置文件格式,则将使用这些设置:prettier "--write ."
配置VS代码
保存错误时,VS Code可以突出显示并更正ESLint发现的错误。为此,请下载ESLint VS Code 插件,并在项目内部使用工作区.vscode / settings.json的设置创建一个文件: "eslint.validate": [ "javascript", "typescript", "html"],
"eslint.options": {
"extensions": [".js", ".ts", "html"]
},
"editor.codeActionsOnSave": {
"source.fixAll.eslint": true,
},
在这里,我们将ESLint配置为在保存带有.js,.ts和.html扩展名的文件时强调和纠正错误。要使用“ shift + option + F”或“ shift + alt + F”组合键格式化文档,请下载VS Code 的Prettier插件并将其设置为默认格式化程序。设置git钩子
Git钩子是Git在某些事件上调用的脚本:提交,推送,接收。在他们的帮助下,我们可以在创建提交时开始整理代码,以使更少的错误进入请求池。为了更方便地使用Git钩子,请安装Husky,并仅检查添加到提交中的代码(这在lint花费大量时间的大型项目中非常有用):npm i husky lint-staged --save-dev
将这些插件的设置添加到package.json中:"scripts": {
...
},
"husky": {
"hooks": {
"pre-commit": "lint-staged --relative"
}
},
"lint-staged": {
"*.{js,ts}": [
"eslint --fix"
]
},
lint-staged将修改后的文件数组传递给被调用的命令。ng lint命令不知道如何接受文件数组,要使用它,您需要编写一个附加的脚本处理器。或者,您可以像本例中那样调用ESLint。这样的解决方案可以用于预提交,并且您可以运行ng lint来覆盖整个项目,例如,在CI管道中。发现
在Angular的未来版本中,具有基本规则的ESLint将开箱即用。现在,ESLint配置过程需要一些额外的步骤,ESLint没有TSLint的某些规则的等效项,并且Angular ESLint仍为Alpha版本。因此,由您决定是否立即切换到ESLint。但是,您将必须自己配置指导代码,其他规则,更漂亮,沙哑和短绒。我希望本文能帮助您弄清楚所有这些事情是如何协同工作的。配置短毛猫看似微不足道的任务,但它包括几个重要的组织问题:选择样式指南,相互同步各种解决方案。但是,将来在配置linter上花费的时间将大大节省您在代码审查过程中讨论代码的样式和格式的时间,减少落入请求池的错误的数量,并确保代码库的一致性。在Github上可以找到示例实现。如果您在配置中发现错误,或者您有附加组件,请编写!参考文献