首先確保VS Code 安裝了 Vetur 和 Eslint 插件。

公司主營業(yè)務(wù)：網(wǎng)站制作、網(wǎng)站建設(shè)、移動網(wǎng)站開發(fā)等業(yè)務(wù)。幫助企業(yè)客戶真正實現(xiàn)互聯(lián)網(wǎng)宣傳，提高企業(yè)的競爭能力。成都創(chuàng)新互聯(lián)公司是一支青春激揚、勤奮敬業(yè)、活力青春激揚、勤奮敬業(yè)、活力澎湃、和諧高效的團隊。公司秉承以“開放、自由、嚴謹、自律”為核心的企業(yè)文化，感謝他們對我們的高要求，感謝他們從不同領(lǐng)域給我們帶來的挑戰(zhàn)，讓我們激情的團隊有機會用頭腦與智慧不斷的給客戶帶來驚喜。成都創(chuàng)新互聯(lián)公司推出吳江免費做網(wǎng)站回饋大家。

然后使用了vue-cli提供的簡單webpack模板，這樣創(chuàng)建的工程默認沒有添加ESLint。

vue init webpack-simple test-vscode

配置過程

全局安裝最新的eslint

npm i -g eslint@latest

運行

eslint --init

會安裝以下依賴

eslint-config-standard@latest
eslint-plugin-import@>=2.2.0
eslint-plugin-node@>=5.2.1
eslint-plugin-promise@>=3.5.0
eslint-plugin-standard@>=3.0.0

同時在項目目錄下生成.eslintrc.js文件。里面只有最基本的內(nèi)容：

module.exports = {
 "extends": "standard"
};

表明我們使用的規(guī)則是standard規(guī)范所定義的規(guī)則。

然后本地安裝最新的eslint

npm i -D eslint@latest

在package.json 的 scripts中添加一行：

 "lint": "eslint --ext .js,.vue src"

運行：

npm run lint

VS Code會提示我們找不到eslint-config-standard：

安裝它：

npm i -D eslint-config-standard

然后運行

npm run lint

這時就會有報錯的提示了。

4. 但是在.vue文件中出錯的地方并沒有相應(yīng)的提示。這時Vetur排上用場了。 在VS Code的設(shè)置里面添加如下規(guī)則：

{
"eslint.validate": [
  "javascript",
  "javascriptreact",
  {
    "language": "vue",
   "autoFix": true
  }
 ]
}

這樣就添加了對.vue文件的支持。

5. 但是這樣會對.vue文件中的標簽報解析錯誤

這時需要安裝eslint-plugin-vue@next插件。

 npm install -D eslint-plugin-vue@next

同時在.eslintrc.js中添加使用vue插件的擴展。

// .eslintrc.js
module.exports = {
 "extends": [
   "standard",
   "plugin:vue/base"
  ]
}

這樣，就可以對.vue文件提供實時檢查的功能了。

6. 對于多余的逗號這種錯誤，可以在保存的時候讓eslint插件自動修復。 更改VS Code中的設(shè)置，添加如下規(guī)則：

{
 "eslint.autoFixOnSave": true
}

總結(jié)

通過使用VS Code的插件 Vetur 、ESLint來對Vue工程中的.vue提供代碼檢查的功能。

1. 需要安裝的依賴：
json

"eslint": "^4.14.0", 
"eslint-config-standard": "^11.0.0-beta.0", 
"eslint-plugin-import": "^2.8.0", 
"eslint-plugin-node": "^5.2.1", 
"eslint-plugin-promise": "^3.6.0", 
"eslint-plugin-standard": "^3.0.1", 
"eslint-plugin-vue": "^4.0.0-beta.4",

注意: 這里 ESLint 和 eslint-plugin-vue需要是最新的。

2. .eslintrc的配置
js

module.exports = { 
"extends": [ 
"standard", 
"plugin:vue/base" 
] 
};

3. VS Code 的配置
json

{ 
"eslint.validate": [ 
"javascript", 
"javascriptreact", 
{ 
"language": "vue", 
"autoFix": true 
} 
], 
"eslint.autoFixOnSave": true 
} 

參考資料：
Vetur文檔
ESLint文檔
eslint-plugin-vue

以上就是本文的全部內(nèi)容，希望對大家的學習有所幫助，也希望大家多多支持創(chuàng)新互聯(lián)。