前端代碼檢查與代碼規範

1、背景

本篇介紹的是如何作到在代碼提交前，統一團隊代碼風格，檢查代碼質量，並修復一些低級錯誤。最終期待項目中的開發人員提交的代碼都符合代碼規範、風格統一。

2、組合技

Git Hook + lint-staged + Prettier + ESLint，先介紹最終實現，具體每一個模塊的做用和配置後面有各自的介紹。

2.1 實現步驟

• 準備好待提交的代碼
• git add . 添加到暫存區
• 執行 git commit
• husky註冊在git pre-commit的鉤子調起 lint-staged
• lint-staged 取得全部被提交的文件依次執行寫好的任務（ Prettier + ESLint）
• 若是有錯誤（沒經過 ESLint 檢查）則中止任務，等待下次commit，同時打印錯誤信息
• 成功提交

2.2 安裝包

npm i --save-dev husky lint-staged prettier

npm i --save-dev eslint babel-eslint eslint-plugin-react
複製代碼

2.3 模塊配置

2.3.1 .eslintrc

{
  "env": {
    "browser": true,
    "es6": true
  }
  "eslint": "recommended",
  "parserOptions": {
    "ecmaFeatures": {
      "jsx": true,
      "impliedStrict": true
    }
  },
  "plugin: react",
  "rules": {
    "quotes": [
      "error",
      "single"
    ]
  }
}
複製代碼

2.3.2 .prettier.js

module.exports = {
  // 一行最多 100 字符
  printWidth: 100,
  // 使用 4 個空格縮進
  tabWidth: 4,
  // 不使用縮進符，而使用空格
  useTabs: false,
  // 行尾須要有分號
  semi: false,
  // 使用單引號
  singleQuote: true,
  // 對象的 key 僅在必要時用引號
  quoteProps: 'as-needed',
  // jsx 不使用單引號，而使用雙引號
  jsxSingleQuote: false,
  // 末尾不須要逗號
  trailingComma: 'none',
  // 大括號內的首尾須要空格
  bracketSpacing: true,
  // jsx 標籤的反尖括號須要換行
  jsxBracketSameLine: false,
  // 箭頭函數，只有一個參數的時候，也須要括號
  arrowParens: 'always',
  // 每一個文件格式化的範圍是文件的所有內容
  rangeStart: 0,
  rangeEnd: Infinity,
  // 不須要寫文件開頭的 @prettier
  requirePragma: false,
  // 不須要自動在文件開頭插入 @prettier
  insertPragma: false,
  // 使用默認的折行標準
  proseWrap: 'preserve',
  // 換行符使用 lf
  endOfLine: 'lf'
}
複製代碼

2.3.3 package.json

{
  ...
  "husky": {
    "hooks": {
      "pre-commit": "lint-staged"
    }
  },
  "lint-staged": {
    "src/**/*.{js,jsx}": [
      "prettier --write",
      "eslint --fix",
      "git add ."
    ]
  },
  ...
}
複製代碼

2.3.4 運行結果

上面的配置只是一種組合方式的舉例，還能夠自由組合爲多種檢查方式，這裏就不一一列舉了。後面是對各個模塊的介紹，感興趣能夠繼續閱讀。

2、Prettier 的介紹和配置

2.1 Prettier 是什麼？

• Prettier 做爲強大的代碼格式化工具，可以徹底統一你和同事的代碼風格 (這真的很重要...)
• 同時結合 ESLint 規則和自身配置的規則，進行代碼自動格式化
• Prettier 只會作代碼風格的統一，並不會檢查代碼規範，關於代碼規範的檢查應該交給 ESLint

2.2 Prettier 的必要性

• 簡單的配置便可自動格式化並統一代碼風格
• 減小代碼 CR 的時間，再也不關心格式問題
• 避免肉眼檢查代碼格式，減小代碼提交次數
• 緩解強迫症的焦慮

2.3 如何配置？

2.3.1 在編輯器中安裝插件

• 目前開發使用的是 vscode 編輯器，在擴展中查找 Prettier - Code formatter 插件安裝後便可使用。不一樣編輯器的插件
• 安裝後打開須要格式化的文件，按照下面的方式能夠格式化整個文件或者格式化選定的代碼片斷

1. CMD + Shift + P -> Format Document
OR
1. Select the text you want to Prettify
2. CMD + Shift + P -> Format Code
複製代碼

[圖片上傳失敗...(image-4acd90-1575447043750)]

2.3.2 使用配置文件

1. 建立規則文件：在根目錄建立 .prettierrc 文件（支持 json 配置格式）或者 建立一個 .prettierrc.js 配置文件

2. 在 package.json 文件的 scripts 中添加對應的代碼

{
  ...
  "scripts": {
    "format": "prettier --write 'src/**/*.{js,jsx,css,less}'",
    ...
  },
  ...
}
複製代碼

3. 在控制檯執行 npm run format 便可自動格式化配置範圍內的全部文件

3、ESLint 的介紹和配置

3.1 ESLint 是什麼？

ESLint 是一個代碼檢查工具，它可以被開發者靈活的配置，使其可以知足制定好的代碼規範的要求，而且在編碼過程當中實時檢測輸入的代碼，對於不符合代碼規範的代碼警告或報錯。

3.2 ESLint 的必要性

• 編碼階段及時發現問題
• 保證代碼遵循最佳實踐
• 統一代碼編寫規範

3.3 如何使用

3.3.1 配置方法

