Vue專案之使用EditorConfig, Eslint和Prettier實現程式碼規範

瑪爾斯通發表於2022-06-28

logo

背景

每個人的程式碼風格不同,比如有的人程式碼縮排喜歡用Tab,有的人喜歡用Space;有的人程式碼語句後會加上分號,有的人則不加。並且不同的人使用的開發工具也不同,有的人喜歡使用WebStorm,有的人喜歡用VSCode。。。

如果是一個人獨立開發,這些當然都沒啥問題,自己想怎麼寫就怎麼寫。程式碼規範化之後可能也沒法立即看到帶來的好處。並且相反,可能在某些人看來反而是一種束縛。

但是如果是團隊協同開發,程式碼規範化所帶來的好處就很明顯。比如,統一團隊成員的程式碼風格,方便後期維護,避免擾亂Git Diff等等。

針對以上這些問題,本文會介紹如何在Vue專案中實現基本的程式碼規範配置。

思路

不同人可能會使用不同開發工具,不同開發工具有著不同的預設配置,針對這個問題,這裡我們採用開發工具配置工具EditorConfig去統一這些開發工具的預設配置。

有時候開發中難免會寫出一些語法錯誤等問題,比如使用了未聲名的變數,switch語句少寫了break等等,而這些問題要等到編譯或者執行時才會被發現。針對這個問題,這裡我們使用程式碼檢查工具Eslint來檢查這些程式碼問題,將這些問題提前暴露出來並修復,而不是等到編譯或執行時提示報錯才發現。

此外,每個人的程式碼風格不同,比如有的人程式碼縮排喜歡用Tab,有的人喜歡用Space,有的人一行寬度設定了80個字元,有的人設定了120甚至更多等等,針對這個問題,這裡我們使用程式碼格式化工具Prettier來統一這些程式碼風格。

實現

考慮到有的Vue專案是用Vue CLI搭建的,有的是用Webpack或其他工具搭建的,因此接下來我將用VSCode開發工具,根據不同的搭建工具分別實現程式碼規範。

使用Vue CLI建立的Vue專案

給新專案新增程式碼規範

當我們使用vue create命令建立新專案時,命令列介面會詢問我們是否選擇 Linter / Formatter,這就是Vue CLI給我們提供的程式碼規範工具,這裡需要選上。

image-20220626201847739

image-20220626201912624

選擇Eslint + Prettier

選擇之後,命令列會接著詢問我們選擇哪一種Eslint配置。列表中都是比較流行的配置,可以根據自己的需要選擇。這裡我們選擇Eslint + Prettier

image-20220626201940454

自動執行lint規則配置

接下來,命令列還會詢問何時自動執行lint,這裡我們需要把兩個都選上,選上之後不管是儲存檔案,還是使用Git提交程式碼,都會自動執行lint,並自動修復錯誤(提交程式碼時)。

image-20220626202024856

選擇獨立配置檔案

最後,命令列還會詢問是否把這些配置放在各自獨立的檔案中,還是全部放在package.json中,考慮到模組的明確性和後期維護,這裡我們選擇In dedicated config files

image-20220626202049554

最後,等專案初始化完成後,我們使用開發工具開啟專案,會發現專案的根目錄多了一個.eslintrc.js檔案。

image-20220626202253674

這就是Eslint配置檔案,可以參考Eslint官方配置文件瞭解更多。對了,開發工具還要安裝Eslint外掛並配置好,這樣Eslint才會生效。

image-20220626203734195

image-20220626205422758

配置Prettier

首先,我們需要在專案的根目錄新建檔案.prettierrc.js,然後參考Prettier官方配置文件,配置一些常用項,這裡列出我經常使用的配置,大家可以根據需要自行調整。

image-20220626183622096

// .prettierrc.js
module.exports = {
  useTabs: false, // 關閉tab縮排,使用Space縮排
  tabWidth: 2, // 每次縮排2個字元
  semi: true, // 結尾加分號
  singleQuote: true, // 使用單引號
  jsxSingleQuote: true, // jsx中使用單引號
  trailingComma: 'es5', // 結尾逗號使用es5規則
  bracketSpacing: true, // 括號和引數之間有空格
  jsxBracketSameLine: false, // 標籤屬性較多時,標籤箭頭>另起一行
  arrowParens: 'always', // 箭頭函式引數永遠加括號
  quoteProps: 'as-needed', // 屬性加引號需要加時再加
  printWidth: 80, // 每行字元個數
};

其次,我們還需要給開發工具做一些配置,讓開發工具識別我們剛剛新增的Prettier配置。

