快捷導(dǎo)航

在vue中使用eslint,配合vscode的操作

更新時(shí)間：2020年11月09日 09:25:28 作者：UIEngineer

這篇文章主要介紹了在vue中使用eslint,配合vscode的操作，具有很好的參考價(jià)值，希望對(duì)大家有所幫助。一起跟隨小編過(guò)來(lái)看看吧

不管是多人合作還是個(gè)人項(xiàng)目，代碼規(guī)范是很重要的。這樣做不僅可以很大程度地避免基本語(yǔ)法錯(cuò)誤，也保證了代碼的可讀性。這所謂工欲善其事，必先利其器，個(gè)人推薦 eslint+vscode 來(lái)寫 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ū)寫

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

這個(gè)時(shí)候我們可能想每次書(shū)寫玩代碼保存的時(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è)置=>用戶=>擴(kuò)展=>eslint>在seeting.json文件中編寫加上去下面的代碼

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

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

打開(kāi) .eslintrc.js文件在rules 里面加入下面的話是我們自定義的規(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"  // 這句話是啟動(dòng)我們的 eslintrc.js 配置文件的命令 默認(rèn)這句話是有的
 }

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