• 配置註釋 : 使用JavaScript註釋將配置信息直接嵌入到文件中
• 配置文件 : 使用JavaScript，JSON或YAML文件指定配置信息

3.3.2 配置文件說明

1. 文件格式

• JavaScript : 使用.eslintrc.js並導出包含您的配置的對象。
• YAML : 使用.eslintrc.yaml或.eslintrc.yml定義配置結構。
• JSON : 用於.eslintrc.json定義配置結構。
• 使用.eslintrc，能夠是 JSON 或 YAML。
• package.json : eslintConfig在你的package.json文件中建立一個屬性並在那裏定義你的配置。

2. 環境 :

腳本設計運行的環境。每一個環境都帶有一組預約義的全局變量。

"env": {
  "browser": true,
  "node": true
}
複製代碼

3. 全局變量 :

腳本在執行期間訪問的其餘全局變量。

"globals": {
  "React": true,
  "MtaH5": true,
  "TencentGDT": true
}
複製代碼

4. 解析器選項 :

ESLint容許你指定你想要支持的JavaScript語言選項。默認狀況下，ESLint須要ECMAScript 5語法。您能夠覆蓋該設置，以使用解析器選項啓用對其餘ECMAScript版本以及JSX的支持。

"parserOptions": {
  "ecmaVersion": 6,
  "sourceType": "module", // 設置爲`"script"`（默認）或者`"module"`您的代碼位於ECMAScript模塊中。
  "ecmaFeatures": { // 一個對象，指示您想要使用哪些其餘語言功能
    "jsx": true, // 啓用JSX
    "impliedStrict": true // 啓用全局嚴格模式
  }
},
複製代碼

5. 插件

要在配置文件中配置插件，請使用plugins包含插件名稱列表的密鑰。該eslint-plugin-前綴能夠從插件名稱被省略。

"plugins": [
  "react",
  "eslint-plugin-react"
]
複製代碼

6. 擴展

擴展就是直接使用別人已經寫好的 lint 規則，rules 屬性中配置的規則都是基於這個規則之上配置的

"extends": [
  "standard"
  "eslint:recommended",
  "plugin:react/recommended"
],
複製代碼

推薦的擴展配置：

standardjs、airbnb、eslint-config-alloy

7. 規則 :

ESLint 附帶有大量的規則。你可使用註釋或配置文件修改你項目中要使用的規則。要改變一個規則設置，你必須將規則 ID 設置爲下列值之一

• "off" 或 0 : 關閉規則
• "warn" 或 1 : 開啓規則，使用警告級別的錯誤(不會致使程序退出)
• "error" 或 2 : 開啓規則，使用錯誤級別的錯誤(當被觸發的時候，程序會退出)

"rules": {
  "strict": 2,
}
複製代碼

3.3.3 如何檢測

將運行命令添加到 package.json 的 scripts 腳本中，設置對 src 目錄下的文件進行檢查

{
 ...
  "scripts": {
    "lint": "eslint ./src"
    "lintFix": "eslint ./src --fix"
  },
  ...
}
複製代碼

在控制檯運行以下命令：

// 代碼檢查
npm run lint
// 代碼檢查並修復
npm run lintFix
複製代碼

4、Git Hook 的介紹和配置

4.1 Git 鉤子

和其它版本控制系統同樣，Git 能在特定的重要動做發生時觸發自定義腳本。這裏介紹的是提交工做流鉤子

4.1.1 pre-commit

• 鉤子在鍵入提交信息前運行
• 用於檢查即將提交的快照
• 若是該鉤子以非零值退出，Git 將放棄這次提交
• 能夠用 git commit --no-verify 來繞過這個環節
• 能夠利用該鉤子，來檢查代碼風格是否一致

4.1.2 prepare-commit-msg

• 鉤子在啓動提交信息編輯器以前，默認信息被建立以後運行
• 容許你編輯提交者所看到的默認信息

4.1.3 如何配置

將配置添加到 package.json 中，執行命令添加到 scripts 腳本中：

{
  "scripts": {
    "lint": "eslint ./ --cache --ignore-pattern .gitignore",
    "precommit-msg": "echo 'Pre-commit checks...' && exit 0"
  },
  "pre-commit": [ "precommit-msg", "lint" ],
  "devDependencies": {
    "eslint": "^2.12.0",
    "pre-commit": "^1.1.3"
  }
}
複製代碼

4.2 Husky

在咱們的 package.json 中配置 husky，而且在對應的 git hook 階段來執行對應的命令。所以，不用繁瑣的去配置 git hook 階段的腳本文件了。

{
  "husky": {
    "hooks": {
      "pre-commit": "npm test",
      "pre-push": "npm test"
    }
  }
}
複製代碼

5、lint-staged

lint-staged的做用是每次提交只檢查本次提交所修改的文件，其中 staged 是 Git 裏面的概念，指待提交區，使用 git commit -a，或者先 git add 而後 git commit 的時候，你的修改代碼都會通過待提交區。

// package.json
{
  ...
  "scripts": {
    "precommit": "lint-staged", // git commit 執行這個命令，這個命令在調起 lint-staged
  },
  "lint-staged": {   // lint-staged 配置
    "src/**/*.{js,jsx}": [
      "prettier --write",
      "eslint --fix",
      "git add"
    ]
  },
  ...
}
複製代碼

6、總結

上面整理了一些項目實踐過程當中的方式和方法。方法的使用能夠提升項目的質量。有規範的代碼，必定程度能夠減小問題的發生。代碼的可讀性也有所提升。