摘要：整個代碼檢查和格式化流程應(yīng)該規(guī)范為如下步驟使用并且嘗試自動修復(fù)所有問題有提示，可以進(jìn)行修復(fù)，按照配置文件來進(jìn)行修復(fù)。參考文檔如何花分鐘解決產(chǎn)生的各種錯誤的記憶現(xiàn)場本文轉(zhuǎn)載自我的更新版梳理前端開發(fā)使用和來檢查和格式化代碼問題

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

在團(tuán)隊的項目開發(fā)過程中，代碼維護(hù)所占的時間比重往往大于新功能的開發(fā)。因此編寫符合團(tuán)隊編碼規(guī)范的代碼是至關(guān)重要的，這樣做不僅可以很大程度地避免基本語法錯誤，也保證了代碼的可讀性。

對于代碼版本管理系統(tǒng)（svn 和 git或者其他），代碼格式不一致帶來的問題是嚴(yán)重的，在代碼一致的情況下，因為格式不同，觸發(fā)了版本管理系統(tǒng)標(biāo)記為 diff，導(dǎo)致無法檢查代碼和校驗。

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

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

前端開發(fā)規(guī)范之命名規(guī)范、html規(guī)范、css規(guī)范、js規(guī)范 - 騰訊Web前端 IMWeb 團(tuán)隊社區(qū) | blog | 團(tuán)隊博客 騰訊的

編寫「可讀」代碼的實(shí)踐 | Taobao FED | 淘寶前端團(tuán)隊 淘寶的

GitHub - airbnb/javascript: JavaScript Style Guide airbnb 的

https://google.github.io/styl... google 的

https://github.com/pablohpsil... vue 的

參考別人的規(guī)范，制定適合自己團(tuán)隊使用的規(guī)范，太過復(fù)雜的規(guī)范執(zhí)行起來太麻煩，太過簡單的規(guī)范不如沒有規(guī)范。
沒有絕對的規(guī)范，只有適合的規(guī)范！

prettier 主要是為了格式化代碼，而在沒有 prettier 之前，是用 eslint —fix和 編輯器自帶代碼格式來進(jìn)行代碼格式化的。

缺點(diǎn)：每種編輯器會有不一樣的代碼格式，而且配置會比較麻煩。

prettier 已經(jīng)逐漸成為業(yè)界主流的代碼風(fēng)格格式化工具。

減輕 eslint 等工具的校驗規(guī)則，因為將代碼樣式校驗交給了 prettier，所以可以將代碼校驗的規(guī)則更準(zhǔn)確地應(yīng)用到代碼真正的規(guī)范上面。

eslint 是主要還是負(fù)責(zé)代碼規(guī)則校驗，prettier 只調(diào)整代碼風(fēng)格，代碼樣式，eslint 才是真正檢查代碼是否符合規(guī)范的工具。

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

舊有的解決辦法是：

使用 editorconfig 協(xié)助兼容開發(fā)工具的代碼格式化。

使用 eslint 檢查代碼

使用 eslint —fix來修復(fù)不符合 eslint 規(guī)則的代碼，它會自動根據(jù)設(shè)置的規(guī)則來改變代碼（它會包含代碼樣式的規(guī)則，但是 eslint 的樣式規(guī)則并不太準(zhǔn)確）。

手動修改剩下的有問題的地方，或者有些地方很難用規(guī)則來判斷的時候，就需要手動修改。

新的解決辦法是：

使用 editorconfig 協(xié)助兼容開發(fā)工具的代碼格式化。

使用 eslint 檢查代碼。

使用 prettier 格式化代碼。（可以理解為prettier是 eslint —fix 的加強(qiáng)版，用 prettier 來代替 eslint-fix）

手動修改剩下的有問題的地方，或者有些地方很難用規(guī)則來判斷的時候，就需要手動修改。

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

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

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

安裝 eslint 和 prettier （node 模塊）

安裝 eslint 和 prettier （ ide 編輯器的插件）

配置 eslint 和 prettier

配置 editorconfig （可選）

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

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

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

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

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

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

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

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

補(bǔ)充備注：

eslint-config-prettier ：

這個插件是如果eslint的規(guī)則和prettier的規(guī)則發(fā)生沖突的時候（主要是不必要的沖突），例如eslint 限制了必須單引號，prettier也限制了必須單引號，那么如果用 eslint 驅(qū)動 prettier 來做代碼檢查的話，就會提示2種報錯，雖然他們都指向同一種代碼錯誤，這個時候就會由這個插件來關(guān)閉掉額外的報錯。

但如果是eslint 只負(fù)責(zé)檢測代碼，prettier 只負(fù)責(zé)格式化代碼，那么他們之間互不干擾，也就是說，也是可以不安裝這個插件的，但是因為團(tuán)隊的人員的差異性（即使同一個開發(fā)工具也有版本差異，也有使用 prettier 和 eslint 的差異），可能有存在各種情況，所以最好還是安裝上這個插件。

官方有詳細(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 支持的（因為 babel 也是負(fù)責(zé)這種事情，轉(zhuǎn)譯不被支持的 js 語法），所以需要加上這個插件來保持兼容性。

官方有詳細(xì)介紹：https://github.com/babel/babe...

eslint-plugin-html：

為了讓eslint 可以檢查.vue文件的代碼。

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

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

WebStorm 2018.1 和以上的版本

WebStorm 2017.3 和更早的版本

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

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

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

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

這個版本有2種情況：

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

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

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

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

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

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

AlloyTeam ESLint 規(guī)則

擺脫令人抓狂的ESlint 語法檢測配置說明 - web攻城方略 - SegmentFault 思否

ESLint配置文件.eslintrc參數(shù)說明 · GitHub

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

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

// 因為使用了 eslint 和 prettier，所以要加上他們
extends: [ "eslint:recommended", "plugin:prettier/recommended"],

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

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

在 webstorm 下，在項目根目錄.eslintrc作為配置文件。

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

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

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

EditorConfig可以幫助開發(fā)者在不同的編輯器和IDE之間定義和維護(hù)一致的代碼風(fēng)格。

EditorConfig包含一個用于定義代碼格式的文件和一批編輯器插件，這些插件可以讓編輯器讀取配置文件并依此格式化代碼。

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

// 放在項目根目錄的.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

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

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

使用eslint 并且嘗試自動修復(fù)所有問題（eslint 有 autofix 提示，可以進(jìn)行—fix 修復(fù)，按照 .eslintrc 配置文件來進(jìn)行修復(fù)）。

使用 prettier 格式化所有代碼。

差異性修復(fù)代碼，因為有些格式或者其他問題導(dǎo)致出錯而被前兩部過濾之后還剩余的。（通常前面兩步基本解決了所有問題了）

把精美的格式化后的代碼提交到版本庫。

參考文檔：

如何花30分鐘解決 eslint 產(chǎn)生的各種錯誤 | Tomyail的記憶現(xiàn)場

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 來檢查和格式化代碼問題