最全的Eslint配置模板，今后统一团队的编程习惯

随着项目的不断增长，急切须要统一每一个项目的代码规范，将一些低级错误在萌芽状态下掐死。因此特此结合当前项目使用的一些规范，再根据社区推荐的规范，整合成这个repo。里面集成了React和Nodejs的编程规范，全部的规范都是基于airbnb，里面细分了js版本和ts版本，知足你们的编程需求。

另外其余框架的代码规范没有实际项目经验，因此没能集齐全部”龙珠“，所以在此欢迎你们贡献出平时使用的标准编码规范(尽可能是基于airbnb的)，共享给社区其余童鞋。

Eslint生态依赖包介绍

在说明Eslint配置以前，咱们先来掌握Eslint配置的生态圈中涉及到的一些依赖包的做用，这样咱们方能够知其因此然。

最基础

1. eslint: lint代码的主要工具，因此的一切都是基于此包

解析器(parser)

1. babel-eslint: 该依赖包容许你使用一些实验特性的时候，依然可以用上Eslint语法检查。反过来讲，当你代码并无用到Eslint不支持的实验特性的时候是不须要安装此依赖包的。

2. @typescript-eslint/parser: Typescript语法的解析器，相似于babel-eslint解析器同样。对应parserOptions的配置参考官方的README。

扩展的配置

1. eslint-config-airbnb: 该包提供了全部的Airbnb的ESLint配置，做为一种扩展的共享配置，你是能够修改覆盖掉某些不须要的配置的，该工具包包含了react的相关Eslint规则(eslint-plugin-react与eslint-plugin-jsx-a11y)，因此安装此依赖包的时候还须要安装刚才说起的两个插件

2. eslint-config-airbnb-base: 与上一个包的区别是，此依赖包不包含react的规则，通常用于服务端检查。

3. eslint-config-jest-enzyme: jest和enzyme专用的校验规则，保证一些断言语法可让Eslint识别而不会发出警告。

4. eslint-config-prettier: 将会禁用掉全部那些非必须或者和prettier冲突的规则。这让您可使用您最喜欢的shareable配置，而不让它的风格选择在使用Prettier时碍事。请注意该配置只是将规则off掉,因此它只有在和别的配置一块儿使用的时候才有意义。

插件

1. eslint-plugin-babel: 和babel-eslint一块儿用的一款插件.babel-eslint在将eslint应用于Babel方面作得很好，可是它不能更改内置规则来支持实验性特性。eslint-plugin-babel从新实现了有问题的规则，所以就不会误报一些错误信息

2. eslint-plugin-import: 该插件想要支持对ES2015+ (ES6+) import/export语法的校验, 并防止一些文件路径拼错或者是导入名称错误的状况

3. eslint-plugin-jsx-a11y: 该依赖包专一于检查JSX元素的可访问性。

4. eslint-import-resolver-webpack: 能够借助webpack的配置来辅助eslint解析，最有用的就是alias，从而避免unresolved的错误

5. eslint-import-resolver-typescript：和eslint-import-resolver-webpack相似，主要是为了解决alias的问题

6. eslint-plugin-react: React专用的校验规则插件.

7. eslint-plugin-jest: Jest专用的Eslint规则校验插件.

8. eslint-plugin-prettier: 该插件辅助Eslint能够平滑地与Prettier一块儿协做，并将Prettier的解析做为Eslint的一部分，在最后的输出能够给出修改意见。这样当Prettier格式化代码的时候，依然可以遵循咱们的Eslint规则。若是你禁用掉了全部和代码格式化相关的Eslint规则的话，该插件能够更好得工做。因此你可使用eslint-config-prettier禁用掉全部的格式化相关的规则(若是其余有效的Eslint规则与prettier在代码如何格式化的问题上不一致的时候，报错是在所不免的了)

9. @typescript-eslint/eslint-plugin：Typescript辅助Eslint的插件。

10. eslint-plugin-promise：promise规范写法检查插件，附带了一些校验规则。

辅助优化流程

1. husky: git命令hook专用配置.

