更新版，之前的版本可以看這里：梳理前端開(kāi)發(fā)使用eslint和prettier來(lái)檢查和格式化代碼問(wèn)題

一、問(wèn)題痛點(diǎn)

• 在團(tuán)隊(duì)的項(xiàng)目開(kāi)發(fā)過(guò)程中，代碼維護(hù)所占的時(shí)間比重往往大于新功能的開(kāi)發(fā)。因此編寫符合團(tuán)隊(duì)編碼規(guī)范的代碼是至關(guān)重要的，這樣做不僅可以很大程度地避免基本語(yǔ)法錯(cuò)誤，也保證了代碼的可讀性。
• 對(duì)于代碼版本管理系統(tǒng)（svn 和 git或者其他），代碼格式不一致帶來(lái)的問(wèn)題是嚴(yán)重的，在代碼一致的情況下，因?yàn)楦袷讲煌?，觸發(fā)了版本管理系統(tǒng)標(biāo)記為 diff，導(dǎo)致無(wú)法檢查代碼和校驗(yàn)。

但是需要知道的是，開(kāi)發(fā)規(guī)范不僅僅包含代碼格式規(guī)范，還有很多內(nèi)容，這里只是單獨(dú)說(shuō)明代碼格式化規(guī)范而已。

（一）關(guān)于代碼格式規(guī)范問(wèn)題

代碼格式規(guī)范的標(biāo)準(zhǔn)可以參考各大主流公司和社區(qū)，以下都是一些常用主流規(guī)范：

• 前端開(kāi)發(fā)規(guī)范之命名規(guī)范、html規(guī)范、css規(guī)范、js規(guī)范 - 騰訊Web前端 IMWeb 團(tuán)隊(duì)社區(qū) | blog | 團(tuán)隊(duì)博客 騰訊的
• 編寫「可讀」代碼的實(shí)踐 | Taobao FED | 淘寶前端團(tuán)隊(duì) 淘寶的
• GitHub - airbnb/javascript: JavaScript Style Guide airbnb 的
• https://google.github.io/styleguide/jsguide.html google 的
• https://github.com/pablohpsilva/vuejs-component-style-guide/blob/master/README-CN.md vue 的

參考別人的規(guī)范，制定適合自己團(tuán)隊(duì)使用的規(guī)范，太過(guò)復(fù)雜的規(guī)范執(zhí)行起來(lái)太麻煩，太過(guò)簡(jiǎn)單的規(guī)范不如沒(méi)有規(guī)范。

沒(méi)有絕對(duì)的規(guī)范，只有適合的規(guī)范！

（二）關(guān)于為什么要用 eslint 和 prettier問(wèn)題

• prettier 主要是為了格式化代碼，而在沒(méi)有 prettier 之前，是用 eslint —fix和 編輯器自帶代碼格式來(lái)進(jìn)行代碼格式化的。
  • 缺點(diǎn)：每種編輯器會(huì)有不一樣的代碼格式，而且配置會(huì)比較麻煩。
  • prettier 已經(jīng)逐漸成為業(yè)界主流的代碼風(fēng)格格式化工具。
  • 減輕 eslint 等工具的校驗(yàn)規(guī)則，因?yàn)閷⒋a樣式校驗(yàn)交給了 prettier，所以可以將代碼校驗(yàn)的規(guī)則更準(zhǔn)確地應(yīng)用到代碼真正的規(guī)范上面。
• eslint 是主要還是負(fù)責(zé)代碼規(guī)則校驗(yàn)，prettier 只調(diào)整代碼風(fēng)格，代碼樣式，eslint 才是真正檢查代碼是否符合規(guī)范的工具。

所以兩者是需要配合使用的。

二、解決辦法

舊有的解決辦法是：

• 使用 editorconfig 協(xié)助兼容開(kāi)發(fā)工具的代碼格式化。
• 使用 eslint 檢查代碼
• 使用 eslint —fix來(lái)修復(fù)不符合 eslint 規(guī)則的代碼，它會(huì)自動(dòng)根據(jù)設(shè)置的規(guī)則來(lái)改變代碼（它會(huì)包含代碼樣式的規(guī)則，但是 eslint 的樣式規(guī)則并不太準(zhǔn)確）。
• 手動(dòng)修改剩下的有問(wèn)題的地方，或者有些地方很難用規(guī)則來(lái)判斷的時(shí)候，就需要手動(dòng)修改。

