引言
這個需求主要是組內成員用的編輯器不統一，程式碼風格也各異，所以在修改程式碼時，如果格式化了程式碼，在code review階段很難分辨修改了的程式碼。當然，程式碼風格統一還有其他好處，這裡就不不多廢話了。
先看效果
原始檔
HelloWorld()後故意留個報錯，而且我們沒有加分號。
HelloWorld()後的報錯沒有了，而且分號自動加上去了。這是用了eslint自動修復的功能。
總結下： 在我們提交程式碼時，先自動幫我們格式化程式碼，然後使用eslint檢查程式碼，並自動修復錯誤，在修復不了的時候，報錯給我們。並且報錯後此次的commit不會提交。
下面看如何配置。
使用的工具
- husky。一個git鉤子工具，這裡主要用pre-commit鉤子。通俗點講就是husky可以在你commit之前幫你做一些事情。
- prettier。 一個很流行的程式碼格式化工具，你很容易在編輯器找到實現它的各種外掛，像vscode,atom,webstom都可以找到。這裡用它在程式碼提交前做程式碼格式化。
- eslint。 程式碼檢查工具。eslint也可以負責一部分程式碼格式檢查的工作，但是prettier已經做的很好了，所以我便沒用eslint的程式碼格式檢查，只讓其負責程式碼錯誤檢查。
- lint-staged。在你提交的檔案中，執行自定義的指令。don’t let ? slip into your codebase. — lint-staged
安裝
安裝eslint
npm i -D eslint babel-eslint eslint-config-airbnb eslint-plugin-import eslint-plugin-jsx-a11y eslint-plugin-react
複製程式碼安裝prettier
npm install --save-dev prettier eslint-plugin-prettier eslint-config-prettier
複製程式碼安裝husky，lint-staged
npm i -D husky lint-staged pretty-quick
複製程式碼prettier配置
- prettier 程式碼格式化核心
- eslint-plugin-prettier 外掛，可以讓
eslint使用prettier規則進行檢查，並使用--fix選項。像之前的格式不對時，eslint提示的紅線。 - eslint-config-prettier 外掛，之前說了
eslint也會檢查程式碼的格式，這個外掛就是關閉所有不必要或可能跟prettier產生衝突的規則。
在eslintrc.json新增如下配置：
{
"extends": ["airbnb", "plugin:prettier/recommended"],
}
複製程式碼這個配置做如下三件事：
- 使
eslint-plugin-prettier生效 - 不符合
prettier/prettier的規則，會報錯。就是之前截圖中的紅線。 - 使
eslint-config-prettier生效。就是會覆蓋eslint中與prettier衝突的配置。
prettier配置檔案
prittier配置檔案支援很多種，具體可以看這裡。我使用的是.prettierrrc格式，因為試過其他格式，但是隻有.prettierrrc，vscode才可以識別。
生成配置可以直接用官網上的try it out,左下角有匯出配置。下面這份配置基本上是風格要求的全部了，具體可按照個人愛好進行配置。
{
"printWidth": 120, // 一行最大多少字元
"tabWidth": 2, // tab佔用的字元數
"useTabs": false, // 是否使用tab代替空格
"semi": true, // 是否每句後都加分號
"singleQuote": true, // 是否使用單引號
"jsxSingleQuote": false, // jsx是否使用單引號
"trailingComma": "all", // 陣列尾逗號。
"bracketSpacing": false, // {foo: xx}還是{ foo: xx }
"jsxBracketSameLine": false, //看官網
"arrowParens": "always" //剪頭函式引數是否使用（）
}
複製程式碼eslint配置
直接上配置：
{
"extends": ["airbnb", "plugin:prettier/recommended"], // eslint擴充套件規則
"parserOptions": {
"ecmaVersion": 7,
"sourceType": "module",
"ecmaFeatures": {
"jsx": true
}
},
"parser": "babel-eslint",// 解決ES6 improt會報錯
"env": { // eg如果不配置browser，window就會被eslint報undefined的錯
"es6": true,
"browser": true,
"node": true
},
"plugins": ["react", "jsx-a11y", "import"],
"rules": {
"class-methods-use-this": 0,
"import/no-named-as-default": 0,
"react/jsx-filename-extension": [
"error",
{
"extensions": [".js", ".jsx"]
}
]
}
}
複製程式碼husky鉤子pre-commit配置
"husky": {
"hooks": {
"pre-commit": "lint-staged" // pre-commit，提交前的鉤子
}
},
"lint-staged": {
// 此處可以配置資料夾和檔案型別的範圍
"src/**/*.{jsx,txs,ts,js,json,css,md}": [
"prettier --write", // 先使用prettier進行格式化
"eslint --fix", // 再使用eslint進行自動修復
"git add" // 所有通過的話執行git
]
},
複製程式碼husky會在你提交前，呼叫pre-commit鉤子，執行lint-staged，如果程式碼不符合prettier配置的規則，會進行格式化；然後再用eslint的規則進行檢查，如果有不符合規則且無法自動修復的，就會停止此次提交。如果都通過了就會講程式碼新增到stage，然後commit。
其他的坑
- 尾逗號
只有換行時才會有效果：
trailingComma配置為all
function HelloWorld({greeting = "hello", greeted = '"World"', silent = false, onMouseOver,}) {
let noTrailingComma = [a , b,c]
}
複製程式碼格式化後為
function HelloWorld({
greeting = "hello",
greeted = '"World"',
silent = false,
onMouseOver, // 這裡有逗號
}) {
let noTrailingComma = [a, b, c]; // 注意這裡c後面沒有逗號
}
複製程式碼- vscode配置 我的vscode預設使用的是全域性安裝的eslint，沒有使用專案本地的，所以要更新下全域性的eslint外掛版本。如果小夥伴知道如何配置的，跟我說下哈。
結尾
如果小夥伴有看不明白或者我寫的不清楚的，有問題的，歡迎指正~