VSCode環境下配置ESLint 對Vue單檔案的檢測

kkdev163發表於2017-11-23
VSCodeEsLintVue

本文介紹了在VSCode環境下如何配置eslint進行程式碼檢查，並介紹瞭如何對.vue單檔案進行支援。

ESLint 安裝

1.在工程根目錄下，安裝eslint及初始化

$ npm install eslint --save-dev 
$ ./node_modules/.bin/eslint -- --init
//會輸出幾個問題，指引配置eslint，我們選擇通用方案即可
1.? How would you like to configure ESLint?  Use a popular style guide
2.? Which style guide do you want to follow? Standard
3.? What format do you want your config file to be in? JavaScript複製程式碼

2.通過以上步驟會在根目錄下生成.eslintrc.js檔案

module.exports = {
    "extends": "standard"
};複製程式碼

3.輸入以下命令嘗試對.js檔案進行eslint檢測和修復

./node_modules/.bin/eslint -- --fix /path/to/file.js複製程式碼

4.安裝vscode外掛 ESLint

該外掛可以在編輯時自動進行eslint檢測和儲存修復等功能，免除頻繁輸入命令列，提高效率 

安裝完ESLint並重啟vscode後,可以在VSCode中開啟一個js檔案，檢查出錯的地方就會有標紅，且有eslint的提示。複製程式碼

5.設定儲存時自動修復
開啟vscode -> 首選項 ->設定

新增以下配置，即可實現儲存時自動修復。

 "eslint.autoFixOnSave": true,
 "eslint.validate":[
    {
       "language": "javascript",
     "autoFix": true
    }
    "javascriptreact",
 ]複製程式碼

需要注意的是，在ESLint的文件中有一段說明：
eslint.autoFixOnSave - enables auto fix on save. Please note auto fix on save is only available if VS Code's files.autoSave is either off, onFocusChange or onWindowChange. It will not work with afterDelay

即儲存時自動修復的功能只有在vscode的files.autoSave 配置不為afterDelay時才能生效，此項配置預設為off

通過以上幾步，我們已經實現了在VSCode中對js檔案編輯時檢測，和儲存自動修復的功能。

對Vue單檔案檢查

1.首先安裝VSCode的外掛 Vetur

該外掛可以對Vue的三個程式碼塊分別高亮，且提供腳手架命令快速生成一段Vue單檔案模板,結合eslint可對三大部分進行程式碼檢查複製程式碼

2.安裝eslint-html外掛,及修改配置檔案,未安裝時，無法正確識別vue檔案中的區域內的html程式碼

$ npm install eslint-plugin-html --save-dev

修改 eslintrc.js檔案 
module.exports = {
    "extends": "standard",
    "plugins":[
        "html"
    ]
};複製程式碼

3.vscode -> 首選項 ->設定

"files.associations": {
     "*.vue": "vue"
},

"eslint.validate": [
    "javascript",
    "javascriptreact",
    {
        "language": "vue",
        "autoFix": true
    }
]複製程式碼

經過以上幾步，不出意外就可以愉快地對.vue檔案進行eslint檢查，並且通過儲存自動進行修復。可以提高以後的工作效率。

額外的配置項

  • 對es6的支援，如 import()函式

    //.eslintrc.js 檔案
module.exports = {
  "extends": "standard",
  "plugins":[
      "html"
  ],
  "parser": "babel-eslint",
  "env": { "es6": true },
  "rules": {
      //"off" or 0 - turn the rule off
      //"warn" or 1 - turn the rule on as a warning (doesn’t affect exit code)
      //"error" or 2 - turn the rule on as an error (exit code is 1 when triggered)

      //require the use of === and !==
      "eqeqeq" : 0,
      "one-var": 0,
  }
};複製程式碼

  • vue單檔案style語法配置

如果在style中使用了scss，預設情況下， eslint會提示出錯，此時需要設定style的lang屬性，更改後即可正常提示

<style scoped lang='scss'>

</style>複製程式碼

以上

相關文章