vscode中如何加eslint檢查工具

    代碼的質量對開發人員個人的成長以及公司的發展至關重要，所以如何使用把控代碼的質量是大家經常思考的問題。除了代碼審核之外，代碼檢查工具成了把控代碼質量的第一道門檻，非常好用，可以建立一些團隊約定的代碼風格，也可以使用比較經典、標准的語法規則。

    以下主要介紹vscode中eslint是如何使用的？

     第一步：vscode先安裝eslint插件，如下圖：

      

      第二步：全局安裝eslint，使用命令如下：

npm i -g eslint

      第三步：初始化eslint，生成.eslintrc.js文件，使用命令如下

eslint --init

     輸入完命令，按回車之后，我們按照提示，一步一步選擇自己所需就行，最后會生成.eslintrc.js文件，如下圖：

     eslint里面的規則，可以自己設置，具體怎么設置，可以參考eslint官網-規則設置案例

    第四步：如果你寫VUE，最好安裝vetur插件和Prettier - Code formatter插件，然后在vscode編輯器里設置，具體如下

 

{
  "workbench.editor.enablePreview": false, //打開文件不覆蓋
  "search.followSymlinks": false, //關閉rg.exe進程
  "editor.minimap.enabled": false, //關閉快速預覽
  "files.autoSave": "afterDelay", //打開自動保存
  "editor.lineNumbers": "on", //開啟行數提示
  "editor.quickSuggestions": {
    //開啟自動顯示建議

    "other": true,
    "comments": true,
    "strings": true
  },
  "editor.tabSize": 2, //制表符符號eslint
  "prettier.semi": true, //去掉代碼結尾的分號
  "prettier.singleQuote": true, //使用單引號替代雙引號
  "prettier.trailingComma": "none", //去除對象最末尾元素跟隨的逗號
  "javascript.format.insertSpaceBeforeFunctionParenthesis": true, //讓函數(名)和后面的括號之間加個空格
  "vetur.format.defaultFormatter.html": "js-beautify-html", //格式化.vue中html
  "vetur.format.defaultFormatter.js": "vscode-typescript", //讓vue中的js按編輯器自帶的ts格式進行格式化
  "vetur.format.defaultFormatterOptions": {
    "js-beautify-html": {
      "wrap_attributes": "force-aligned" //屬性強制折行對齊
    }
  },
  "eslint.validate": [
    //開啟對.vue文件中錯誤的檢查

    "javascript",
    "javascriptreact",
    {
      "language": "html",
      "autoFix": true
    },
    {
      "language": "vue",
      "autoFix": true
    }
  ],
  "[javascript]": {
    "editor.defaultFormatter": "esbenp.prettier-vscode"
  },
  "terminal.integrated.rendererType": "dom",
  "[typescript]": {
    "editor.defaultFormatter": "esbenp.prettier-vscode"
  },
  // 保存時自動格式化
  "editor.codeActionsOnSave": {
    "source.fixAll.eslint": true
  }
}

      這樣弄好之后，ctrl+s保存的時候，編輯器會自動把代碼按照既定的規則進行格式化，省了很多事兒~