以VSCode開發工具為例,首先,我們需要去擴充套件商店中查詢並安裝Prettier外掛

img

其次,我們還需要設定開發工具中的預設格式化工具為Prettier

image-20220626202933500

然後,選擇“配置預設格式化程式“

image-20220626203054729

然後,選擇Prettier,這樣開發工具就會使用Prettier作為預設格式化工具。

image-20220626203129456

最後,我們還需要勾選上開發工具中設定的Format On Save設定。這樣當我們儲存檔案時,開發工具就會自動使用之前設定好的預設格式化工具Prettier進行格式化程式碼,並且格式化後會自動儲存檔案。

image-20220626203247572

配置好Prettier之後,我們可以以src/main.js檔案為例,測試Prettier配置是否生效。

下圖是src/main.js檔案預設的狀態,注意看檔案中的雙引號。

image-20220626203324101

當我們使用快捷鍵cmd/ctrl+s儲存檔案後,會發現雙引號全部變成了單引號。這是因為我們在.prettierrc.js檔案中配置了使用單引號規則singleQuote: true,這也證明了Prettier配置生效了。

image-20220626203513466

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

給已有的專案新增程式碼規範

假設現在有一個Vue專案,並沒有配置Eslint, Prettier和EditorConfig,那我們該如何實現程式碼規範呢?

image-20220626185557736

安裝並配置Eslint

首先,我們可以根據Vue CLI官方文件的推薦,使用vue add命令安裝Eslint外掛:

image-20220626185656799

這裡我們使用的是vue add命令,而不是npm install命令。這是因為vue add命令會自動給我們安裝相關和依賴的外掛,並配置好。而npm install只是安裝了指定的外掛,依賴外掛的安裝和配置還需要我們手動去實現。

安裝完成後,命令列會提示我們選擇哪一種Eslint配置:

image-20220626185801945

image-20220626185848143

這裡我們選擇Prettier,並且把兩個自動lint規則都選上,這樣Vue CLI就會幫我們自動安裝Prettier外掛並配置好。

image-20220626190119651

配置Prettier和EditorConfig

已有專案中的Prettier和EditorConfig配置和前文在新專案中的配置是同樣的步驟,這裡不再贅述。

使用Webpack等工具建立的Vue專案

假設我們現在有一個使用Webpack或其他工具建立的Vue專案,那我們就沒法享有Vue CLI帶給我們的便利。不過,實現的思路都是一樣的,實現起來也很簡單,下面以Webpack工具為例。

image-20220626192052009

配置Eslint

參考Vue Eslint官方文件,首先我們需要安裝Eslint外掛

image-20220626192750964

安裝好之後,新建檔案.eslintrc.js,並新增常用配置項

image-20220626193145691

然後確保開發工具中的Eslint正確配置:

image-20220626200109003

最後我們可以檢驗下配置是否生效:

image-20220626200653928

配置Prettier

Eslint和Prettier在有些規則上會有衝突,根據Prettier官方文件提示,我們可以通過安裝eslint-config-prettier外掛來解決。

image-20220626194812687

安裝好之後,還需要修改下Eslint配置。

image-20220626200456988

然後新建Prettier配置檔案.prettierrc.js並配置好,最後設定Prettier為預設格式化工具即可(參考前文,這裡不再贅述)。

image-20220626195153762

配置Webpack

根據Webpack官方文件,如果想讓Webpack整合Eslint,我們需要安裝eslint-webpack-plugin外掛。

image-20220628132629358

安裝完成後,還需要配置下Webpack。

// webpack.config.dev.js
const ESLintPlugin = require('eslint-webpack-plugin');

module.exports = {
  // ...
  plugins: [
    new ESLintPlugin({
      extensions: ['js', 'vue'],
      exclude: 'node_modules',
    }),
  ],
  // ...
};

最後重啟專案即可。如果程式碼有問題,命令列就會顯示具體的Eslint報錯資訊。

image-20220628132401661

配置EditorConfig

EditorConfig配置和前文在新專案中的配置是同樣的步驟,這裡不再贅述。

總結

本篇文章主要介紹瞭如何在Vue專案中實現程式碼規範,主要使用了Eslint + Prettier + EditorConfig等工具。在非Vue專案中也可以參考著實現,本質上都是一樣的。

其實,程式碼規範化不僅對團隊協同開發有幫助,對於個人開發,也有不少好處。最直觀的就是,可以促使我們養成良好的程式碼習慣,而不是“隨意編碼”。這種好習慣有助於我們走得更好, 更遠。

相關文章