Vue eslint 團隊程式碼規範

Carson_ofh發表於2019-04-20
VueEsLint

原文：nice.lovejade.cn/zh/article/…

Prettier 是一個有見識的程式碼格式化工具。它通過解析程式碼並使用自己的規則重新列印它，並考慮最大行長來強制執行一致的樣式，並在必要時包裝程式碼。如今，它已成為解決所有程式碼格式問題的優選方案；支援 JavaScript、 Flow、 TypeScript、 CSS、 SCSS、 Less、 JSX、 Vue、 GraphQL、 JSON、 Markdown 等語言，您可以結合 ESLint 和 Prettier，檢測程式碼中潛在問題的同時，還能統一團隊程式碼風格，從而促使寫出高質量程式碼，來提升工作效率。

beautify-vue-by-eslint-and-prettier

初始化 Vue 專案推介

在格式化程式碼方面， Prettier 確實和 ESLint 有重疊，但兩者側重點不同：ESLint 主要工作就是檢查程式碼質量並給出提示，它所能提供的格式化功能很有限；而 Prettier 在格式化程式碼方面具有更大優勢。而 Prettier 被設計為易於與 ESLint 整合，所以你可以輕鬆在專案中使兩者，而無需擔心衝突。本文就如何使用 ESLint ＆ Prettier，來格式並美化 Vue 程式碼做下探討；如果您使用其他型別框架，這份經驗絕大部份依舊適用。

正如在 開箱即用的 Vue Webpack 腳手架模版 所倡導的：vue-cli3在這個版本，它整合了更多豐富的功能，以及更多預設配置，可通過附帶的圖形使用者介面建立、開發和管理專案... 而且已釋出 RC 版本，核心功能已準備就緒，API 已趨於穩定，所以，建議採用 vue-cli3 來建立您的專案；您只需執行 vue create my-project 命令，接下來按照提示進行選擇即可；為了您的專案可持續性愉快進行，ESlint 是您必要的選項。如果，您這樣做了，您就可以在 package.json 中 eslintConfig 屬性下，找到 ESLint 配置；接下來，只需將 Prettier 與 ESLint 整合即可。

整合 ESLint & Prettier

對於二者整合，可以利用外掛來完成；eslint-plugin-prettier 公開了一個 “recommended” 配置，將 plugin:prettier/recommended 新增到 extends 的子屬性 plugin:vue/essential 之後，以預設設定在 ESLint 中啟用對 Prettier 的支援：

"eslintConfig": {
    "root": true,
    "extends": [
      "plugin:vue/essential",
      "plugin:prettier/recommended",
      "eslint:recommended"
    ]
  },
複製程式碼

當然，還需安裝依賴庫： eslint-plugin-prettier 和 eslint-config-prettier (下文會講到此依賴的作用)，更詳細資訊可以參見 Prettier 文件： Integrating with ESLint 。

yarn add --dev eslint-plugin-prettier eslint-config-prettier prettier-eslint-cli 這裡需要補充說明下的是 eslint-plugin-prettier 得工作原理，它會對比格式化前和用 Prettier 格式化後的程式碼，有不一致的地方就會報錯提示；我們可以藉助一些工具來修復，比如： eslint --fix，prettier-eslint-cli；可將其配置在 package scripts 中，以方便使用：

  "scripts": {
    "eslint-fix": "eslint src/**/**/*.vue --fix",
    "format-code": "prettier-eslint --write \"src/**/*.js\" \"src/**/*.vue\""
  }
}

複製程式碼

beautify-vue-by-eslint-and-prettier

修改規則配置

您需要知道的是，兩者混合使用時候，需要修改規則，以防止重複或衝突；eslint-config-prettier 即為解決此問題的存在，可以使用它關閉所有可能引起衝突的規則。

"rules": {
  "prettier/prettier": "error"
}
複製程式碼

事實上，當在專案中如此配置，可能會出現些“詭異”的報錯，即便採用如上修復，也無法解決；而且這也不是您預期的提示；

error: Delete ⏎ (prettier/prettier) at src/pages/xxx

此時，可以對規則進行甄別、梳理，擇選出適宜的規則；對於此，您可以參考 Configuring Prettier Options & eslint-plugin-prettier#options；依據個人編碼習慣，有采取如下配置 ( 可在 awesome-vue-cli3-example 檢視原始碼)：

