社區(qū)精選 |Vue項(xiàng)目之使用EditorConfig, Eslint和Prettier實(shí)現(xiàn)代碼規(guī)范

今天為各位小伙伴推薦的是社區(qū)作者 瑪爾斯通 的文章，在這篇文章中他介紹了如何在Vue項(xiàng)目中實(shí)現(xiàn)基本的代碼規(guī)范配置，讓我們一起來學(xué)習(xí)吧！

背景

每個(gè)人的代碼風(fēng)格不同，比如有的人代碼縮進(jìn)喜歡用Tab，有的人喜歡用Space；有的人代碼語句后會(huì)加上分號(hào)，有的人則不加。并且不同的人使用的開發(fā)工具也不同，有的人喜歡使用WebStorm，有的人喜歡用VSCode。。。

如果是一個(gè)人獨(dú)立開發(fā)，這些當(dāng)然都沒啥問題，自己想怎么寫就怎么寫。代碼規(guī)范化之后可能也沒法立即看到帶來的好處。并且相反，可能在某些人看來反而是一種束縛。

但是如果是團(tuán)隊(duì)協(xié)同開發(fā)，代碼規(guī)范化所帶來的好處就很明顯。比如，統(tǒng)一團(tuán)隊(duì)成員的代碼風(fēng)格，方便后期維護(hù)，避免擾亂Git Diff等等。

針對(duì)以上這些問題，本文會(huì)介紹如何在Vue項(xiàng)目中實(shí)現(xiàn)基本的代碼規(guī)范配置。

思路

不同人可能會(huì)使用不同開發(fā)工具，不同開發(fā)工具有著不同的默認(rèn)配置，針對(duì)這個(gè)問題，這里我們采用開發(fā)工具配置工具EditorConfig去統(tǒng)一這些開發(fā)工具的默認(rèn)配置。

https://editorconfig.org/

有時(shí)候開發(fā)中難免會(huì)寫出一些語法錯(cuò)誤等問題，比如使用了未聲明的變量，switch語句少寫了break等等，而這些問題要等到編譯或者運(yùn)行時(shí)才會(huì)被發(fā)現(xiàn)。針對(duì)這個(gè)問題，這里我們使用代碼檢查工具Eslint來檢查這些代碼問題，將這些問題提前暴露出來并修復(fù)，而不是等到編譯或運(yùn)行時(shí)提示報(bào)錯(cuò)才發(fā)現(xiàn)。

https://eslint.org/

此外，每個(gè)人的代碼風(fēng)格不同，比如有的人代碼縮進(jìn)喜歡用Tab，有的人喜歡用Space，有的人一行寬度設(shè)置了80個(gè)字符，有的人設(shè)置了120甚至更多等等，針對(duì)這個(gè)問題，這里我們使用代碼格式化工具Prettier來統(tǒng)一這些代碼風(fēng)格。

https://prettier.io/

實(shí)現(xiàn)

考慮到有的Vue項(xiàng)目是用Vue CLI搭建的，有的是用Webpack或其他工具搭建的，因此接下來我將用VSCode開發(fā)工具，根據(jù)不同的搭建工具分別實(shí)現(xiàn)代碼規(guī)范。

使用Vue CLI創(chuàng)建的Vue項(xiàng)目

給新項(xiàng)目添加代碼規(guī)范

當(dāng)我們使用vue create命令創(chuàng)建新項(xiàng)目時(shí)，命令行界面會(huì)詢問我們是否選擇 Linter / Formatter，這就是Vue CLI給我們提供的代碼規(guī)范工具，這里需要選上。

選擇Eslint + Prettier

選擇之后，命令行會(huì)接著詢問我們選擇哪一種Eslint配置。列表中都是比較流行的配置，可以根據(jù)自己的需要選擇。這里我們選擇Eslint + Prettier。

自動(dòng)執(zhí)行l(wèi)int規(guī)則配置

接下來，命令行還會(huì)詢問何時(shí)自動(dòng)執(zhí)行l(wèi)int，這里我們需要把兩個(gè)都選上，選上之后不管是保存文件，還是使用Git提交代碼，都會(huì)自動(dòng)執(zhí)行l(wèi)int，并自動(dòng)修復(fù)錯(cuò)誤（提交代碼時(shí)）。

選擇獨(dú)立配置文件

最后，命令行還會(huì)詢問是否把這些配置放在各自獨(dú)立的文件中，還是全部放在package.json中，考慮到模塊的明確性和后期維護(hù)，這里我們選擇In dedicated config files。

