VsCode 配置Eslint格式化代碼（vue）以及經常使用插件

配置eslint

1. 插件擴展商店搜索 eslint，點擊安裝，並從新加載；
   
2. 配置eslint，打開 文件==>首選項==>設置；
   

3. 在用戶設置中插入配置代碼(支持vue):

   "eslint.options": {
           "plugins": [
               "html"
           ]
       },
       "eslint.validate": [
           "javascript",
           "javascriptreact",
           "html",
           "vue",
           {
               "language": "html",
               "autoFix": true
           },
           {
               "language": "vue",
               "autoFix": true
           }
       ],
       "eslint.autoFixOnSave": true,
        "editor.tabSize": 2,

   此時，eslint就能夠在項目中檢測代碼了

eslint檢測比較嚴格，若但願vue按照eslint格式化代碼，進行如下操做：

1. 安裝插件Vetur，這是vscode上一個vue.js代碼提示，語法高亮等功能的流行插件；
2. 安裝後在默認配置能夠看到，vetur默認採用prettier格式化；
   

3. 安裝插件prettier,但他的格式化並不和eslint同樣，因此在用戶配置中添加如下配置；

   //分號
   "prettier.semi": false,
   //單引號包裹字符串
   "prettier.singleQuote": true,
   //html格式化依賴  默認爲none
   "vetur.format.defaultFormatter.html": "js-beautify-html",
   //函數前加空格
   "javascript.format.insertSpaceBeforeFunctionParenthesis": true,
   //沒有下邊這個 上邊不生效
   "vetur.format.defaultFormatter.js": "vscode-typescript",

vue擴展推薦

• Vue VSCode Snippets

• Vue 2 Snippets

  上面是兩個很好用的vue代碼片斷

• Better Comments 高亮你註釋的擴展 好比：
  
• css peek css轉到定義
• file peek file到定義