代碼風格統一： 使用husky, prettier, eslint在代碼提交時自動格式化，並檢查代碼。

引言

這個需求主要是組內成員用的編輯器不統一，代碼風格也各異，因此在修改代碼時，若是格式化了代碼，在code review階段很難分辨修改了的代碼。固然，代碼風格統一還有其餘好處，這裏就不很少廢話了。

先看效果

源文件

能夠看到有不少紅線，這個是由於不符合prettier的規則，這種狀況下會使用eslint進行報錯，就是你看到的紅線了。具體如何配置以後再講。下面來看看提交時的狀況。

對比上圖，能夠看到代碼已經被格式化了。這時咱們再改一改，去掉eslint報的錯誤。注意 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"],
}
複製代碼

這個配置作以下三件事：

1. 使eslint-plugin-prettier生效
2. 不符合prettier/prettier的規則，會報錯。就是以前截圖中的紅線。
3. 使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。

其餘的坑

1. 尾逗號 只有換行時纔會有效果： 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後面沒有逗號
}

複製代碼

2. vscode配置 個人vscode默認使用的是全局安裝的eslint，沒有使用項目本地的，因此要更新下全局的eslint插件版本。若是小夥伴知道如何配置的，跟我說下哈。

結尾

若是小夥伴有看不明白或者我寫的不清楚的，有問題的，歡迎指正~