最后，等項(xiàng)目初始化完成后，我們使用開發(fā)工具打開項(xiàng)目，會(huì)發(fā)現(xiàn)項(xiàng)目的根目錄多了一個(gè).eslintrc.js文件。

這就是Eslint配置文件，可以參考Eslint官方配置文檔了解更多。對(duì)了，開發(fā)工具還要安裝Eslint插件并配置好，這樣Eslint才會(huì)生效。

https://eslint.org/docs/latest/user-guide/configuring

配置Prettier

首先，我們需要在項(xiàng)目的根目錄新建文件.prettierrc.js，然后參考Prettier官方配置文檔，配置一些常用項(xiàng)，這里列出我經(jīng)常使用的配置，大家可以根據(jù)需要自行調(diào)整。

https://prettier.io/docs/en/options.html

// .prettierrc.js
module.exports = {
  useTabs: false, // 關(guān)閉tab縮進(jìn)，使用Space縮進(jìn)
  tabWidth: 2, // 每次縮進(jìn)2個(gè)字符
  semi: true, // 結(jié)尾加分號(hào)
  singleQuote: true, // 使用單引號(hào)
  jsxSingleQuote: true, // jsx中使用單引號(hào)
  trailingComma: 'es5', // 結(jié)尾逗號(hào)使用es5規(guī)則
  bracketSpacing: true, // 括號(hào)和參數(shù)之間有空格
  jsxBracketSameLine: false, // 標(biāo)簽屬性較多時(shí)，標(biāo)簽箭頭>另起一行
  arrowParens: 'always', // 箭頭函數(shù)參數(shù)永遠(yuǎn)加括號(hào)
  quoteProps: 'as-needed', // 屬性加引號(hào)需要加時(shí)再加
  printWidth: 80, // 每行字符個(gè)數(shù)
};

其次，我們還需要給開發(fā)工具做一些配置，讓開發(fā)工具識(shí)別我們剛剛添加的Prettier配置。

以VSCode開發(fā)工具為例，首先，我們需要去擴(kuò)展商店中查找并安裝Prettier插件

其次，我們還需要設(shè)置開發(fā)工具中的默認(rèn)格式化工具為Prettier

然后，選擇“配置默認(rèn)格式化程序“

然后，選擇Prettier，這樣開發(fā)工具就會(huì)使用Prettier作為默認(rèn)格式化工具。

最后，我們還需要勾選上開發(fā)工具中設(shè)置的Format On Save設(shè)置。這樣當(dāng)我們保存文件時(shí)，開發(fā)工具就會(huì)自動(dòng)使用之前設(shè)置好的默認(rèn)格式化工具Prettier進(jìn)行格式化代碼，并且格式化后會(huì)自動(dòng)保存文件。

配置好Prettier之后，我們可以以src/main.js文件為例，測試Prettier配置是否生效。

下圖是src/main.js文件默認(rèn)的狀態(tài)，注意看文件中的雙引號(hào)。

當(dāng)我們使用快捷鍵cmd/ctrl+s保存文件后，會(huì)發(fā)現(xiàn)雙引號(hào)全部變成了單引號(hào)。這是因?yàn)槲覀冊?/span>.prettierrc.js文件中配置了使用單引號(hào)規(guī)則singleQuote: true，這也證明了Prettier配置生效了。

EditorConfig配置

因?yàn)榇蠖鄶?shù)開發(fā)工具都支持EditorConfig，因此配置起來很簡單。一般來說，只需要在項(xiàng)目的根目錄創(chuàng)建一個(gè).editorconfig文件，然后添加常用配置項(xiàng)即可。這里我列出我經(jīng)常使用的配置，大家可以根據(jù)需要自行調(diào)整。

# 頂層配置文件，不會(huì)繼續(xù)向上層搜索配置文件
root = true

# 匹配任意格式文件
[*]

# 字符集
charset = utf-8

# 縮進(jìn)風(fēng)格
indent_style = space

# 縮進(jìn)值
indent_size = 2

# 換行符
end_of_line = lf

# 保存文件后文件末尾是否插入一行
insert_final_newline = true

# 刪除行尾空格
trim_trailing_whitespace = true

給已有的項(xiàng)目添加代碼規(guī)范

假設(shè)現(xiàn)在有一個(gè)Vue項(xiàng)目，并沒有配置Eslint, Prettier和EditorConfig，那我們該如何實(shí)現(xiàn)代碼規(guī)范呢？

安裝并配置Eslint

首先，我們可以根據(jù)Vue CLI官方文檔的推薦，使用vue add命令安裝Eslint插件:

