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

一、問題痛點

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

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

（一）關于代碼格式規范問題

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

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

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

沒有絕對的規范，只有適合的規范！

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

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

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

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

二、解決辦法

舊有的解決辦法是：

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

新的解決辦法是：

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

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

三、具體操作

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

大綱

統一團隊使用的開發工具（webstorm，ide 編輯器）

安裝 eslint 和 prettier （node 模塊）

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

配置 eslint 和 prettier

配置 editorconfig （可選）

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

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

（一）統一團隊使用的開發工具（webstorm，ide 編輯器）

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

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

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

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

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

// 這里需要全局安裝最主要的兩個node 模塊，主要是要讓 ide 編輯器能夠讀取全局環境來調用這2個模塊 npm install eslint prettier -g --save-dev// 這個是為了 eslint 跟 prettier 可以聯合使用 npm install --save-dev eslint-plugin-prettier // 這個是為了讓 eslint 跟 prettier 兼容，關閉 prettier 跟 eslint 沖突的rules npm install --save-dev eslint-config-prettier

補充備注：

• eslint-config-prettier ：

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

• eslint-plugin-html：

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

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

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

根據官方介紹webstorm 分別有2種處理：

WebStorm 2018.1 和以上的版本

WebStorm 2017.3 和更早的版本

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

1. WebStorm 2018.1 和以上的版本

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

快捷鍵是：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 模塊來驅動 prettier 模塊，然后中間驅動則是靠eslint-plugin-prettier。

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

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

---

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

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

1. eslint 的配置

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

詳細參考網址：

• AlloyTeam ESLint 規則
• 擺脫令人抓狂的ESlint 語法檢測配置說明 - web攻城方略 - SegmentFault 思否
• ESLint配置文件.eslintrc參數說明 · 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參數 plugins: ['html', 'prettier'],// rules 規則就按照各家寫法。 在 webstorm 下，在項目根目錄.eslintrc作為配置文件。

2. prettier的配置

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

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

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

（四） 配置 editorconfig

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

對此我個人的理解就是，editorconfig可以協助開發工具在自動格式化或者自動排版或者錄入排版的時候進行代碼格式化，但是只能支持比較簡單的規則，不過也減輕了一部分代碼格式化的壓力和成本，所以有比沒有好，而且最好要有。 // 放在項目根目錄的.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

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

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

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

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

使用 prettier 格式化所有代碼。

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

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

參考文檔：

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

---

本文轉載自我的 blog：更新版 - 梳理前端開發使用 eslint 和 prettier 來檢查和格式化代碼問題

總結

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

如果覺得生活随笔網站內容還不錯，歡迎將生活随笔推薦給好友。