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

Prettier 是一個(gè)有見識(shí)的代碼格式化工具。它通過解析代碼并使用自己的規(guī)則重新打印它，并考慮最大行長(zhǎng)來強(qiáng)制執(zhí)行一致的樣式，并在必要時(shí)包裝代碼。如今，它已成為解決所有代碼格式問題的優(yōu)選方案；支持 JavaScript、 Flow、 TypeScript、 CSS、 SCSS、 Less、 JSX、 Vue、 GraphQL、 JSON、 Markdown 等語(yǔ)言，您可以結(jié)合 ESLint 和 Prettier，檢測(cè)代碼中潛在問題的同時(shí)，還能統(tǒng)一團(tuán)隊(duì)代碼風(fēng)格，從而促使寫出高質(zhì)量代碼，來提升工作效率。

beautify-vue-by-eslint-and-prettier

初始化 Vue 項(xiàng)目推介

在格式化代碼方面， Prettier 確實(shí)和 ESLint 有重疊，但兩者側(cè)重點(diǎn)不同：ESLint 主要工作就是檢查代碼質(zhì)量并給出提示，它所能提供的格式化功能很有限；而 Prettier 在格式化代碼方面具有更大優(yōu)勢(shì)。而 Prettier 被設(shè)計(jì)為易于與 ESLint 集成，所以你可以輕松在項(xiàng)目中使兩者，而無需擔(dān)心沖突。本文就如何使用 ESLint ＆ Prettier，來格式并美化 Vue 代碼做下探討；如果您使用其他類型框架，這份經(jīng)驗(yàn)絕大部份依舊適用。

正如在 開箱即用的 Vue Webpack 腳手架模版 所倡導(dǎo)的：vue-cli3在這個(gè)版本，它集成了更多豐富的功能，以及更多默認(rèn)配置，可通過附帶的圖形用戶界面創(chuàng)建、開發(fā)和管理項(xiàng)目... 而且已發(fā)布 RC 版本，核心功能已準(zhǔn)備就緒，API 已趨于穩(wěn)定，所以，建議采用 vue-cli3 來創(chuàng)建您的項(xiàng)目；您只需運(yùn)行 vue create my-project 命令，接下來按照提示進(jìn)行選擇即可；為了您的項(xiàng)目可持續(xù)性愉快進(jìn)行，ESlint 是您必要的選項(xiàng)。如果，您這樣做了，您就可以在 package.json 中 eslintConfig 屬性下，找到 ESLint 配置；接下來，只需將 Prettier 與 ESLint 集成即可。

集成 ESLint & Prettier

對(duì)于二者集成，可以利用插件來完成；eslint-plugin-prettier 公開了一個(gè) “recommended” 配置，將 plugin:prettier/recommended 添加到 extends 的子屬性 plugin:vue/essential 之后，以默認(rèn)設(shè)置在 ESLint 中啟用對(duì) Prettier 的支持：

"eslintConfig": {"root": true,"extends": ["plugin:vue/essential","plugin:prettier/recommended","eslint:recommended"]}, 復(fù)制代碼

當(dāng)然，還需安裝依賴庫(kù)： eslint-plugin-prettier 和 eslint-config-prettier (下文會(huì)講到此依賴的作用)，更詳細(xì)信息可以參見 Prettier 文檔： Integrating with ESLint 。

yarn add --dev eslint-plugin-prettier eslint-config-prettier prettier-eslint-cli 這里需要補(bǔ)充說明下的是 eslint-plugin-prettier 得工作原理，它會(huì)對(duì)比格式化前和用 Prettier 格式化后的代碼，有不一致的地方就會(huì)報(bào)錯(cuò)提示；我們可以借助一些工具來修復(fù)，比如： eslint --fix，prettier-eslint-cli；可將其配置在 package scripts 中，以方便使用：

"scripts": {"eslint-fix": "eslint src/**/**/*.vue --fix","format-code": "prettier-eslint --write \"src/**/*.js\" \"src/**/*.vue\""} }復(fù)制代碼

beautify-vue-by-eslint-and-prettier

修改規(guī)則配置

您需要知道的是，兩者混合使用時(shí)候，需要修改規(guī)則，以防止重復(fù)或沖突；eslint-config-prettier 即為解決此問題的存在，可以使用它關(guān)閉所有可能引起沖突的規(guī)則。

