摘要：梳理前端開發(fā)使用檢查和格式化代碼問(wèn)題痛點(diǎn)在團(tuán)隊(duì)的項(xiàng)目開發(fā)過(guò)程中，代碼維護(hù)所占的時(shí)間比重往往大于新功能的開發(fā)。使用格式化所有代碼。參考文檔如何花分鐘解決產(chǎn)生的各種錯(cuò)誤的記憶現(xiàn)場(chǎng)原文轉(zhuǎn)載梳理前端開發(fā)使用檢查和格式化代碼線上猛如虎，線下慫如鼠

在團(tuán)隊(duì)的項(xiàng)目開發(fā)過(guò)程中，代碼維護(hù)所占的時(shí)間比重往往大于新功能的開發(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)。

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

使用 eslint 檢查代碼

使用 prettier 格式化代碼（prettier是 eslint —fix 的加強(qiáng)版）

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

鑒于網(wǎng)上文章說(shuō)明的比較混亂，這里主要是為了梳理整個(gè)流程和思路，然后對(duì)比網(wǎng)上的文章重新理解和學(xué)習(xí) eslint 和 prettier 和代碼檢查和代碼格式化。

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

webstorm（或者JetBrains: Developer Tools for Professionals and Teams系列開發(fā)軟件）

vscode （Visual Studio Code - Code Editing. Redefined）

安裝不同ide 編輯器的對(duì)應(yīng)的 eslint 插件和 prettier 插件

安裝 eslint 和 prettier （node 模塊）

配置 eslint 和 prettier

配置團(tuán)隊(duì)使用的 rules

配置 editorconfig

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

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

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

這里只說(shuō)明前端業(yè)界目前最常用的兩種開發(fā)工具來(lái)做例子，分別是 webstorm 和 vscode。

~webstorm 或者 vscode 分別安裝好之后需要安裝eslint 插件和 prettier 插件。~

更多配置方式參考：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)會(huì)幫你安裝上。

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

[image:92501044-1ADD-41CB-BD0C-A08BF017856E-2833-0000064BE8D16DB1/5CC2BD82-B4E3-459A-A96A-8652870832E8.png]

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

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

這個(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:45E71C29-2933-4178-8B54-1624D7BDE6ED-2833-0000080224C7A18F/F82912F6-0F7C-4D89-9A2C-EA1C8CF41469.png]

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

[image:EB38EB6E-FB83-4C2B-B3FE-005FB45D1B81-2833-00000778833EC282/223C3C42-AE59-4501-9119-E44ACB0C38EE.png]

[image:BE8CDA11-63C4-4661-93BB-146299063BD9-2833-0000077989F51D06/2DE327F9-2274-448E-816A-D53057B4FB6F.png]

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

[image:BD12F495-B168-485D-9E1B-CA30E07D4917-2833-000007DCC3947E10/36E1EB4E-769A-456D-B7F4-C1C61FD76086.png]

打開 VSCode 擴(kuò)展面板并搜索 ESLint 插件 和 prettier 插件，然后點(diǎn)擊安裝。（prettier 插件沒截圖，但類似）
[image:478E5E36-1056-4C77-8D98-D009559070CB-2833-000008A49B4C4EFC/D8C1E6E5-619D-48BA-93C8-EBA1091B9FBD.png]

安裝完畢之后點(diǎn)擊 ~重新加載~ 以激活插件。

vscode 的快捷鍵：

CMD + Shift + P -> Format Document

或者

Select the text you want to Prettify

CMD + Shift + P -> Format Selection

官網(wǎng)有詳細(xì)介紹：GitHub - prettier/prettier-vscode: Visual Studio Code extension for Prettier

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

這是 node 的模塊，用 nam 或者 yarn 的方式安裝，以下是以 npm 安裝為例。

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

使用-g是因?yàn)檫@些都是全局使用的模塊（尤其是 eslint 和 prettier），不用每次重復(fù)安裝，而且也容易被開發(fā)工具找到，當(dāng)然也可以選擇不用-g，自行處理模塊位置。