2. lint-staged: 能够定制在特定的git阶段执行特定的命令。

Prettier

Prettier相关的包有好多个，除了上面列举的两个，你可能还会用到下面的三个：

1. prettier：原始实现版本，定义了prettier规则并实现这些规则。支持的规则参考：传送门

2. prettier-eslint：输入代码，执行prettier后再eslint --fix输出格式化后的代码。仅支持字符串输入。

3. prettier-eslint-cli：顾名思义，支持CLI命令执行prettier-eslint的操做

那么Prettier这么多工具包，都是些什么关系呢？太容易让人混淆了。这里用一段话简单介绍一下：

最基础的是prettier，而后你须要用eslint-config-prettier去禁用掉全部和prettier冲突的规则，这样才可使用eslint-plugin-prettier去以符合eslint规则的方式格式化代码并提示对应的修改建议。为了让prettier和eslint结合起来，因此就诞生了prettier-eslint这个工具，可是它只支持输入代码字符串，不支持读取文件，所以又有了prettier-eslint-cli

这就是5个工具包互相之间的关系。加上prettier以后的提示可读性高一点，以下图：

Eslint配置文件

1. env: 预约义那些环境须要用到的全局变量，可用的参数是：es6、broswer、node等。

   es6会使能全部的ECMAScript6的特性除了模块(这个功能在设置ecmaVersion版本为6的时候会自动设置)

   browser会添加全部的浏览器变量好比Windows

   node会添加全部的全局变量好比global

   更多环境配置参考Specifying Environments

2. extends: 指定扩展的配置，配置支持递归扩展，支持规则的覆盖和聚合。

3. plugins: 配置那些咱们想要Linting规则的插件。

4. parser: 默认ESlint使用Espree做为解析器，可是一旦咱们使用babel的话，咱们须要用babel-eslint。

5. parserOptions: 当咱们将默认的解析器从Espree改成babel-eslint的时候，咱们须要指定parseOptions，这个是必须的。

   ecmaVersion: 默认值是5，能够设置为三、五、六、七、八、九、10，用来指定使用哪个ECMAScript版本的语法。也能够设置基于年份的JS标准，好比2015(ECMA 6)

   sourceType: 若是你的代码是ECMAScript 模块写的，该字段配置为module，不然为script(默认值)

   ecmaFeatures：该对象指示你想使用的额外的语言特性

   globalReturn：容许全局范围内的`return`语句
   
    impliedStrict：使能全局`strict`模式
   
    jsx：使能JSX
   复制代码

6. rules: 自定义规则，能够覆盖掉extends的配置。

7. settings：该字段定义的数据能够在全部的插件中共享。这样每条规则执行的时候均可以访问这里面定义的数据

更多配置选项参考官方文档Eslint

Eslint配置文件解析

介绍了这么多，咱们以模板提供的一个配置例子eslint-react-js来讲(说明都写在注释里了~)：

module.exports =  {
  parser:  'babel-eslint',  // Specifies the ESLint parser
  parserOptions: {
    ecmaVersion: 2015, // specify the version of ECMAScript syntax you want to use: 2015 => (ES6)
    sourceType:  'module',  // Allows for the use of imports
    ecmaFeatures: {
      jsx: true, // enable JSX
      impliedStrict: true // enable global strict mode
    }
  },
  extends:  [
    'airbnb',  // Uses airbnb, it including the react rule(eslint-plugin-react/eslint-plugin-jsx-a11y)
    'plugin:promise/recommended',
    // 'prettier', // Use prettier, it can disable all rules which conflict with prettier
    // 'prettier/react' // Use prettier/react to pretty react syntax
  ],
  settings: {
    'import/resolver': { // This config is used by eslint-import-resolver-webpack
      webpack: {
        config: './webpack/webpack-common-config.js'
      }
    },
  },
  env: {
    browser: true // enable all browser global variables
  },
  'plugins': ['react-hooks', 'promise'], // ['prettier', 'react-hooks']
  rules:  {
    // Place to specify ESLint rules. Can be used to overwrite rules specified from the extended configs
    // e.g. '@typescript-eslint/explicit-function-return-type': 'off',
    "react-hooks/rules-of-hooks": "error",
    "semi": ["error", "never"],
    "react/jsx-one-expression-per-line": 0,
    /** * @description rules of eslint-plugin-prettier */
    // 'prettier/prettier': [
    // 'error', {
    // 'singleQuote': true,
    // 'semi': false
    // }
    // ]
  },
};
复制代码

