原文：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 復制代碼

總結

以上是生活随笔為你收集整理的Vue eslint 团队代码规范的全部內容，希望文章能夠幫你解決所遇到的問題。

如果覺得生活随笔網站內容還不錯，歡迎將生活随笔推薦給好友。