使用 Eslint + Prettier + husky + lint-staged 提升前端項目質量、統一項目代碼風格

前端代碼風格因人而異，一個項目參與的人多了，不增強控制可能就是一個大雜燴，對開發人員來說就是一個噩夢。

如何解決這種困境呢？

• Eslint 代碼檢查工具
• Prettier 代碼格式化工具
• husky git hooks，git 鉤子
• lint-staged 對 git 中變動的文件進行 lint 操做

Eslint 代碼檢查，編輯器啓用 Eslint 以後，不符合規範的會自動進行提示。
Prettier 讓代碼變得更 pretty，會更改不符合檢測要求的代碼，自動格式化。
husky  git 每步操做的鉤子，沒執行一個操做都會執行一次對應的鉤子函數，執行 pre-commit 操做時，執行 Prettier 格式化腳本，便可自動的格式化代碼，讓 commit 以後的代碼都符合 Prettier規範。
lint-staged 想一想若是你在一個有必定規模的項目裏忽然加入一個格式化工具，是否是整個項目都要變天？lint-staged 就是用來只對變動的文件進行處理的

依賴安裝

npm i -D husky lint-staged prettier eslint-plugin-prettier eslint-config-prettier
複製代碼

配置

項目使用 create-react-app 初始化

配置 .eslintrc

{
    "env":{
        "amd": true,
        "browser": true,
        "node": true,
        "es6": true
    },
    "extends": [
        "react-app",
        "plugin:prettier/recommended",
        "prettier/react"
    ],
    "plugins": [
        "prettier"
    ],
    "parser": "babel-eslint",
    "rules": {
        "prettier/prettier": "error"
    }
}複製代碼

1. eslint-config-prettier 禁用全部和 Prettier 產生衝突的規則
2. eslint-plugin-prettier 把 Prettier 應用到 Eslint，配合 rules  "prettier/prettier": "error" 實現 Eslint 提醒

配置 .prettierrc

具體規則參考官網 Options

{
    "semi": false,
    "useTabs": false,
    "singleQuote": true,
    "trailingComma": "es5"
}複製代碼

配置 .editorconfig

編輯器識別 .editorconfig 以後能夠在輸入的時候帶來便利，參考 EditorConfig

root = true

[*]
indent_style = space
indent_size = 2
end_of_line = lf
charset = utf-8
trim_trailing_whitespace = true
insert_final_newline = true
max_line_length = 120

[*.md]
trim_trailing_whitespace = false複製代碼

配置 package.json

添加 husky 和 lint-staged 配置，添加 lint、fix  scripts 項

"scripts": {
    "start": "react-app-rewired start",
    "build": "react-app-rewired build",
    "test": "react-app-rewired test --env=jsdom",
    "eject": "react-scripts eject",
    "lint": "eslint src/**/*.js",
    "fix": "prettier --write src/**/*.js"
},
"husky": {
    "hooks": {
      "pre-commit": "lint-staged"
    }
},
"lint-staged": {
    "src/**/*.js": [
      "eslint --fix",
      "prettier --write",
      "git add"
    ]
},複製代碼

而後運行 

npm run lint複製代碼

Eslint 會檢測 src 下面全部 js 文件

運行 

npm run fix複製代碼

Prettier 會自動修復 src 下面的文件，注意，謹慎使用這個操做，它會讓你的全部不合符規則的文件發生變動。你可能會驚訝的發現，文件夾中上百個文件都被改了！！！

如何避免 Prettier 一次將全部的文件格式化？

husky.hooks['pre-commit'] 是在 commit 以前會執行的命令，在執行 git commit 時，會先執行 lint-staged ，而 lint-staged 就是用來只對當前更改的文件進行檢測和格式化。

lint-staged 中 "src/**/*.js" 表示只對 src 中的 js 文件進行格式化，也能夠 "*.js" 表示對全部項目中的 js 文件都會格式化。後面數組中的三條命令會前後分別執行， Eslint  fix 以後 Prettier 格式化，而後 git add，而後 git commit

eslint --fix -> prettier --write -> git add -> git commit -m 'xxx'

測試運行

這是 git commit 以前

執行

git add *
git commit -m 'test'複製代碼

執行後

命令行