由于咱们在代码的保存以及提交阶段都会进行prettier的格式化，因此在Eslint中禁用掉了全部跟prettier的配置，若是你须要的话，能够从新enable掉。

下面对比一下打开prettier和没有打开prettier的区别：

和

Prettier影响的规则

上面prettier介绍了那么多，那么这小节简单介绍如下prettier的一些重要的的规则：

1. printWidth: 确保你的代码每行的长度不会超过100个字符
2. singleQuote: 转换全部的双引号为单引号
3. trailingComma: 确保对象的最后一个属性后会有一个逗号
4. bracketSpacing: 自动为对象字面量之间添加空格，好比：{ foo: bar }
5. jsxBracketSameLine: 在多行JSX元素的最后一行追加 >
6. tabWidth：指定tab的宽度是几个空格
7. semi: 是否在每行声明代码以后都要添加;

更多规则请参考：Options

让优美的代码深刻到骨髓里~

保存代码的时候自动格式化(Vscode版本)

1. 安装Eslint插件

2. Vscode配置：

   2.1. editor.formatOnSave置为false，以防默认的文件格式化配置和Eslint和Prettier冲突

   2.2. eslint.autoFixOnSave置为true，这样当咱们每次保存文件的时候就能够自动fix文件的错误格式。

   以下图：

   

   

Lint-staged

Lint-staged帮助你在暂存文件的时候可以让错误格式代码不会提交到你分支。

为何使用Lint-staged?

由于提交代码前的检查是最后一个管控代码质量的一个环节，因此在提交代码以前进行lint检查意义重大。这样能够确保没有错误的语法和代码样式被提交到仓库上。可是在整个项目上执行Lint进程会很低效，因此最好的作法就是检查那个被改动的文件。而Lint-staged就是作这个的。

根据上面咱们提供的生态圈依赖包，在package.json中配置该字段：

"lint-staged": {
  "**/*.{tsx,ts}": [ // 这里的文件后缀能够修改为本身须要的文件后缀
    "prettier-eslint --write",
    "git add"
  ]
}
复制代码

与Husky结合使用

为了让lint-staged能够在change被staged以前执行，咱们这时候须要借助git的钩子功能，而提供钩子功能的社区解决方案就是husky，该工具提供了git在多个阶段前执行的操做，好比咱们此次要在预提交的时候进行Lint检查，配置以下：

"husky": {
  "hooks": {
    "pre-commit": "lint-staged"
  }
}
复制代码

这样每次commit的时候会执行lint操做，如以前所说，prettier-eslint-cli会将代码prettier一遍后再eslint --fix，若是没有错误，那么就会直接执行git add，不然报错退出。

EditorConfig

由于并非全部的人都使用VS code，因此为了在一样的项目下保持一致，好比tab的宽度或者行尾要不要有分号，咱们可使用.editorconfig来统一这些配置。

支持EditorConfig的编辑器列表请走这里。

下面是模板配置里面推荐的editorconfig的配置

# EditorConfig is awesome: http://EditorConfig.org
 # top-most EditorConfig file
root = true

[*.md]
trim_trailing_whitespace = false

[*.js]
trim_trailing_whitespace = true
 # Unix-style newlines with a newline ending every file
[*]
indent_style = space
indent_size = 2
# 保证在任何操做系统上都有统一的行尾结束字符
end_of_line = lf
charset = utf-8
insert_final_newline = true
max_line_length = 100
复制代码

最后

至此Eslint的全解析就完美落幕了，最后再安利一波eslint-config-templates，也欢迎你们PR。

参考

1. These tools will help you write clean code
2. Prettier
3. Eslint