VSCode 設置vue 保存自動格式化代碼

設置保存自動格式化代碼，開發效率大大提升！

操作如下：

1. 安裝VSCode eslint 插件
2. 如下配置 setting.json 文件：

3. {
     // vscode默認啟用了根據文件類型自動設置tabsize的選項
     "editor.detectIndentation": false,
     // 重新設定tabsize
     "editor.tabSize": 2,
     // #每次保存的時候自動格式化
     "editor.formatOnSave": true,
     // #每次保存的時候將代碼按eslint格式進行修復
     "eslint.autoFixOnSave": true,
     // 添加 vue 支持
     "eslint.validate": [
       "javascript",
       "javascriptreact",
       {
         "language": "vue",
         "autoFix": true
       }
     ],
     // #讓prettier使用eslint的代碼格式進行校驗
     "prettier.eslintIntegration": true,
     // #去掉代碼結尾的分號
     "prettier.semi": false,
     // #使用帶引號替代雙引號
     "prettier.singleQuote": true,
     // #讓函數(名)和后面的括號之間加個空格
     "javascript.format.insertSpaceBeforeFunctionParenthesis": true,
     // #這個按用戶自身習慣選擇
     "vetur.format.defaultFormatter.html": "js-beautify-html",
     // #讓vue中的js按編輯器自帶的ts格式進行格式化
     "vetur.format.defaultFormatter.js": "vscode-typescript",
     "vetur.format.defaultFormatterOptions": {
       "js-beautify-html": {
         "wrap_attributes": "force-aligned"
         // #vue組件中html代碼格式化樣式
       }
     },
     // 格式化stylus, 需安裝Manta's Stylus Supremacy插件
     "stylusSupremacy.insertColons": false, // 是否插入冒號
     "stylusSupremacy.insertSemicolons": false, // 是否插入分好
     "stylusSupremacy.insertBraces": false, // 是否插入大括號
     "stylusSupremacy.insertNewLineAroundImports": false, // import之后是否換行
     "stylusSupremacy.insertNewLineAroundBlocks": false // 兩個選擇器中是否換行
   }