关于eslint:eslint简介

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