為了提高整體開發效率，首先要將一些程式碼規範考慮在內，需要保持git倉庫的程式碼就像是一個人寫出來的。根據團隊習慣，考慮後使用組合工具：eslint + stylelint + prettier + husky。
- eslint: 對js做規則約束。強制校驗
- stylelint: 對css做規則約束
- prettier: 程式碼格式化。強制格式化
- husky：本地的git鉤子工具
另外敏捷開發過程中，程式碼複查是至關重要的一環，團隊需要使用工具輔助程式碼分析。經比較和實踐後，使用工具：jsinspect + jscpd
- jsinspect: 對js或jsx程式碼做重複檢測。強制校驗
- jscpd: 對程式碼重複率進行報告總結，輔助程式碼複查
eslint
1. 安裝
npm install --save-dev eslint eslint-plugin-vue babel-eslint
2. .eslintrc.js配置
module.exports = { root: true, // 指定程式碼的執行環境。不同的執行環境，全域性變數不一樣 env: { browser: true, node: true }, parserOptions: { // ESLint 預設使用Espree作為其解析器,安裝了 babel-eslint 用來代替預設的解析器 parser: 'babel-eslint' }, // 使得不需要自行定義大量的規則 extends: [ // consider switching to `plugin:vue/strongly-recommended` or `plugin:vue/recommended` for stricter rules. 'plugin:vue/essential' ], // 外掛 plugins: [ 'vue' ], // add your custom rules here rules: { // allow async-await 'generator-star-spacing': 'off', // allow debugger during development 'no-debugger': process.env.NODE_ENV === 'production' ? 'error' : 'off', 'indent': [2, 4, { 'SwitchCase': 1 }], ... } }
3. 提交前強制校驗
將約束命令放置在提交程式碼前檢查，這就要使用husky這個工具，該工具能在提交程式碼precommit時呼叫鉤子命令。
"scripts": { "lint": "eslint --ext .js,.vue --ignore-path .gitignore .", "precommit": "npm run lint" }
prettier
- 安裝
npm install --save-dev prettier
.prettierrc.js配置
module.exports = { printWidth: 100, // 設定prettier單行輸出（不折行）的（最大）長度 tabWidth: 4, // 設定工具每一個水平縮排的空格數 useTabs: false, // 使用tab（製表位）縮排而非空格 semi: false, // 在語句末尾新增分號 singleQuote: true, // 使用單引號而非雙引號 trailingComma: 'none', // 在任何可能的多行中輸入尾逗號 bracketSpacing: true, // 在物件字面量宣告所使用的的花括號後（{）和前（}）輸出空格 arrowParens: 'avoid', // 為單行箭頭函式的引數新增圓括號，引數個數為1時可以省略圓括號 parser: 'babylon', // 指定使用哪一種解析器 jsxBracketSameLine: true, // 在多行JSX元素最後一行的末尾新增 > 而使 > 單獨一行（不適用於自閉和元素） rangeStart: 0, // 只格式化某個檔案的一部分 rangeEnd: Infinity, // 只格式化某個檔案的一部分 filepath: 'none', // 指定檔案的輸入路徑，這將被用於解析器參照 requirePragma: false, // (v1.7.0+) Prettier可以嚴格按照按照檔案頂部的一些特殊的註釋格式化程式碼，這些註釋稱為“require pragma”(必須雜注) insertPragma: false, // (v1.8.0+) Prettier可以在檔案的頂部插入一個 @format的特殊註釋，以表明改檔案已經被Prettier格式化過了。 proseWrap: 'preserve' // (v1.8.2+) }
3. 提交前強制格式化
在提交git時需要對整個專案執行format格式化，使得程式碼強制統一。格式化之後再用eslint檢查語法錯誤，無誤後把格式化後的程式碼用git add .新增進入。如果有錯誤直接中斷提交。
"scripts": { "format": "prettier --write './**/*.{js,ts,vue,json}'", "lint": "eslint --ext .js,.vue --ignore-path .gitignore .", "precommit": "npm run format && npm run lint && git add ." }
stylelint
安裝
npm install --save-dev stylelint
使用
-
新增
.stylelintrc檔案 -
在檔案中設定規則，以下是筆者部門使用的css規範
{ "rules": { # 縮排 4 個空格 "indentation": 4, # 去掉小數點前面的 0 "number-leading-zero": "never", # 使用雙引號 "string-quotes": "double", # 每個屬性宣告末尾都要加分號 "declaration-block-trailing-semicolon": "always", # 屬性值 0 後面不加單位 "length-zero-no-unit": true, # 對空行的處理 # 第一條屬性宣告前不允許有空行 "declaration-empty-line-before": [ "never", { ignore: [ "after-declaration" ] } ], # 每個樣式規則前後都有空行，除了第一條規則與規則前有註釋 "rule-empty-line-before": [ "always", { except: [ "after-single-line-comment", "first-nested" ] } ], # 在結尾 "}" 之前不允許有空行 "block-closing-brace-empty-line-before": [ "never" ], # "@" 語句之前都有空行，但是忽略 "@" 語句在程式碼塊中間與同個非程式碼塊 "@" 語句之間的空行這兩種情況 "at-rule-empty-line-before": [ "always", { ignore: [ "inside-block", "blockless-after-same-name-blockless" ] } ], # 不允許超過一行的空行 "max-empty-lines": 1, # 每行句末不允許有多餘空格 "no-eol-whitespace": true, # 檔案末尾需要有一個空行 "no-missing-end-of-source-newline": true, # 大小寫處理 "unit-case": "lower", "color-hex-case": "upper", "value-keyword-case": "lower", "function-name-case": "lower", "property-case": "lower", "at-rule-name-case": "lower", "selector-pseudo-class-case": "lower", "selector-pseudo-element-case": "lower", "selector-type-case": "lower", "media-feature-name-case": "lower", # 對空格的處理 # "{" 前必須有空格 "block-opening-brace-space-before": "always", # 註釋 "/*" 後和 "*/" 前必須有空格 "comment-whitespace-inside": "always", # 屬性名 ":" 後必須有空格 "declaration-colon-space-after": "always", # 屬性名 ":" 前不能有空格 "declaration-colon-space-before": "never", # 宣告屬性末尾 ";" 前不能有空格 "declaration-block-semicolon-space-before": "never", # 屬性值中的 "," 後必須有空格 "function-comma-space-after": "always", # 選擇器例如 ">、+、~" 前後必須要有空格 "selector-combinator-space-before": "always", "selector-combinator-space-after": "always", # 分隔多個選擇器之間的 "," 後必須有空格 "selector-list-comma-space-after": "always", # 分隔多個選擇器之間的 "," 前不能有空格 "selector-list-comma-space-before": "never", # 子代選擇器之間沒有額外空格 "selector-descendant-combinator-no-non-space": true, # 多個屬性值之間的 "," 後必須有空格 "value-list-comma-space-after": "always", # 多個屬性值之間的 "," 前不能有空格 "value-list-comma-space-before": "never", # 媒體查詢中設定斷點寬度裡的 ":" 後必須有空格 "media-feature-colon-space-after": "always", # 媒體查詢中設定斷點寬度裡的 ":" 前不能有空格 "media-feature-colon-space-before": "never" } }
規則檢查
stylelint 'src/**/*.vue' --fix
stylelint命令有時候無法解析到，因為使用了全域性的sylelint，這時可以指定相對路徑
./node_modules/.bin/stylelint
提交git時檢查
需要用到外掛husky,該外掛會在git提交時，執行npm run precommit命令，所以需要在package.json中新增如下程式碼檢查：
"lint": "eslint --quiet --ext .js,.vue src", "style": "stylelint 'src/**/*.vue' --fix", "precommit": "npm run lint && npm run style",
新增例外
在stylelint使用過程中，有時候會對某條css新增例外，不要適用規則或部分規則
關閉全部規則：
/* stylelint-disable */ a {} /* stylelint-enable */
關閉部分規則：
/* stylelint-disable selector-no-id, declaration-no-important */ #id { color: pink !important; } /* stylelint-enable */
自動修復
有些專案是開發到一半時，新增了StyleLint進行css約束，這時候需要自動化對不滿足條件的Rule進行修復，如下是使用到的幾種：
1.--fix命令
該命令能fix大部分格式問題，具體哪些規則可以自動fix可以看這裡
2.Vetur外掛--格式化檔案
優點是可以統一格式化檔案，缺點是隻能單個檔案操作
3.vscode-stylefmt外掛
類似Vetur外掛，但該外掛可定製化更多，詳情請移至github
4.stylefmt
該工具也是官方推薦，可以批次修改，使用如下命令修改，詳情見 github
stylefmt --stdin-filename input.css
jsinspect
1. 安裝
npm install jsinspect --save-dev
2. 提交前強制校驗
"scripts": { "format": "prettier --write './**/*.{js,ts,vue,json}'", "lint": "eslint --ext .js,.vue --ignore-path .gitignore .", "inspect": "jsinspect -t 50 ./src", "precommit": "npm run format && npm run lint && npm run inspect && git add ." }
jscpd
1. 安裝
npm install jscpd --save-dev
2. 程式碼複查輔助命令
"scripts": { "codereview": "jscpd ./src" }