"rules": {"prettier/prettier": "error" } 復(fù)制代碼

事實(shí)上，當(dāng)在項(xiàng)目中如此配置，可能會(huì)出現(xiàn)些“詭異”的報(bào)錯(cuò)，即便采用如上修復(fù)，也無法解決；而且這也不是您預(yù)期的提示；

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

此時(shí)，可以對(duì)規(guī)則進(jìn)行甄別、梳理，擇選出適宜的規(guī)則；對(duì)于此，您可以參考 Configuring Prettier Options & eslint-plugin-prettier#options；依據(jù)個(gè)人編碼習(xí)慣，有采取如下配置 ( 可在 awesome-vue-cli3-example 查看源碼)：

"rules": {"no-console": 0,"prettier/prettier": ["error",{"singleQuote": true,"trailingComma": "none","bracketSpacing": true,"jsxBracketSameLine": true,"parser": "flow"}] } 復(fù)制代碼

添加編輯器配置

Atom 編輯器

可以安裝 prettier-atom；Atom 編輯器還會(huì)提示你安裝更多輔助插件；

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

保存時(shí)自動(dòng)格式化（Packages → Prettier → Toggle Format on Save） 使用鍵盤快捷方式手動(dòng)調(diào)用（如果沒有選擇，整個(gè)文件被格式化）：CTRL + ALT + F

VS Code 編輯器

安裝插件：ESlint，Prettier，VS Code 插件配置統(tǒng)一在 preference → setting → user setting 設(shè)置 (快捷鍵： Command + ,)，即可實(shí)現(xiàn)保存時(shí)自動(dòng)格式化：

{"prettier.eslintIntegration": true,"eslint.autoFixOnSave": true,"editor.formatOnSave": true } 復(fù)制代碼

除此外，你還在根據(jù)自己的喜好/習(xí)慣，為 Vscode 編輯器設(shè)定 Prettier 美化風(fēng)格，詳細(xì)字段可以參見 prettier-vscode。

"prettier.singleQuote": true, "prettier.semi": false, "prettier.tabWidth": 2, "prettier.trailingComma": "none" 復(fù)制代碼

Sublime Text 編輯器

安裝插件：JsPrettier，它有依賴到 Prettier 等，所以需要全局安裝：yarn global add prettier；在 “Preferences → Setting” 中添加如下設(shè)置，即可實(shí)現(xiàn)保存時(shí)自動(dòng)格式化；

{"auto_format_on_save": true } 復(fù)制代碼

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

{ "keys": ["command+alt+f"], "command": "js_prettier" } 同樣，你也根據(jù)自己的喜好/習(xí)慣，為 SublimeText 編輯器設(shè)定 Prettier 美化風(fēng)格；更多設(shè)置、使用細(xì)節(jié)，可參見 SublimeJsPrettier#Usage；個(gè)人設(shè)定風(fēng)格如下(操作文件位置：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"} } 復(fù)制代碼

Pre-commit Hook 約束代碼提交

以上探討了如何運(yùn)用 ESLint ＆ Prettier 寫出優(yōu)質(zhì)代碼，這都是針對(duì)個(gè)人的推薦性行為；為保證團(tuán)隊(duì)統(tǒng)一代碼風(fēng)格，則必須采取些手段以強(qiáng)制約束；假如您的團(tuán)隊(duì)使用 Git 作為代碼管理工具，在 commit 行為及之前進(jìn)行甄別約束，是很棒的選擇；于此，可借助 husky & lint-staged 來實(shí)現(xiàn)之。

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"} }, 復(fù)制代碼

值得一提的是，在實(shí)際項(xiàng)目中， husky 很可能由于各種原因，導(dǎo)致不能很好的工作；這多半是由于 .git/hooks/pre-commit 與期待目標(biāo)不匹配所致，您可以手動(dòng)修改，也可以采取如下辦法 (備注：如果您的 husky 版本在 0.14 及以上)：

rm -rf .git/hooks/* node node_modules/husky/lib/installer/bin install 復(fù)制代碼

總結(jié)

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

如果覺得生活随笔網(wǎng)站內(nèi)容還不錯(cuò)，歡迎將生活随笔推薦給好友。