快速开始，使用 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,

搞定！