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

一山涡、問題痛點(diǎn)

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

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

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

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

• 前端開發(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ī)范旁舰，太過復(fù)雜的規(guī)范執(zhí)行起來太麻煩锋华，太過簡(jiǎn)單的規(guī)范不如沒有規(guī)范。

沒有絕對(duì)的規(guī)范箭窜，只有適合的規(guī)范毯焕！

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

• prettier 主要是為了格式化代碼，而在沒有 prettier 之前磺樱，是用 eslint —fix和 編輯器自帶代碼格式來進(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é)助兼容開發(fā)工具的代碼格式化。
• 使用 eslint 檢查代碼
• 使用 eslint —fix來修復(fù)不符合 eslint 規(guī)則的代碼训裆，它會(huì)自動(dòng)根據(jù)設(shè)置的規(guī)則來改變代碼（它會(huì)包含代碼樣式的規(guī)則眶根，但是 eslint 的樣式規(guī)則并不太準(zhǔn)確）蜀铲。
• 手動(dòng)修改剩下的有問題的地方，或者有些地方很難用規(guī)則來判斷的時(shí)候属百，就需要手動(dòng)修改记劝。

新的解決辦法是：

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

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

三兢哭、具體操作

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

大綱

1. 統(tǒng)一團(tuán)隊(duì)使用的開發(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í)候來做窍株，也可以使用 gulp 或者 npm 來做民轴，但這里借助編輯器會(huì)更方便。

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

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

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

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

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

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

// 這里需要全局安裝最主要的兩個(gè)node 模塊饭寺，主要是要讓 ide 編輯器能夠讀取全局環(huán)境來調(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 來做代碼檢查的話，就會(huì)提示2種報(bào)錯(cuò)员凝，雖然他們都指向同一種代碼錯(cuò)誤署驻，這個(gè)時(shí)候就會(huì)由這個(gè)插件來關(guān)閉掉額外的報(bào)錯(cuò)。
  • 但如果是eslint 只負(fù)責(zé)檢測(cè)代碼健霹，prettier 只負(fù)責(zé)格式化代碼旺上，那么他們之間互不干擾，也就是說糖埋，也是可以不安裝這個(gè)插件的宣吱，但是因?yàn)閳F(tuán)隊(duì)的人員的差異性（即使同一個(gè)開發(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

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

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

• babel-eslint ：
  • 有些代碼是沒被 eslint 支持的（因?yàn)?babel 也是負(fù)責(zé)這種事情祟敛，轉(zhuǎn)譯不被支持的 js 語(yǔ)法）疤坝，所以需要加上這個(gè)插件來保持兼容性。
  • 官方有詳細(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 模塊來驅(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)一說明寨蹋。

image.png

• ②是直接使用 prettier 作為額外工具來使用松蒜。

  
  
  image.png

image.png

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

image.png

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

1. eslint 的配置

eslint 的檢查規(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è)配置說明 - web攻城方略 - SegmentFault 思否
• ESLint配置文件.eslintrc參數(shù)說明 · GitHub

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

.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ī)則是通過配置文件.prettierrc 實(shí)現(xiàn)的，不過一般來說文虏，只需要配置少部分規(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可以幫助開發(fā)者在不同的編輯器和IDE之間定義和維護(hù)一致的代碼風(fēng)格膳算。
• EditorConfig包含一個(gè)用于定義代碼格式的文件和一批編輯器插件座硕，這些插件可以讓編輯器讀取配置文件并依此格式化代碼。

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

// 放在項(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í)行您机，如果沒有強(qiáng)制性壓力督促，那么是對(duì)抗不了人類的惰性的年局。

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

1. 使用eslint 并且嘗試自動(dòng)修復(fù)所有問題（eslint 有 autofix 提示，可以進(jìn)行—fix 修復(fù)咸产，按照 .eslintrc 配置文件來進(jìn)行修復(fù)）矢否。
2. 使用 prettier 格式化所有代碼。
3. 差異性修復(fù)代碼脑溢，因?yàn)橛行└袷交蛘咂渌麊栴}導(dǎo)致出錯(cuò)而被前兩部過濾之后還剩余的僵朗。（通常前面兩步基本解決了所有問題了）
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：更新版 - 梳理前端開發(fā)使用 eslint 和 prettier 來檢查和格式化代碼問題