eslint 和prettier 不說(shuō)。

eslint-plugin-prettier 是之前說(shuō)過(guò)，這里重新說(shuō)明一下：

這個(gè)是在低版本的 webstorm 里面使用 prettier 時(shí)候要求安裝的插件。

eslint 要跟 prettier 配合，需要有這個(gè)插件來(lái)做過(guò)渡（或者叫驅(qū)動(dòng)），低版本的 webstorm 用到這個(gè)插件也是這個(gè)意思。

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è)開發(fā)工具也有版本差異，也有使用 prettier 和 eslint 的差異），可能有存在各種情況，所以最好還是安裝上這個(gè)插件。

官方有詳細(xì)介紹：GitHub - prettier/eslint-config-prettier: Turns off all rules that are unnecessary or might conflict with Prettier.

babel-eslint ：

有些代碼是沒被 eslint 支持的（因?yàn)?babel 也是負(fù)責(zé)這種事情，轉(zhuǎn)譯不被支持的 js 語(yǔ)法），所以需要加上這個(gè)插件來(lái)保持兼容性。

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

eslint-plugin-html：

問(wèn)了讓eslint 可以檢查.vue文件的代碼。

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

[image:183FFECA-1463-4847-995C-7968ACB07CDE-2833-00000FC1A80835A6/A9CB9340-A21E-42C9-ADF2-76B4351FA7D2.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插件使用的：

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

在 webstorm 下：

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

在 vscode 下：

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

然后依次點(diǎn)擊 文件 > 首選項(xiàng) > 設(shè)置 打開 vscode 配置文件，然后配置指定使用哪個(gè) eslintrc 文件作為 vscode 的配置文件。

[image:21128230-D925-4913-9B21-68C26C371CB6-2833-000010E826578238/162A9A99-B87A-469B-82FD-A570A7352937.png]

[image:BB2B7C90-692F-4731-93DC-D48E5E5F63FD-2833-000010E936A05A4C/6566C009-8837-4BA7-BC56-4F8EEF8AA928.png]

"eslint.options": {
    "configFile": "E:/git/github/styleguide/eslint/.eslintrc.js"
},

在 VSCode 中，默認(rèn) ESLint 并不能識(shí)別 .vue、.ts 或 .tsx 文件，需要在「文件 => 首選項(xiàng) => 設(shè)置」里做如下配置：

{
    "eslint.validate": [
        "javascript",
        "javascriptreact",
        "html",
        "vue",
        "typescript",
        "typescriptreact"
    ]
}

詳細(xì)參考：使用 VSCode + ESLint 實(shí)踐前端編碼規(guī)范 - decoder - SegmentFault 思否

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

{
  "printWidth": 100,
  "singleQuote": true, // 這個(gè)地方需要跟 eslint 的規(guī)則保持一致
  "semi": false // 這個(gè)地方需要跟 eslint 的規(guī)則保持一致
}

官方有詳細(xì)的介紹：Configuration File · Prettier

這個(gè)配置在 webstorm 下和 vscode 都一樣。

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

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

對(duì)此我個(gè)人的理解就是，editorconfig可以協(xié)助開發(fā)工具在自動(dòng)格式化或者自動(dòng)排版或者錄入排版的時(shí)候進(jìn)行代碼格式化，但是只能支持比較簡(jiǎn)單的規(guī)則，不過(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

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

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

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

使用 prettier 格式化所有代碼。

差異性修復(fù)代碼，因?yàn)橛行└袷交蛘咂渌麊?wèn)題導(dǎo)致出錯(cuò)而被前兩部過(guò)濾之后還剩余的。（通常前面兩步基本解決了所有問(wèn)題了）

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

參考文檔：

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

原文轉(zhuǎn)載：梳理前端開發(fā)使用 eslint+prettier 檢查和格式化代碼 | 線上猛如虎，線下慫如鼠（WhyNotBetter）