ESLint+Prettier代码规范实践

前提

本文并不单独讲解 ESLint 和 Prettier 如何配置和运行。

问题

想在团队中推行必定的代码规范，并给不符合规范的代码作检测和提示。

方案

代码规范校验使用 ESLint，可是一开始 ESLint 只有检测告诉你哪里有问题，经常出现的状况就是一堆 warning，改起来很痛苦。后来 ESLint 提供了 $ ESLint filename --fix 的命令能够自动帮你修复一些不符合规范的代码。Prettier 是一个代码格式化工具，能够帮你把代码格式化成可读性更好的格式，最典型的就是一行代码过长的问题。

Lint和Prettier区别

那 ESLint 和 Prettier 的区别是什么呢？eslint（包括其余一些 lint 工具）的主要功能包含代码格式的校验，代码质量的校验。而 Prettier 只是代码格式的校验（并格式化代码），不会对代码质量进行校验。代码格式问题一般指的是：单行代码长度、tab长度、空格、逗号表达式等问题。而代码质量问题指的是：未使用变量、三等号、全局变量声明等问题。

Lint和Prettier配合使用

为何要二者配合使用？由于，第一在 ESLint 推出 --fix 参数前，ESLint 并无自动化格式代码的功能，要对一些格式问题作批量格式化只能用 Prettier 这样的工具。第二 ESLint 的规则并不能彻底包含 Prettier 的规则，二者不是简单的谁替代谁的问题。可是在 ESLint 推出 --fix 命令行参数以后，若是你以为 ESLint 提供的格式化代码够用了，也能够不使用 Prettier。

ESLint 和 Prettier 相互合做的时候有一些问题，对于他们交集的部分规则，ESLint 和 Prettier 格式化后的代码格式不一致。致使的问题是：当你用 Prettier 格式化代码后再用 ESLint 去检测，会出现一些由于格式化致使的 warning。这个时候有两个解决方案：

1. 运行 Prettier 以后，再使用 eslint --fix 格式化一把，这样把冲突的部分以 ESLint 的格式为标准覆盖掉，剩下的 warning 就都是代码质量问题了。
2. 在配置 ESLint 的校验规则时候把和 Prettier 冲突的规则 disable 掉，而后再使用 Prettier 的规则做为校验规则。那么使用 Prettier 格式化后，使用 ESLint 校验就不会出现对前者的 warning。

为何不能先使用 ESLint 再使用 Prettier。针对方案1，若是你后使用 Prettier，那么格式化后提交的代码在下一次或者别人 checkout 代码后是通不过 lint 校验的。针对方案2，实际上是能够的，可是本人在实践中看社区方案的时候有提到某些状况下 eslint --fix 和 prettier 混用会出现格式问题。因此保险起见仍是先用 perttier 格式化，再用 eslint 命令校验，而不用 eslint --fix 命令去格式化。

方案一实践

1. 安装 prettier-eslint（Tip：全部方案前提是你已经安装 eslint 和 prettier 相关包）：

   $ npm install --save-dev prettier-eslint prettier-eslint-cli

2. 运行

   $ npm prettier-eslint "src/**/*.js"

   prettier-eslint 会一次执行 prettier 和 eslint --fix 命令。整个流程是：Code ➡️ prettier ➡️ eslint --fix ➡️ Formatted Code。prettier-eslint 的各类参数请参看 https://github.com/prettier/p... 。

方案二实践

方案二的思路主要是在 eslint 的规则配置文件上作文章，安装特定的 plugin，把其配置到规则的尾部，实现 prettier 规则对 eslint 规则的覆盖。

1. 安装 plugin：

   $ npm install --save-dev eslint-config-prettier

2. 在 .eslintrc.* 文件里面的 extends 字段添加：

   {
     "extends": [
       ...,
       "已经配置的规则",
       "prettier",
       "prettier/@typescript-eslint"
     ]
   }

   我使用的是 TypeScript，因此 plugin 的名字是 prettier/@typescript-eslint。

   若是你想 disable 掉更多的规则能够是以下：

   {
     "extends": [
       ...,
       "已经配置的规则",
       "prettier",
       "prettier/@typescript-eslint",
       "prettier/babel",
       "prettier/flowtype",
       "prettier/react",
       "prettier/standard",
       "prettier/unicorn",
       "prettier/vue"
     ]
   }

   看名字应该能猜到每一个对应的是 disable 哪些规则了吧。

