本文次要记录作者对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"    ]  }}