快速開始，使用 VSCode 開發 Vue 項目如何配置語法高亮和自動格式化

關於 IDE

開發 Vue 項目，一般使用 VSCode/WebStorm/Atom 等 IDE，推薦使用 VSCode。

而 VSCode 原生不支持 Vue 語法高亮和自動格式化等功能，需要通過插件來支持。

安裝插件

點擊 首選項 -> 擴展，安裝以下插件：

• Vetur – vue 必備插件，用於語法高亮和代碼提示
• Auto Close Tag – 自動完成標籤，如輸入 時，自動添加
• Auto Rename Tag – 重命名開始或結束標籤時，自動將配對的開始或結束標籤進行重命名
• JavaScript Snippet Pack – 一些常用的模板代碼快捷鍵，如 cl 回車，生成 console.log();
• npm – npm 相關
• Path Intellisense – 路徑提示
• Markdown All in One – 方便打開 Markdown 文檔

添加配置

打開首選項 -> 設置 -> 右上角的 {} 符號打開 settings.json -> 將下面的 json 配置粘進去 -> 保存

 "emmet.syntaxProfiles": {
    "vue-html": "html",
    "vue": "html"
  },
  "editor.tabSize": 2,
  "vetur.validation.template": false,
  "beautify.config": {
    "editorconfig": true,
    "indent_size": 2,
    "wrap_attributes": "force-aligned",
    "wrap_attributes_indent_size": 2,
    "wrap_line_length": 180
  },
  "vetur.format.defaultFormatter.html": "js-beautify-html",
  "vetur.format.defaultFormatterOptions": {
    "js-beautify-html": {
      "editorconfig": true,
      "indent_size": 2,
      "wrap_attributes": "force-aligned",
      "wrap_attributes_indent_size": 2,
      "wrap_line_length": 180
    }
  },
  "markdown.extension.toc.githubCompatibility": true,
  "files.autoSave": "onWindowChange",
  "search.exclude": {
    "dist": true,
    "node_modules": true
  },
  "search.quickOpen.includeSymbols": true,
  "extensions.ignoreRecommendations": false,

搞定！