"rules": {
  "no-console": 0,
  "prettier/prettier": [
    "error",
    {
      "singleQuote": true,
      "trailingComma": "none",
      "bracketSpacing": true,
      "jsxBracketSameLine": true,
      "parser": "flow"
    }
  ]
}
複製程式碼

新增編輯器配置

Atom 編輯器

可以安裝 prettier-atom；Atom 編輯器還會提示你安裝更多輔助外掛；

apm install prettier-atom 它有兩種模式可以使用：

儲存時自動格式化（Packages → Prettier → Toggle Format on Save） 使用鍵盤快捷方式手動呼叫（如果沒有選擇，整個檔案被格式化）：CTRL + ALT + F

VS Code 編輯器

安裝外掛：ESlint，Prettier，VS Code 外掛配置統一在 preference → setting → user setting 設定 (快捷鍵： Command + ,)，即可實現儲存時自動格式化：

{
  "prettier.eslintIntegration": true,
  "eslint.autoFixOnSave": true,
  "editor.formatOnSave": true
}
複製程式碼

除此外，你還在根據自己的喜好/習慣，為 Vscode 編輯器設定 Prettier 美化風格，詳細欄位可以參見 prettier-vscode。

"prettier.singleQuote": true,
"prettier.semi": false,
"prettier.tabWidth": 2,
"prettier.trailingComma": "none"
複製程式碼

Sublime Text 編輯器

安裝外掛：JsPrettier，它有依賴到 Prettier 等，所以需要全域性安裝：yarn global add prettier；在 “Preferences → Setting” 中新增如下設定，即可實現儲存時自動格式化；

{
  "auto_format_on_save": true
}
複製程式碼

當然您也可以自定義快捷鍵，以按需格式化程式碼；在 “Preferences → Key Binding” 的 User Keymap 中，參考如下示例，注入命令即可 (Windows OS 則是：ctrl + alt + f)：

{ "keys": ["command+alt+f"], "command": "js_prettier" } 同樣，你也根據自己的喜好/習慣，為 SublimeText 編輯器設定 Prettier 美化風格；更多設定、使用細節，可參見 SublimeJsPrettier#Usage；個人設定風格如下(操作檔案位置：Preferences → Package Settings → JsPrettier → Settings - User)：

{
  "debug": false,
  "prettier_cli_path": "",
  "node_path": "",
  "auto_format_on_save": false,
  "auto_format_on_save_excludes": [],
  "auto_format_on_save_requires_prettier_config": false,
  "allow_inline_formatting": false,
  "custom_file_extensions": [],
  "max_file_size_limit": -1,
  "additional_cli_args": {},
  "prettier_options": {
    "printWidth": 80,
    "singleQuote": true,
    "trailingComma": "none",
    "bracketSpacing": true,
    "jsxBracketSameLine": false,
    "parser": "babylon",
    "semi": false,
    "requirePragma": false,
    "proseWrap": "preserve",
    "arrowParens": "avoid"
  }
}
複製程式碼

Pre-commit Hook 約束程式碼提交

以上探討了如何運用 ESLint ＆ Prettier 寫出優質程式碼，這都是針對個人的推薦性行為；為保證團隊統一程式碼風格，則必須採取些手段以強制約束；假如您的團隊使用 Git 作為程式碼管理工具，在 commit 行為及之前進行甄別約束，是很棒的選擇；於此，可藉助 husky & lint-staged 來實現之。

install husky & lint-staged

yarn add lint-staged husky --dev

package.json config

"lint-staged": {
  "**/**.{js,json,pcss,md,vue}": [
    "prettier --write",
    "git add"
  ]
},
"husky": {
  "hooks": {
    "pre-commit": "yarn run precommit-msg && lint-staged",
    "pre-push": "yarn test"
  }
},
複製程式碼

值得一提的是，在實際專案中， husky 很可能由於各種原因，導致不能很好的工作；這多半是由於 .git/hooks/pre-commit 與期待目標不匹配所致，您可以手動修改，也可以採取如下辦法 (備註：如果您的 husky 版本在 0.14 及以上)：

rm -rf .git/hooks/*
node node_modules/husky/lib/installer/bin install
複製程式碼

相關文章