更新版-梳理前端開發使用eslint和prettier來檢查和格式化代碼問題

時間  2019-11-06
標籤 更新版 梳理 前端 開發 使用 eslint prettier 檢查 格式化 代碼 問題 简体版
原文   原文鏈接
更新版，以前的版本能夠看這裏： 梳理前端開發使用eslint和prettier來檢查和格式化代碼問題

1、問題痛點

  • 在團隊的項目開發過程當中，代碼維護所佔的時間比重每每大於新功能的開發。所以編寫符合團隊編碼規範的代碼是相當重要的，這樣作不只能夠很大程度地避免基本語法錯誤，也保證了代碼的可讀性。
  • 對於代碼版本管理系統（svn 和 git或者其餘），代碼格式不一致帶來的問題是嚴重的，在代碼一致的狀況下，由於格式不一樣，觸發了版本管理系統標記爲 diff，致使沒法檢查代碼和校驗。
可是須要知道的是，開發規範不只僅包含代碼格式規範，還有不少內容，這裏只是單獨說明代碼格式化規範而已。

（一）關於代碼格式規範問題

代碼格式規範的標準能夠參考各大主流公司和社區，如下都是一些經常使用主流規範：javascript

參考別人的規範，制定適合本身團隊使用的規範，太過複雜的規範執行起來太麻煩，太過簡單的規範不如沒有規範。

沒有絕對的規範，只有適合的規範！css

（二）關於爲何要用 eslint 和 prettier問題

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

    • 缺點：每種編輯器會有不同的代碼格式，並且配置會比較麻煩。
    • prettier 已經逐漸成爲業界主流的代碼風格格式化工具。
    • 減輕 eslint 等工具的校驗規則，由於將代碼樣式校驗交給了 prettier，因此能夠將代碼校驗的規則更準確地應用到代碼真正的規範上面。
  • eslint 是主要仍是負責代碼規則校驗，prettier 只調整代碼風格，代碼樣式，eslint 纔是真正檢查代碼是否符合規範的工具。
因此二者是須要配合使用的。

2、解決辦法

舊有的解決辦法是：前端

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

新的解決辦法是：vue

  • 使用 editorconfig 協助兼容開發工具的代碼格式化。
  • 使用 eslint 檢查代碼。
  • 使用 prettier 格式化代碼。（能夠理解爲prettier是 eslint —fix 的增強版，用 prettier 來代替 eslint-fix）
  • 手動修改剩下的有問題的地方，或者有些地方很難用規則來判斷的時候，就須要手動修改。
咋一看，其實沒啥區別，甚至可能發現新解決辦法會更加麻煩了一些，其實步驟上確實如此，可是真正操做上，會減輕 eslint 的規則編寫，也會減小不少手動修改樣式的地方，格式化後的代碼會更加美觀，耐看。

3、具體操做

鑑於網上文章說明的比較混亂，這裏主要是爲了梳理整個流程和思路。

大綱

  1. 統一團隊使用的開發工具（webstorm，ide 編輯器）
  2. 安裝 eslint 和 prettier （node 模塊）
  3. 安裝 eslint 和 prettier （ ide 編輯器的插件）
  4. 配置 eslint 和 prettier
  5. 配置 editorconfig （可選）
  6. 嚴格督查，按照流程檢查和格式化代碼，按照規範和要求進行代碼提交。
這裏多了一步是安裝 eslint 和 prettier （ ide 編輯器的插件），主要就是利用 ide 編輯器作代碼格式錯誤提醒和代碼格式處理，這個操做也可使用 webpack 打包的時候來作，也可使用 gulp 或者 npm 來作，但這裏藉助編輯器會更方便。

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

開發工具能夠作不少東西，是開發代碼的利器，可是不一樣的開發工具會有不一樣的代碼提示，代碼格式化，代碼檢查的機制，這樣的差別化會對團隊代碼規範（開發和檢查）帶來不少問題，因此須要統一。java

固然，若是我的不肯意更換本身用慣的開發工具的話，也不要緊，只要可以作到跟團隊的開發規範保持一致也是能夠的，但我的以爲，這樣難度比較大，畢竟開發工具和團隊的開發規範不那麼容易融合。

這裏只說明前端業界目前最經常使用的開發工具來作例子 webstorm 。node

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

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

// 這裏須要全局安裝最主要的兩個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

補充備註：git

  • eslint-config-prettier ：github

    • 這個插件是若是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種處理：

  1. WebStorm 2018.1 和以上的版本
  2. WebStorm 2017.3 和更早的版本
若是用IntelliJ IDEA, PhpStorm, PyCharm, and other JetBrains IDEs, 則須要安裝prettier插件和 eslint 插件，而webstorm 的話默認會幫你安裝上，這也是推薦 webstorm 的緣由。

1. WebStorm 2018.1 和以上的版本

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

clipboard.png

快捷鍵是：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這個插件，後面再統一說明。

clipboard.png

  • ②是直接使用 prettier 做爲額外工具來使用。

clipboard.png

clipboard.png

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

clipboard.png

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

1. eslint 的配置

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

clipboard.png

詳細參考網址：

不過這裏不糾結用哪種 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

詳細參考：

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

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

整個代碼檢查和格式化流程應該規範爲以下步驟：

  1. 使用eslint 而且嘗試自動修復全部問題（eslint 有 autofix 提示，能夠進行—fix 修復，按照 .eslintrc 配置文件來進行修復）。
  2. 使用 prettier 格式化全部代碼。
  3. 差別性修復代碼，由於有些格式或者其餘問題致使出錯而被前兩部過濾以後還剩餘的。（一般前面兩步基本解決了全部問題了）
  4. 把精美的格式化後的代碼提交到版本庫。

參考文檔：

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

相關文章
相關標籤/搜索
每日一句
    每一个你不满意的现在，都有一个你没有努力的曾经。
本站公眾號
   歡迎關注本站公眾號,獲取更多信息
聯繫我們 最近搜索 最新文章 沪ICP备13005482号-10 MyBatis教程 SQL 教程 MySQL教程 Java 教程 Thymeleaf 教程 Hibernate教程 Spring教程 Redis教程