文章原文：https://www.cnblogs.com/yalong/p/14070696.html

背景：

　　1.為了程式碼風格統一， eslint 必不可少， 特別是一些老專案是沒有eslint配置的。

　　2.有人可能沒有遵循 eslint 規範就要提交程式碼， 所以需要加個限制，eslint 檢測不通過，不讓提交，所以出現了pre-commit

新增eslint 方法如下：

1.全域性安裝eslint

npm install eslint -g

2.在專案根目錄命令列下執行

eslint --init

3.然後會出現提示， 根據自己的需求，按照提示一步一步來就可以。

下面這個是 提示你用eslint 的目的， 我選擇第三項： 檢查並找到問題，強制轉換程式碼風格

下面這個是你要在那種模式下使用eslint， vue react 選擇JavaScript 模式，node專案 選擇CommonJs

下面是選擇了JavaScript 模式下，然後會出現React Vue 選項， 這裡以React 為例

下面是提示 你的程式碼是在瀏覽器 還是 Node端執行的， 選擇瀏覽器端

下面是提示你用那種 eslint 的程式碼風格， 推薦使用第一種 “Use a popular style quide”

選擇 “Use a popular style quide” 之後，會出現下面三種eslint 庫， 推薦使用 Airbnb

下面是你想用那種檔案型別作為 eslint 的配置檔案, 個人比較喜歡 JSON.

下面是選擇完之後， 會自動檢查你專案依賴中缺少哪些 npm 包，提示你是否要安裝， 點選YES, 安裝完即可

安裝完 可以看到專案跟目錄下 多了.eslintrc.json這個檔案。

然後在根目錄下 新建.eslintignore檔案，這是eslin 的忽略檔案， 哪些目錄下 不需要進行eslitn 檢測的，可以配置說明，

下面是一個示例， 會忽略 node_moduletestsrc/public 這三個目錄下的程式碼

node_modules
test
src/public

配合vscode 儲存時 自動修復eslint：

1.vscode 擴充套件安裝

同時要保證，eslint 是開啟狀態

正常情況下， vscode 此時已經可以在儲存的時候 自動修復eslint 錯誤了，

如果儲存沒有自動修復eslint 錯誤，可以看這篇：https://www.cnblogs.com/yalong/p/13960211.html

安裝/配置pre-commit:

1.安裝pre-commit

npm i pre-commit -D

2.修改 package.json 檔案配置，新增如下程式碼

"pre-commit": [
    "lint"
 ]

同時在scripts 裡新增"lint": "eslint --ext .js ./src", 意思是對 src 檔案目錄下 的所有 以 js 為字尾的檔案進行檢測

貼上一個我的package.json 配置：

{
  "name": "blog",
  "version": "0.1.0",
  "private": true,
  "scripts": {
    "start": "node bin/www",
    "dev": "./node_modules/.bin/nodemon --inspect=9229 bin/www",
    "lint": "eslint --ext .js ./src",
    "lint-fix": "eslint --ext .js --fix ./src",
    "prd": "pm2 start bin/www",
    "test": "echo \"Error: no test specified\" && exit 1"
  },
  "dependencies": {
    "debug": "^4.1.1",
    "koa": "^2.7.0",
    "koa-bodyparser": "^4.2.1",
    "koa-convert": "^1.2.0",
    "koa-json": "^2.0.2",
    "koa-logger": "^3.2.0",
    "koa-onerror": "^4.1.0",
    "koa-router": "^7.4.0",
    "koa-static": "^5.0.0",
    "koa-views": "^6.2.0",
    "pug": "^2.0.3"
  },
  "devDependencies": {
    "axios": "^0.21.0",
    "babel-eslint": "^10.1.0",
    "cross-env": "^7.0.2",
    "eslint": "^7.14.0",
    "eslint-config-airbnb": "^18.2.1",
    "eslint-plugin-import": "^2.22.1",
    "eslint-plugin-jsx-a11y": "^6.4.1",
    "nodemon": "^1.19.1",
    "pre-commit": "^1.2.2"
  },
  "pre-commit": [
    "lint"
  ]
}

測試pre-commit:

以後再提交程式碼的時候， commit 完， 在push 的時候 會檢測eslint 如果遇到問題就報錯終止提交，如下是我的示例

這時候需要把eslint 錯誤 修改完 才能提交。

修復eslint 錯誤的時候， 可以執行npm run lint-fix 大部分問題可以自動修復，修復不了的可以進入程式碼裡手動修復

到此就可以愉快的寫風格一樣的程式碼了