VSCode環境下配置ESLint 對Vue單文件的檢測

本文介紹了在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>複製代碼

以上