不管是多人合作還是個(gè)人項(xiàng)目，代碼規(guī)范是很重要的。這樣做不僅可以很大程度地避免基本語(yǔ)法錯(cuò)誤，也保證了代碼的可讀性。這所謂工欲善其事，必先利其器，個(gè)人推薦 eslint+vscode 來(lái)寫(xiě) vue，絕對(duì)有種飛一般的感覺(jué)。

每次保存，vscode就能標(biāo)紅不符合eslint規(guī)則的地方，同時(shí)還會(huì)做一些簡(jiǎn)單的自我修正。安裝步驟如下：

首先安裝eslint插件

安裝并配置完成 ESLint 后，我們繼續(xù)回到 VSCode 進(jìn)行擴(kuò)展設(shè)置，依次點(diǎn)擊 文件 > 首選項(xiàng) > 設(shè)置 打開(kāi) VSCode 配置文件,添加如下配置

'files.autoSave':'off', 'eslint.validate': [ 'javascript', 'javascriptreact', 'html', { 'language': 'vue', 'autoFix': true } ], 'eslint.options': { 'plugins': ['html'] }

這樣每次保存的時(shí)候就可以根據(jù)根目錄下.eslintrc.js你配置的eslint規(guī)則來(lái)檢查和做一些簡(jiǎn)單的fix。

補(bǔ)充知識(shí)：vscode配置eslint搭配vue腳手架快速實(shí)現(xiàn)代碼質(zhì)量化書(shū)寫(xiě)

我們?cè)诠臼褂媚_手架的時(shí)候可能會(huì)使用eslint來(lái)實(shí)現(xiàn)代碼的質(zhì)量檢測(cè),但是真正在書(shū)寫(xiě)代碼的時(shí)候要時(shí)刻記住那些 “標(biāo)準(zhǔn)”可能有點(diǎn)難受 比如 結(jié)尾不加分號(hào) 使用單引號(hào) 首行倆個(gè)空格縮進(jìn)等等

這個(gè)時(shí)候我們可能想 每次書(shū)寫(xiě)玩代碼保存的時(shí)候 它能自動(dòng)幫我整理成符合標(biāo)準(zhǔn)的代碼 那是不是就事半功倍了

沒(méi)錯(cuò)vscode就有這樣的功能

還是和和往常一樣 直接上步驟和代碼了

1.實(shí)現(xiàn)這樣的條件 (vue腳手架安裝的時(shí)候 需要 選中 eslint +prettier 這個(gè)選項(xiàng))

在vscode上安裝三個(gè)插件 eslint 代碼質(zhì)量檢測(cè)插件 prettier 規(guī)則可以自定義 vetur vue代碼高亮

2.進(jìn)入 文件=>首選項(xiàng)=>設(shè)置=>用戶(hù)=>擴(kuò)展=>eslint>在seeting.json文件中編寫(xiě) 加上去下面的代碼

'editor.codeActionsOnSave': { 'source.fixAll.eslint': true }// 默認(rèn)用戶(hù)保存的時(shí)候自動(dòng) 實(shí)現(xiàn)eslint代碼標(biāo)準(zhǔn)

3.有一個(gè)剛安裝好的vue腳手架 我的是 @vue/cli 4.0 版本了

打開(kāi) .eslintrc.js文件 在rules 里面加入下面的話(huà) 是我們自定義的規(guī)則

rules: { ’prettier/prettier’: [ ’error’, { semi: false, // 結(jié)尾分號(hào) false是關(guān)閉 true是打開(kāi) singleQuote: true, // 單引號(hào) true是打開(kāi) false是關(guān)閉 printWidth: 160 // 默認(rèn)代碼多少個(gè)換行 我這里設(shè)置160 } ] }

4.運(yùn)行測(cè)試 在我們的怕package.json 文件中的

'scripts': { 'serve': 'vue-cli-service serve', 'build': 'vue-cli-service build', 'lint': 'vue-cli-service lint' // 這句話(huà)是啟動(dòng)我們的 eslintrc.js 配置文件的命令 默認(rèn)這句話(huà)是有的 }

我們啟動(dòng)一下 npm run lint 運(yùn)行成功后

看了一下 我們 腳手架的入口文件 main.js 是不是所有的 引號(hào)都變成了單引號(hào) 結(jié)尾還沒(méi)有分號(hào)

我們隨便修改一下代碼 保存 他也會(huì)自動(dòng)幫我們調(diào)整成符合eslint標(biāo)準(zhǔn)格式的代碼 是不是很舒服 大家快去試試把

以上這篇在vue中使用eslint,配合vscode的操作就是小編分享給大家的全部?jī)?nèi)容了，希望能給大家一個(gè)參考，也希望大家多多支持好吧啦網(wǎng)。