本文次要记录作者对 eslint 了解的关键点,倡议在浏览本文之前,先浏览 eslint 官网用户手册文档
eslint 是一个代码查看工具。
配置
增加 eslint 后,进行代码测验并没有成果,还须要进行配置。
在我的项目下创立 .eslintrc.js
配置文件(更多配置形式请浏览官网),用于领导 eslint 的行为。
规定
规定能够了解为对某种编码场景的查看纬度,如命名,缩进等。官网提供了十分多的规定,但默认是不开启状态,须要通过配置文件开启。
如开启一个规定,规定我的项目中字符串的字面量都是用双引号:
module.exports = {
rules: {quotes: ["error", "double"]
},
};
更多的规定请见官网规定列表。
如果感觉配置规定太过于繁琐,或者不晓得如何配置时,能够应用一些他人曾经配置好的规定配置。这种规定配置个别称为格调,次要有:
- eslint-config-standard: js 规范格调,特地宽松,举荐应用高级用法,比拟灵便,适宜精英小团队;
- eslint:recommended: eslint 官网举荐,较严格,应用最广的格调;
- eslint-config-airbnb: 爱彼迎团队推出来的代码格调,比拟严苛,团队入门老手较多时举荐;
更多格调,能够在 github ,npm 中应用关键字 eslint-config
进行搜寻,抉择适宜本人或者团队的。
对于他人配置好的规定配置,只须要在配置文件中,应用 extends
即能够继承,如:
module.exports = {extends: ['eslint-config-airbnb'],
};
此时能够不须要额定去配置其配置项和规定,即可应用。如果这种社区的格调存在不适宜团队或者集体的中央,能够在以后配置中配置其余内容项进行调整,如规定,本人配置的内容具备最高优先级。
能够继承多个格调,多个格调中对于同个规定的配置,都是前面的笼罩后面的,其余配置的优先级也是一样。
有一个比拟非凡的格调就是 eslint-config-prettier
,该格调中只对一些能够通过 prettier 进行代码主动格式化操作的场景对应的规定给敞开,利用 prettier 去保障代码符合规范。所以当你的团队启用 prettier 的时候,须要保障eslint-config-prettier
放在最初。
也能够把本人搭配进去的规定配置抽取公共的库,倡议命名标准为eslint-config-xxxx
,在多个我的项目中应用。如果不想抽取为配置库,抽取为一个配置文件随便放在哪里也是能够的。
规定共享配置
setting
配置多个规定的独特配置配置(如果有), 这在一些 eslint 插件(下文会说)中用的比拟多,如eslint-plugin-import
;
解析器和解析器选项
能够在配置文件中通过 parser
配置对 js 进行语法信息的解析器。如果应用一些非凡的 es6 语法,可能应用 eslint 自带的语法解析器无奈反对到这些个性,能够配置为 @babel/eslint-parser,利用 babel 插件机制,反对更广的语法。另外如果要反对 typescipt 语法,倡议配置为 @typescript-eslint/parser。
通过 parserOptions
配置项能够配置对应解析器的解析器选项,具体配置,参照对应解析器的文档,都有举荐配置,或者依据理论需要场景配置。
其余配置
倡议浏览官网。
插件
当官网的规定不能笼罩全副理论场景时,eslint 反对插件体系对其规定进行裁减。
这里举荐一些社区插件:
- @typescript-eslint/eslint-plugin:typescipt 语法标准
- eslint-plugin-import:导入模块标准
- eslint-plugin-jsx-a11y: 推动无障碍反对标准
- eslint-plugin-react: react 编写标准
- eslint-plugin-react-hooks: react hooks 编写标准
- eslint-plugin-promise:promise 应用标准
- eslint-plugin-lodash:lodash 应用标准
更多的能够应用关键字 eslint-plugin
在 github 和 npm 中搜寻,抉择适宜本人或者团队的插件。
每个插件都会扩大一些规定,但须要留神,当规定启用较多时,测验工夫就会减少。
每个插件根本的都有对插件内的规定的举荐配置,应用其举荐配置,能够疾速应用。
另外能够参考官网的文档自定义插件,自定义规定,依据集体需要和团队需要,实现更加贴合的测验规定。
应用
在我的项目中集成 eslint 后,有多种应用形式。
vscode
vscode 中增加插件 eslint,即可失效。能够在编码时及时反馈,养成良好编码习惯。
命令行
eslint 提供 elsint
指令,能够配置在 package.json 中的 scripts
中,也能够间接 npx 执行,相干命令行参数参照官网对应文章:eslint 命令行。
webpack 插件
参考 eslint-webpack-plugin 即可。
node Api
eslint 提供 node api 模式,不便二次封装和集成在其余工具外面。如对其校验后果自定义格式化,该需要命令行指定 format
也能够,但更加倡议应用 api 的模式。
git hooks
利用 husky + lint-staged,对每次提交的每个文件进行测验,如果没通过,禁止提交。
提供一个参考的配置 (配置在package.json
的形式,其余形式参考相干技术,按需调整):
{
"husky": {
"hooks": {"pre-commit": "npx lint-staged"}
},
"lint-staged": {"src/**/*.{js,jsx,tsx,ts}": [
"eslint --quiet",
"git add"
]
}
}