這里我們使用的是vue add命令，而不是npm install命令。這是因?yàn)?/span>vue add命令會(huì)自動(dòng)給我們安裝相關(guān)和依賴的插件，并配置好。而npm install只是安裝了指定的插件，依賴插件的安裝和配置還需要我們手動(dòng)去實(shí)現(xiàn)。

安裝完成后，命令行會(huì)提示我們選擇哪一種Eslint配置：

這里我們選擇Prettier，并且把兩個(gè)自動(dòng)lint規(guī)則都選上，這樣Vue CLI就會(huì)幫我們自動(dòng)安裝Prettier插件并配置好。

配置Prettier和EditorConfig

已有項(xiàng)目中的Prettier和EditorConfig配置和前文在新項(xiàng)目中的配置是同樣的步驟，這里不再贅述。

使用Webpack等工具創(chuàng)建的Vue項(xiàng)目

假設(shè)我們現(xiàn)在有一個(gè)使用Webpack或其他工具創(chuàng)建的Vue項(xiàng)目，那我們就沒法享有Vue CLI帶給我們的便利。不過，實(shí)現(xiàn)的思路都是一樣的，實(shí)現(xiàn)起來也很簡單，下面以Webpack工具為例。

配置Eslint

參考Vue Eslint官方文檔，首先我們需要安裝Eslint插件

https://eslint.vuejs.org/user-guide/#installation

安裝好之后，新建文件.eslintrc.js，并添加常用配置項(xiàng)

然后確保開發(fā)工具中的Eslint正確配置：

最后我們可以檢驗(yàn)下配置是否生效：

配置Prettier

Eslint和Prettier在有些規(guī)則上會(huì)有沖突，根據(jù)Prettier官方文檔提示，我們可以通過安裝eslint-config-prettier插件來解決。

https://prettier.io/docs/en/integrating-with-linters.html

安裝好之后，還需要修改下Eslint配置。

然后新建Prettier配置文件.prettierrc.js并配置好，最后設(shè)置Prettier為默認(rèn)格式化工具即可（參考前文，這里不再贅述）。

配置Webpack

根據(jù)Webpack官方文檔，如果想讓W(xué)ebpack集成Eslint，我們需要安裝eslint-webpack-plugin插件。

https://webpack.js.org/plugins/eslint-webpack-plugin/

安裝完成后，還需要配置下Webpack。

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

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

最后重啟項(xiàng)目即可。如果代碼有問題，命令行就會(huì)顯示具體的Eslint報(bào)錯(cuò)信息。

配置EditorConfig

EditorConfig配置和前文在新項(xiàng)目中的配置是同樣的步驟，這里不再贅述。

總結(jié)

本篇文章主要介紹了如何在Vue項(xiàng)目中實(shí)現(xiàn)代碼規(guī)范，主要使用了Eslint + Prettier + EditorConfig等工具。在非Vue項(xiàng)目中也可以參考著實(shí)現(xiàn)，本質(zhì)上都是一樣的。

其實(shí)，代碼規(guī)范化不僅對(duì)團(tuán)隊(duì)協(xié)同開發(fā)有幫助，對(duì)于個(gè)人開發(fā)，也有不少好處。最直觀的就是，可以促使我們養(yǎng)成良好的代碼習(xí)慣，而不是“隨意編碼”。這種好習(xí)慣有助于我們走得更好, 更遠(yuǎn)。

SegmentFault 思否社區(qū)小編說

自 2022-07-01 起 SegmentFault 思否公眾號(hào)改版啦！之后將陸續(xù)推出新的欄目和大家見面?。ㄕ?qǐng)拭目以待呀~?）

在「社區(qū)精選」欄目中，我們將為廣大開發(fā)者推薦來自 SegmentFault 思否開發(fā)者社區(qū)的優(yōu)質(zhì)技術(shù)文章，這些文章全部出自社區(qū)中充滿智慧的技術(shù)創(chuàng)作者哦!

希望通過這一欄目，大家可以共同學(xué)習(xí)技術(shù)干貨，GET 新技能和各種花式技術(shù)小 Tips。

歡迎越來越多的開發(fā)者加入創(chuàng)作者的行列，我們將持續(xù)甄選出社區(qū)中優(yōu)質(zhì)的內(nèi)容推介給更多人，讓閃閃發(fā)光的技術(shù)創(chuàng)作者們走到聚光燈下，被更多人認(rèn)識(shí)。

「社區(qū)精選」投稿郵箱：[email protected]

投稿請(qǐng)附上社區(qū)文章地址