強制統一代碼風格--給現有項目添加eslint 和 pre-commit

文章原文：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_module   test   src/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  大部分問題可以自動修復，修復不了的可以進入代碼里手動修復

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