VueJS初学者求助：VSCode中Vue模板语法格式化优化

开发者阿泽

2026-8-12

解决VSCode中Vue模板格式化问题的方案

1. 统一使用Volar工具链

卸载或禁用Vetur（Volar是Vue官方推荐的新一代工具，两者共存会导致语法识别、格式化冲突）
安装最新版的「Vue Language Features (Volar)」和「TypeScript Vue Plugin (Volar)」扩展

2. 搭配Prettier实现精准格式化

安装「Prettier - Code formatter」扩展
在项目根目录执行命令安装Vue适配插件：npm install prettier-plugin-vue --save-dev

3. 配置VSCode格式化规则

打开VSCode设置（快捷键Ctrl+,/Cmd+,），修改以下核心设置：

将Editor: Default Formatter设置为esbenp.prettier-vscode
开启Editor: Format On Save，实现保存时自动格式化
在项目根目录创建.prettierrc配置文件，写入以下内容以匹配目标样式：

{
  "printWidth": 100,
  "tabWidth": 2,
  "useTabs": false,
  "semi": true,
  "singleQuote": true,
  "vueIndentScriptAndStyle": true,
  "htmlWhitespaceSensitivity": "ignore",
  "bracketSameLine": false
}

4. 协调ESLint与Prettier（若项目使用ESLint）

避免规则冲突，安装适配插件并修改ESLint配置：

执行命令：npm install eslint-config-prettier eslint-plugin-prettier --save-dev
在.eslintrc.js中更新配置：

module.exports = {
  extends: [
    'plugin:vue/vue3-recommended',
    'prettier'
  ],
  plugins: ['prettier'],
  rules: {
    'prettier/prettier': 'error'
  }
}