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

一、問題痛點

• 在團隊的項目開發(fā)過程中，代碼維護所占的時間比重往往大于新功能的開發(fā)。因此編寫符合團隊編碼規(guī)范的代碼是至關重要的，這樣做不僅可以很大程度地避免基本語法錯誤，也保證了代碼的可讀性。
• 對于代碼版本管理系統(tǒng)（svn 和 git或者其他），代碼格式不一致帶來的問題是嚴重的，在代碼一致的情況下，因為格式不同，觸發(fā)了版本管理系統(tǒng)標記為 diff，導致無法檢查代碼和校驗。

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

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

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

• 前端開發(fā)規(guī)范之命名規(guī)范、html規(guī)范、css規(guī)范、js規(guī)范 - 騰訊Web前端 IMWeb 團隊社區(qū) | blog | 團隊博客 騰訊的
• 編寫「可讀」代碼的實踐 | Taobao FED | 淘寶前端團隊 淘寶的
• GitHub - airbnb/javascript: JavaScript Style Guide airbnb 的
• https://google.github.io/styl... google 的
• https://github.com/pablohpsil... vue 的

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

沒有絕對的規(guī)范，只有適合的規(guī)范！

（二）關于為什么要用 eslint 和 prettier問題

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

  • 缺點：每種編輯器會有不一樣的代碼格式，而且配置會比較麻煩。
  • prettier 已經(jīng)逐漸成為業(yè)界主流的代碼風格格式化工具。
  • 減輕 eslint 等工具的校驗規(guī)則，因為將代碼樣式校驗交給了 prettier，所以可以將代碼校驗的規(guī)則更準確地應用到代碼真正的規(guī)范上面。
• eslint 是主要還是負責代碼規(guī)則校驗，prettier 只調(diào)整代碼風格，代碼樣式，eslint 才是真正檢查代碼是否符合規(guī)范的工具。

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

二、解決辦法

舊有的解決辦法是：

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

新的解決辦法是：

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

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

三、具體操作

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

大綱

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

安裝 eslint 和 prettier （node 模塊）

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

配置 eslint 和 prettier

配置 editorconfig （可選）

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

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

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

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

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

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

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

安裝這個模塊的意義在于，實際上，整個流程最核心就是這個地方，開發(fā)工具雖然支持了這2個模塊，但是最終運行是必須要以這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 兼容，關閉 prettier 跟 eslint 沖突的rules npm install --save-dev eslint-config-prettier

補充備注：

• eslint-config-prettier ：

  • 這個插件是如果eslint的規(guī)則和prettier的規(guī)則發(fā)生沖突的時候（主要是不必要的沖突），例如eslint 限制了必須單引號，prettier也限制了必須單引號，那么如果用 eslint 驅(qū)動 prettier 來做代碼檢查的話，就會提示2種報錯，雖然他們都指向同一種代碼錯誤，這個時候就會由這個插件來關閉掉額外的報錯。
  • 但如果是eslint 只負責檢測代碼，prettier 只負責格式化代碼，那么他們之間互不干擾，也就是說，也是可以不安裝這個插件的，但是因為團隊的人員的差異性（即使同一個開發(fā)工具也有版本差異，也有使用 prettier 和 eslint 的差異），可能有存在各種情況，所以最好還是安裝上這個插件。
  • 官方有詳細介紹：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 也是負責這種事情，轉(zhuǎn)譯不被支持的 js 語法），所以需要加上這個插件來保持兼容性。
  • 官方有詳細介紹：https://github.com/babel/babe...

• eslint-plugin-html：

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

（三）安裝webstorm 的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 的話默認會幫你安裝上，這也是推薦 webstorm 的原因。

1. WebStorm 2018.1 和以上的版本

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

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

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

2. WebStorm 2017.3 和更早的版本

這個版本有2種情況：

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

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

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

---

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

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

1. eslint 的配置

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

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

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

不過這里不糾結用哪一種 eslint 的配置，具體看項目和團隊，這里只是說明需要做 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作為配置文件。

2. prettier的配置

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

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

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

（四） 配置 editorconfig

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

對此我個人的理解就是，editorconfig可以協(xié)助開發(fā)工具在自動格式化或者自動排版或者錄入排版的時候進行代碼格式化，但是只能支持比較簡單的規(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

詳細參考：

• 【譯】EditorConfig介紹 | AlloyTeam
• EditorConfig

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

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

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

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

使用 prettier 格式化所有代碼。

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

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

參考文檔：

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

總結

以上是生活随笔為你收集整理的更新版-梳理前端开发使用eslint和prettier来检查和格式化代码问题的全部內(nèi)容，希望文章能夠幫你解決所遇到的問題。

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