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"} }

這樣就能完美結合了。

總結

以上是生活随笔為你收集整理的代码规范之eslint+prettier实践的全部內容，希望文章能夠幫你解決所遇到的問題。

如果覺得生活随笔網站內容還不錯，歡迎將生活随笔推薦給好友。