VSCode代码提示功能优化_VSCode自动规范Vue代码【方法】-VSCode-PHP中文网

根本原因是语言模式、格式化器绑定、配置作用域未对齐；需确保右下角显示vue、settings.json中正确配置[vue]块、snippet的scope为"vue"、prettier插件支持vue且.prettierrc位置正确。

vscode代码提示功能优化_vscode自动规范vue代码【方法】

Vue 文件里代码提示不出现、按 Tab 没反应、格式化静默失败——根本不是插件没装，而是语言模式、格式化器绑定、配置作用域三者没对齐。

右下角显示 Plain Text 或 HTML 就别折腾配置了

VSCode 所有智能提示和格式化行为都绑定在当前 Language Mode 上。如果打开 .vue 文件后右下角显示的是 Plain Text 或 HTML，那 Volar、Prettier、ESLint 全部失效。

点右下角语言标识 → 选 Vue（不是 Vue HTML、JavaScript React 或空选项）
若列表里没有 Vue，说明 Volar 插件未启用，或被 Vetur 冲突屏蔽（Vue 3 项目必须禁用 Vetur）
手动强制关联：在 settings.json 中加 "files.associations": { "*.vue": "vue" }，保存后重开文件

[vue] 配置块写错一个字符就全挂

VSCode 的语言专属配置必须严格匹配语法：[vue] 是唯一合法写法，[Vue]、vue、"vue"、[vue-html] 全部无效。

check-vue-style

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

下载

确认 settings.json 中存在且仅有一处 "[vue]": { "editor.defaultFormatter": "esbenp.prettier-vscode" }
Vue 3 项目不要配 vetur.* 相关项——Volar 不读这些，写了也白写
若同时启用 ESLint 自动修复，"editor.codeActionsOnSave": { "source.fixAll.eslint": true } 必须保留，但要关掉 "editor.formatOnSave": false，避免 Prettier 和 ESLint 互相覆盖

snippet 的 scope 字段必须是 "vue"，不是 "html" 也不是 "javascript"

输入 vue 按 Tab 没反应，90% 是因为代码片段的 scope 值错了。这个字段不是可选的，它决定了 VSCode 在哪种语言模式下才触发该 snippet。

全局 snippet 推荐单独建 vue.code-snippets 文件（而非改 vue.json），内容里必须含 "scope": "vue"
不能写成 "scope": "html"（那是给纯 HTML 文件用的）、"scope": "javascript"（只在 JS 文件生效）
保存后必须执行 Developer: Reload Window（Ctrl+Shift+P 输入并回车），热重载不生效
验证方式：新建 test.vue → 确认右下角是 Vue → 输入 vue → 按 Tab → 应弹出完整 SFC 结构

Prettier 对 .vue 文件的三块处理逻辑完全不同

Prettier 在 .vue 文件里不统一处理整文件，而是分三块走不同通道：<template></template> 走 HTML 规则，<script></script> 走 JS/TS 规则，<style></style> 走 CSS/SCSS 规则。你改的 .prettierrc 只影响 <script></script> 区域。

<template></template> 的属性换行靠 vetur.format.options.wrapAttributes 控制（Vetur 项目）；Volar + Prettier 组合下，得靠 prettier-plugin-vue 支持，且需 Prettier ≥ 2.8.0
<style scoped lang="scss"></style> 需额外安装 mrmlnc.vscode-scss 插件，并配 "[scss]": { "editor.defaultFormatter": "mrmlnc.vscode-scss" }
.prettierrc 必须放在项目根目录，文件名只能是 .prettierrc（无后缀）或 prettier.config.js；.prettierrc.json 不被识别