ESLint+Prettier代碼規範實踐

時間 2019-11-07

標籤 eslint+prettier eslint prettier 代碼規範實踐简体版

原文原文鏈接

前提

本文並不單獨講解 ESLint 和 Prettier 如何配置和運行。javascript

問題

想在團隊中推行必定的代碼規範，並給不符合規範的代碼作檢測和提示。css

方案

代碼規範校驗使用 ESLint，可是一開始 ESLint 只有檢測告訴你哪裏有問題，經常出現的狀況就是一堆 warning，改起來很痛苦。後來 ESLint 提供了 $ ESLint filename --fix 的命令能夠自動幫你修復一些不符合規範的代碼。Prettier 是一個代碼格式化工具，能夠幫你把代碼格式化成可讀性更好的格式，最典型的就是一行代碼過長的問題。html

Lint和Prettier區別

那 ESLint 和 Prettier 的區別是什麼呢？eslint（包括其餘一些 lint 工具）的主要功能包含代碼格式的校驗，代碼質量的校驗。而 Prettier 只是代碼格式的校驗（並格式化代碼），不會對代碼質量進行校驗。代碼格式問題一般指的是：單行代碼長度、tab長度、空格、逗號表達式等問題。而代碼質量問題指的是：未使用變量、三等號、全局變量聲明等問題。vue

Lint和Prettier配合使用

爲何要二者配合使用？由於，第一在 ESLint 推出 --fix 參數前，ESLint 並無自動化格式代碼的功能，要對一些格式問題作批量格式化只能用 Prettier 這樣的工具。第二 ESLint 的規則並不能徹底包含 Prettier 的規則，二者不是簡單的誰替代誰的問題。可是在 ESLint 推出 --fix 命令行參數以後，若是你以爲 ESLint 提供的格式化代碼夠用了，也能夠不使用 Prettier。java

ESLint 和 Prettier 相互合做的時候有一些問題，對於他們交集的部分規則，ESLint 和 Prettier 格式化後的代碼格式不一致。致使的問題是：當你用 Prettier 格式化代碼後再用 ESLint 去檢測，會出現一些由於格式化致使的 warning。這個時候有兩個解決方案：react

運行 Prettier 以後，再使用 eslint --fix 格式化一把，這樣把衝突的部分以 ESLint 的格式爲標準覆蓋掉，剩下的 warning 就都是代碼質量問題了。
在配置 ESLint 的校驗規則時候把和 Prettier 衝突的規則 disable 掉，而後再使用 Prettier 的規則做爲校驗規則。那麼使用 Prettier 格式化後，使用 ESLint 校驗就不會出現對前者的 warning。

爲何不能先使用 ESLint 再使用 Prettier。針對方案1，若是你後使用 Prettier，那麼格式化後提交的代碼在下一次或者別人 checkout 代碼後是通不過 lint 校驗的。針對方案2，實際上是能夠的，可是本人在實踐中看社區方案的時候有提到某些狀況下 eslint --fix 和 prettier 混用會出現格式問題。因此保險起見仍是先用 perttier 格式化，再用 eslint 命令校驗，而不用 eslint --fix 命令去格式化。git

方案一實踐

安裝 prettier-eslint（Tip：全部方案前提是你已經安裝 eslint 和 prettier 相關包）：github
```
$ npm install --save-dev prettier-eslint prettier-eslint-cli
```
運行typescript
```
$ npm prettier-eslint "src/**/*.js"
```
prettier-eslint 會一次執行 prettier 和 eslint --fix 命令。整個流程是：Code ➡️ prettier ➡️ eslint --fix ➡️ Formatted Code。prettier-eslint 的各類參數請參看 https://github.com/prettier/p... 。npm

方案二實踐

方案二的思路主要是在 eslint 的規則配置文件上作文章，安裝特定的 plugin，把其配置到規則的尾部，實現 prettier 規則對 eslint 規則的覆蓋。

安裝 plugin：

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

在 .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 哪些規則了吧。

完成上述兩步能夠實現的是運行 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 爲例：

下載 ESLint Extension

配置 .eslintrc.*

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

由於我使用了 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 前強制代碼格式化和代碼校驗。

安裝

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

修改 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"
      ]
  },
}

那麼在運行 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"
    ]
  },
}