用VSCode寫Vue要用到的配置

[本文出自天外歸雲的博客園]

文件-首選項-設置-打開settings.json-用戶設置區域填寫：

{
  "workbench.colorTheme": "Monokai",
  "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的兩個空格間隔原則
  "files.associations": {
    "*.vue": "vue"
  },
  "eslint.autoFixOnSave": true,
  "eslint.options": {
    "extensions": [".js", ".vue"]
  },
  "prettier.eslintIntegration": true, // 讓prettier使用eslint的代碼格式進行校驗
  "prettier.semi": true, // 去掉代碼結尾的分號
  "prettier.singleQuote": true, // 使用單引號替代雙引號
  "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": [
    "javascript",
    {
      "language": "vue",
      "autoFix": true
    },
    {
      "language": "html",
      "autoFix": true
    }
  ],
  "search.exclude": {
    "**/node_modules": true,
    "**/bower_components": true,
    "**/dist": true
  },
  "emmet.syntaxProfiles": {
    "javascript": "jsx",
    "vue": "html",
    "vue-html": "html"
  },
  "editor.fontSize": 22, // 編輯器文字大小
  "window.zoomLevel": 0
}

之后在VSCode中就可以通過 ctrl+shift+f 來按eslint格式進行格式化了。