代碼規範之prettier+eslint實踐

eslint：code quality linter
prettier: code formatter

兩者結合使用既能達到團隊代碼協做風格一致(好比空格寬度，縮進等)，又能作代碼檢查。

今天遇到一個問題：使用eslint時，一般爲了約束開發人員，會同時使用pre-commit（利用git hooks），在commit以前若是eslint檢查不經過則沒法提交。

而在加入prettier的時候，但願能在代碼提交的時候prettier能自動格式化個人代碼文件，而後再提交。所以加入了husky+lint-staged配和實現。husky也利用了git hooks.

結果這兩個git hooks只有一個起到了做用。

爲了達到既能自動格式化代碼，又能攔截eslint錯誤提交，能夠保留pre-commit，而後將lint-staged加入pre-commit中，此時能夠移除husky了。

修改package.json以下：
package.json:

"scripts": {
        "lint": "node ./node_modules/.bin/eslint src",
        "precommit": "lint-staged"
    },
"pre-commit": [
    "precommit",
    "lint"
  ],
 "lint-staged": {
        "**/**.{js,json,pcss,md}": [
            "prettier --write",
            "git add"
        ]
    },

安裝eslint-config-prettier(eslint-plugin-prettier 和 eslint-config-prettier 以及both 中，選擇了eslint-config-prettier):

npm i eslint-config-prettier -D

修改.eslintrc，使得format規則衝突時以prettier爲準:

{
  "extends": ["eslint-config-recommended", "prettier"],
  "rules": {
    "eqeqeq": "off"
  }
}

這樣就能完美結合了。