新的解決辦法是：

• 使用 editorconfig 協(xié)助兼容開(kāi)發(fā)工具的代碼格式化。
• 使用 eslint 檢查代碼。
• 使用 prettier 格式化代碼。（可以理解為prettier是 eslint —fix 的加強(qiáng)版，用 prettier 來(lái)代替 eslint-fix）
• 手動(dòng)修改剩下的有問(wèn)題的地方，或者有些地方很難用規(guī)則來(lái)判斷的時(shí)候，就需要手動(dòng)修改。

咋一看，其實(shí)沒(méi)啥區(qū)別，甚至可能發(fā)現(xiàn)新解決辦法會(huì)更加麻煩了一些，其實(shí)步驟上確實(shí)如此，但是真正操作上，會(huì)減輕 eslint 的規(guī)則編寫，也會(huì)減少很多手動(dòng)修改樣式的地方，格式化后的代碼會(huì)更加美觀，耐看。

三、具體操作

鑒于網(wǎng)上文章說(shuō)明的比較混亂，這里主要是為了梳理整個(gè)流程和思路。

大綱

1. 統(tǒng)一團(tuán)隊(duì)使用的開(kāi)發(fā)工具（webstorm，ide 編輯器）
2. 安裝 eslint 和 prettier （node 模塊）
3. 安裝 eslint 和 prettier （ ide 編輯器的插件）
4. 配置 eslint 和 prettier
5. 配置 editorconfig （可選）
6. 嚴(yán)格督查，按照流程檢查和格式化代碼，按照規(guī)范和要求進(jìn)行代碼提交。

這里多了一步是安裝 eslint 和 prettier （ ide 編輯器的插件），主要就是利用 ide 編輯器做代碼格式錯(cuò)誤提醒和代碼格式處理，這個(gè)操作也可以使用 webpack 打包的時(shí)候來(lái)做，也可以使用 gulp 或者 npm 來(lái)做，但這里借助編輯器會(huì)更方便。

（一）統(tǒng)一團(tuán)隊(duì)使用的開(kāi)發(fā)工具（webstorm，ide 編輯器）

開(kāi)發(fā)工具可以做很多東西，是開(kāi)發(fā)代碼的利器，但是不同的開(kāi)發(fā)工具會(huì)有不同的代碼提示，代碼格式化，代碼檢查的機(jī)制，這樣的差異化會(huì)對(duì)團(tuán)隊(duì)代碼規(guī)范（開(kāi)發(fā)和檢查）帶來(lái)很多問(wèn)題，所以需要統(tǒng)一。

當(dāng)然，如果個(gè)人不愿意更換自己用慣的開(kāi)發(fā)工具的話，也沒(méi)關(guān)系，只要能夠做到跟團(tuán)隊(duì)的開(kāi)發(fā)規(guī)范保持一致也是可以的，但個(gè)人覺(jué)得，這樣難度比較大，畢竟開(kāi)發(fā)工具和團(tuán)隊(duì)的開(kāi)發(fā)規(guī)范不那么容易融合。

這里只說(shuō)明前端業(yè)界目前最常用的開(kāi)發(fā)工具來(lái)做例子 webstorm 。

（二）安裝 eslint 和 prettier （node 模塊）

安裝這個(gè)模塊的意義在于，實(shí)際上，整個(gè)流程最核心就是這個(gè)地方，開(kāi)發(fā)工具雖然支持了這2個(gè)模塊，但是最終運(yùn)行是必須要以這2個(gè)模塊安裝好才能使用的。

// 這里需要全局安裝最主要的兩個(gè)node 模塊，主要是要讓 ide 編輯器能夠讀取全局環(huán)境來(lái)調(diào)用這2個(gè)模塊
npm install eslint prettier -g --save-dev

// 這個(gè)是為了 eslint 跟 prettier 可以聯(lián)合使用
npm install --save-dev eslint-plugin-prettier
// 這個(gè)是為了讓 eslint 跟 prettier 兼容，關(guān)閉 prettier 跟 eslint 沖突的rules
npm install --save-dev eslint-config-prettier

補(bǔ)充備注：

