VSCode插件自动配置指南_Vue项目开发环境搭建-VSCode-PHP中文网

vue项目vscode体验差主因是插件配置错误：需禁用vetur、启用volar，确保.vue文件语言模式为vue，snippets中scope设为"vue"，并正确配置eslint与prettier协同及tsconfig.json类型支持。

vscode插件自动配置指南_vue项目开发环境搭建

Vue 项目在 VSCode 里写不爽，八成不是代码问题，而是插件没配对、语言模式没识别、或者 snippet 没生效——尤其 Vue 3 的 script setup 模板，错一个配置就完全不触发。

为什么 .vue 文件输 `vue` 按 Tab 没反应

根本就两件事没做对：当前文件语言模式不是 vue，或代码片段的 scope 值写错了。

看右下角状态栏：显示的是 Plain Text 或 HTML？点它 → 选 Vue（前提是已装 Volar）
vue.code-snippets 里漏了 "scope": "vue"，或误写成 "scope": "html"、"scope": "javascript"
还在用 Vetur：Vue 3 项目中 Vetur 不支持 scope: "vue"，必须禁用 Vetur + 启用 Volar
.vue 后缀没关联到 vue 语言模式：打开设置搜 files.associations，加一行 "*.vue": "vue"

如何正确创建全局 Vue 模板 snippet

别改 vue.json，新建独立的 vue.code-snippets 文件更干净，避免和其他插件冲突。

check-vue-style

检查 .vue 单文件组件的 CSS 规范问题并给出提示，适用于样式检查、CSS审查和 Vue 页面质量巡检。

下载

按 Ctrl+Shift+P（Win/Linux）或 Cmd+Shift+P（Mac），输入 Preferences: Configure User Snippets
选 New Global Snippets file，命名为 vue.code-snippets
填入以下内容（Vue 3 setup 风格，无 export default）：

{
  "Vue SFC (setup)": {
    "scope": "vue",
    "prefix": "vue",
    "body": [
      "<template>",
      "  <div>$1</div>",
      "</template>",
      "",
      "<script setup>",
      "$2",
      "</script>",
      "",
      "<style scoped>",
      "$3",
      "</style>"
    ],
    "description": "Vue 3 SFC with script setup"
  }
}

保存后执行 Ctrl+Shift+P → Developer: Reload Window
新建 test.vue，确认右下角是 Vue，再输 vue 按 Tab

Volar 和 Vetur 必须二选一，且不能共存

Vue 3 项目里同时启用 Vetur 和 Volar，会导致语法高亮错乱、props 提示失效、甚至 script setup 根本不识别。

Volar 是 Vue 官方推荐的 Vue 3 专属语言服务器，支持 setup、defineProps、defineEmits 类型推导
Vetur 已停止维护，对 Vue 3 的 script setup 支持极弱，连 scope: "vue" 都不认
检查方式：打开扩展面板（Ctrl+Shift+X），搜索 Vetur，点击“禁用”；再搜 Volar，确保是“已启用”
重启 VSCode 后，打开任意 .vue 文件，看是否出现 Component is missing template or render function 报错——有则说明还在用 Vetur 解析

ESLint + Prettier 协同工作要断掉 ESLint 的格式化能力

Vue 3 项目里，eslint 和 prettier 直接打架，表现就是保存一次加个分号，再保存一次又删掉。

必须在项目中安装 eslint-config-prettier：npm install --save-dev eslint-config-prettier
.eslintrc.js 中 extends 加上 'eslint-config-prettier'，关掉所有格式类规则
VS Code 设置里显式关闭 ESLint 格式功能："eslint.format.enable": false
editor.formatOnSave 开启，但默认格式化器必须设为 esbenp.prettier-vscode，否则保存时不会走 Prettier
验证方式：Ctrl+Shift+P → 输入 Format Document With，弹出列表里必须有 Prettier