3. 完成上述两步能够实现的是运行 eslint 命令会按照 prettier 的规则作相关校验，可是仍是须要分别运行 prettier 和 eslint 命令。社区有一个方案整合了上述两步，在使用 eslint --fix 时候，实际使用 prettier 来替代 eslint 的格式化功能。
   安装：

   $ npm install --save-dev eslint-plugin-prettier

   修改 .eslintrc.*

   {
     "extends": [
       ...,
       "已经配置的规则",
       "plugin:prettier/recommended"
     ]
   }

   这个时候你运行 eslint --fix 实际使用的是 Prettier 去格式化文件。eslint-plugin-prettier 具体详细的配置见：https://github.com/prettier/e...

和VSCode集成使用

上面全部讲到的内容都是在你写完代码去校验的，使用的是命令行工具。若是你是一个新手，对规范不是很熟悉，那么碰到的问题就是写完代码运行命令行工具后产生海量的 warning。这个时候改起来真的很打击积极性。若是可以在写的代码的时候让编辑器提示就能及时改正了。天然咱们社区也提供了不少方案，各家的编辑器 Atom、Sublime、VSCode 等主流的编辑器都有相关的插件。我就以 VSCode 为例：

1. 下载 ESLint Extension

   

2. 配置 .eslintrc.*

   module.exports =  {
     parser:  '@typescript-eslint/parser',
     extends:  [
       'plugin:@typescript-eslint/recommended',
       'prettier/@typescript-eslint',
       'plugin:prettier/recommended'
     ],
     parserOptions:  {
       ecmaVersion:  2018,
       sourceType:  'module'
     },
     // 其余配置
   };

3. 由于我使用了 TypeScript 因此 .eslintrc.* 配置项的值和 javascript 有点不同，可是原理是同样的。若是你没有使用 TypeScript 那么到上面步骤就结束了。可是 VSCode 的 ESLint 插件没有自然支持 ts 文件，因此咱们还必须本身创建一个设置文件。在项目根目录下新建 .vscode/settings.json 文件，内容以下：

   {
     "eslint.validate": [
       "javascript",
       "javascriptreact",
       { 
         "language": "typescript",
         "autoFix": true
       },
       { 
         "language": "typescriptreact",
         "autoFix": true
       }
     ]
   }

你就能够看到编辑器对代码有实时提示了。

强制校验和格式化

讲到这里两个工具配合使用已经讲好了，可是这些步骤都依赖于人工自觉，要作到一点点强制功能，咱们就能够用到 husky lint-staged 来在 git commit 前强制代码格式化和代码校验。

1. 安装

   $npm install --save-dev husky lint-staged

2. 修改 package.json：

   {
     "name": "project-name",
     ...,
     "husky": {
         "hooks": {
             "pre-commit": "lint-staged"
         }
     },
     "lint-staged": {
         "src/**/*.{js,jsx,ts,tsx,json,css,scss,md}": [
         "prettier --write",
         "eslint",
         "git add"
         ]
     },
   }

3. 那么在运行 git commit 时候，自动会先去运行 prettier --write 格式化代码，再运行 eslint 校验代码是否符合规范。这两步都经过后才会提交代码。若是任何一步失败，则会中止提交。

若是你使用方案一，lint-staged 配置的命令:

{
  "name": "project-name",
  ...,
   "husky": {
     "hooks": {
       "pre-commit": "lint-staged"
     }
   },
  "lint-staged": {
    "src/**/*.{js,jsx,ts,tsx,json,css,scss,md}": [
      "prettier-eslint",
      "git add"
    ]
  },
}

若是你使用了方案二中的 eslint-plugin-prettier，lint-staged 配置的命令:

{
  "name": "project-name",
  ...,
  "husky": {
     "hooks": {
       "pre-commit": "lint-staged"
     }
   },
  "lint-staged": {
    "src/**/*.{js,jsx,ts,tsx,json,css,scss,md}": [
      "eslint --fix",
      "git add"
    ]
  },
}

参考文献

1. https://eslint.org/
2. https://prettier.io/
3. https://restishistory.net/blo...

若是使用的是 TypeScript：

1. ESLint如何运用到TS项目
2. 如何和Prettier配合使用