43、VSCode 編輯器針對Eslint檢查的優化處理方案

vue-cli 構建項目之後，會默認給安裝ESLint（ESLint是一個語法規則和代碼風格的檢查工具，可以用來保證寫出語法正確、風格統一的代碼），但也帶來了麻煩，編程習慣上，相信大部分人都喜歡Tab按鍵，進行縮進操作，ESLint檢查會強制報告語法問題。

一種簡單粗暴的解決方式，

禁止ESLint檢查

關閉ESLint方法： 在vue項目中找到build文件夾 --> webpack.base.conf.js --> module

上面的方式，解決了編譯問題，但是文件中還是會出現很多紅色波浪線的提示，同樣煩到抓狂，那麼進行第二步，引入插件，直接通過保存文件，自動格式化成爲EsLint支持的文檔樣式

引入插件

VSCode中添加 eslint 和 vetur 插件

上面截圖是我已經安裝過的了，不然也會顯示下面 Install的綠色按鈕的

安裝完之後，就是開始添加配置的時刻了，配置我也是直接網上直接複製粘貼過來的，如果有更好的配置，希望下面回覆貼出來，供更多的人分享

點擊Edit in settings.json 進入文本編輯界面，貼上下面的配置信息，然後保存即可

{
    "editor.tabSize": 2,
    "files.associations": {
        "*.vue": "vue"
    },
    "eslint.autoFixOnSave": true,
    "eslint.options": {
        "extensions": [
            ".js",
            ".vue"
        ]
    },
  "eslint.validate": [
      "javascript",{
          "language": "vue",
          "autoFix": true
      },"html",
      "vue"
  ],
    "search.exclude": {
        "**/node_modules": true,
        "**/bower_components": true,
        "**/dist": true
    },
    "emmet.syntaxProfiles": {
        "javascript": "jsx",
        "vue": "html",
        "vue-html": "html"
    },
    "git.confirmSync": false,
    "window.zoomLevel": 0,
    "editor.renderWhitespace": "boundary",
    "editor.cursorBlinking": "smooth",
    "editor.minimap.enabled": true,
    "editor.minimap.renderCharacters": false,
    "editor.fontFamily": "'Droid Sans Mono', 'Courier New', monospace, 'Droid Sans Fallback'",
    "window.title": "${dirty}${activeEditorMedium}${separator}${rootName}",
    "editor.codeLens": true,
    "editor.snippetSuggestions": "top",
  }

所有配置步驟到此結束，保存文件的時候，會有奇蹟發生喲