• eslint-config-prettier ：
  • 這個(gè)插件是如果eslint的規(guī)則和prettier的規(guī)則發(fā)生沖突的時(shí)候（主要是不必要的沖突），例如eslint 限制了必須單引號(hào)，prettier也限制了必須單引號(hào)，那么如果用 eslint 驅(qū)動(dòng) prettier 來(lái)做代碼檢查的話，就會(huì)提示2種報(bào)錯(cuò)，雖然他們都指向同一種代碼錯(cuò)誤，這個(gè)時(shí)候就會(huì)由這個(gè)插件來(lái)關(guān)閉掉額外的報(bào)錯(cuò)。
  • 但如果是eslint 只負(fù)責(zé)檢測(cè)代碼，prettier 只負(fù)責(zé)格式化代碼，那么他們之間互不干擾，也就是說(shuō)，也是可以不安裝這個(gè)插件的，但是因?yàn)閳F(tuán)隊(duì)的人員的差異性（即使同一個(gè)開(kāi)發(fā)工具也有版本差異，也有使用 prettier 和 eslint 的差異），可能有存在各種情況，所以最好還是安裝上這個(gè)插件。
  • 官方有詳細(xì)介紹：GitHub - prettier/eslint-config-prettier: Turns off all rules that are unnecessary or might conflict with Prettier.

模塊參考信息：Integrating with ESLint · Prettier

以下順便說(shuō)一下其他我們常用到的eslint 模塊：

nam -g install babel-eslint eslint-plugin-html --save-dev

• babel-eslint ：
  • 有些代碼是沒(méi)被 eslint 支持的（因?yàn)?babel 也是負(fù)責(zé)這種事情，轉(zhuǎn)譯不被支持的 js 語(yǔ)法），所以需要加上這個(gè)插件來(lái)保持兼容性。
  • 官方有詳細(xì)介紹：https://github.com/babel/babel-eslint
• eslint-plugin-html：
  • 為了讓eslint 可以檢查.vue文件的代碼。

（三）安裝webstorm 的eslint 插件和 prettier 插件并啟用插件

更多配置方式參考：WebStorm Setup · Prettier

根據(jù)官方介紹webstorm 分別有2種處理：

1. WebStorm 2018.1 和以上的版本
2. WebStorm 2017.3 和更早的版本

如果用IntelliJ IDEA, PhpStorm, PyCharm, and other JetBrains IDEs, 則需要安裝prettier插件和 eslint 插件，而webstorm 的話默認(rèn)會(huì)幫你安裝上，這也是推薦 webstorm 的原因。

1. WebStorm 2018.1 和以上的版本

官方默認(rèn)已經(jīng)集成了 prettier 支持，只需要配置好一個(gè)全局的 prettier 模塊調(diào)用方式就可以使用了（必須配置）。

image.png

快捷鍵是：Alt-Shift-Cmd-P on macOS or Alt-Shift-Ctrl-P on Windows and Linux

氪金王的好處，升級(jí)快，支持快，免破解，省心省力不省錢！

2. WebStorm 2017.3 和更早的版本

這個(gè)版本有2種情況：

• ①是eslint 模式，使用 eslint-plugin-prettier 插件和啟用eslint 插件配合，這里相當(dāng)于使用 eslint 模塊來(lái)驅(qū)動(dòng) prettier 模塊，然后中間驅(qū)動(dòng)則是靠eslint-plugin-prettier。

首先啟用 eslint，并且配置 eslint 模塊位置，默認(rèn)會(huì)自動(dòng)讀取當(dāng)前目錄的 eslint.rc 配置文件，然后需要進(jìn)行 npm 安裝eslint-plugin-prettier這個(gè)插件，后面再統(tǒng)一說(shuō)明。

image.png

• ②是直接使用 prettier 作為額外工具來(lái)使用。

  
  
  image.png

image.png

上面兩種方式的默認(rèn)快捷鍵都是Cmd/Ctrl-Shift-A（在 mac 下是comm+shift+A），覺(jué)得不舒服，按需修改快捷鍵即可。

image.png

（三） 配置 eslint 插件和 prettier插件

1. eslint 的配置

eslint 的檢查規(guī)則是通過(guò)配置文件.eslintrc 實(shí)現(xiàn)的，但是各家有各家的 eslint 配置文件GitHub - AlloyTeam/eslint-config-alloy: AlloyTeam ESLint 規(guī)則：

image.png

詳細(xì)參考網(wǎng)址：

• AlloyTeam ESLint 規(guī)則
• 擺脫令人抓狂的ESlint 語(yǔ)法檢測(cè)配置說(shuō)明 - web攻城方略 - SegmentFault 思否
• ESLint配置文件.eslintrc參數(shù)說(shuō)明 · GitHub

不過(guò)這里不糾結(jié)用哪一種 eslint 的配置，具體看項(xiàng)目和團(tuán)隊(duì)，這里只是說(shuō)明需要做 eslint 的配置，并且需要做一些說(shuō)明：

.eslintrc 配置文件需要添加修改地方，主要是為了 prettier插件和eslint-config-prettier 插件和eslint-plugin-prettier插件使用的：

// 因?yàn)槭褂昧?eslint 和 prettier，所以要加上他們
extends: [ 'eslint:recommended', 'plugin:prettier/recommended'],

// required to lint *.vue files 使用 html參數(shù)
plugins: ['html', 'prettier'],

// rules 規(guī)則就按照各家寫法。

在 webstorm 下，在項(xiàng)目根目錄.eslintrc作為配置文件。

2. prettier的配置

prettier 的檢查規(guī)則是通過(guò)配置文件.prettierrc 實(shí)現(xiàn)的，不過(guò)一般來(lái)說(shuō)，只需要配置少部分規(guī)則即可：.

{
  "printWidth": 100,
  "singleQuote": true, 
  "semi": false 
}

有可能會(huì)出現(xiàn)的情況是，prettier 格式化后，全部加了分號(hào)，但是 eslint 又要去掉分號(hào)，那么就會(huì)重復(fù)了，這里可以簡(jiǎn)單地設(shè)置 prettier 的分號(hào)設(shè)置跟 eslint 保持一致，其他如此類推，但只適用在幾個(gè)比較特別的地方，可以參考官方文檔。官方有詳細(xì)的介紹：Configuration File · Prettier

（四） 配置 editorconfig

• EditorConfig可以幫助開(kāi)發(fā)者在不同的編輯器和IDE之間定義和維護(hù)一致的代碼風(fēng)格。
• EditorConfig包含一個(gè)用于定義代碼格式的文件和一批編輯器插件，這些插件可以讓編輯器讀取配置文件并依此格式化代碼。

對(duì)此我個(gè)人的理解就是，editorconfig可以協(xié)助開(kāi)發(fā)工具在自動(dòng)格式化或者自動(dòng)排版或者錄入排版的時(shí)候進(jìn)行代碼格式化，但是只能支持比較簡(jiǎn)單的規(guī)則，不過(guò)也減輕了一部分代碼格式化的壓力和成本，所以有比沒(méi)有好，而且最好要有。

// 放在項(xiàng)目根目錄的.editorconfig文件
root = true

[*]
charset = utf-8
indent_style = space
indent_size = 2
end_of_line = lf
insert_final_newline = true
trim_trailing_whitespace = true

詳細(xì)參考：

• 【譯】EditorConfig介紹 | AlloyTeam
• EditorConfig

（五） 嚴(yán)格督查，按照流程檢查和格式化代碼，按照規(guī)范和要求進(jìn)行代碼提交。

需要明確一點(diǎn)，代碼格式化需要由上而下執(zhí)行，如果沒(méi)有強(qiáng)制性壓力督促，那么是對(duì)抗不了人類的惰性的。

整個(gè)代碼檢查和格式化流程應(yīng)該規(guī)范為如下步驟：

1. 使用eslint 并且嘗試自動(dòng)修復(fù)所有問(wèn)題（eslint 有 autofix 提示，可以進(jìn)行—fix 修復(fù)，按照 .eslintrc 配置文件來(lái)進(jìn)行修復(fù)）。
2. 使用 prettier 格式化所有代碼。
3. 差異性修復(fù)代碼，因?yàn)橛行└袷交蛘咂渌麊?wèn)題導(dǎo)致出錯(cuò)而被前兩部過(guò)濾之后還剩余的。（通常前面兩步基本解決了所有問(wèn)題了）
4. 把精美的格式化后的代碼提交到版本庫(kù)。

參考文檔：

• 如何花30分鐘解決 eslint 產(chǎn)生的各種錯(cuò)誤 | Tomyail的記憶現(xiàn)場(chǎng)
• Introducing Prettier with Eslint – Michael Hsu – Medium
• Efficient Code Analyzing and Formatting (for Vue.js) with ESLint and Prettier

本文轉(zhuǎn)載自我的 blog：更新版 - 梳理前端開(kāi)發(fā)使用 eslint 和 prettier 來(lái)檢查和格式化代碼問(wèn)題