VSCode代码高亮配置方法_VSCode自动美化Vue代码【操作】

阿婷同学_3129

阿婷同学_3129

2026-05-09

359人浏览

原创

应安装volar并禁用vetur,手动将.vue文件语言模式设为vue,配置files.associations为"*.vue":"vue",关闭冲突格式器,确保typescript.tsdk指向本地typescript版本。

vscode代码高亮配置方法_vscode自动美化vue代码【操作】

Vue 文件在 VSCode 中不显示语法高亮或格式化失效,基本就是语言模式没识别对、插件没装全、或者格式化器之间在“打架”。直接上解决路径,别绕弯。

确认 Vue 文件被识别为 vue 语言模式

VSCode 不会自动把 .vue 文件当 Vue 处理——它默认可能当成 html 或 plaintext。右下角状态栏点击当前语言标签(比如显示 “HTML”),手动选成 Vue 或 Vue HTML。如果列表里没有,说明核心插件没装。

  • 必须安装 Volar(Vue 3 项目)或 Vetur(Vue 2 项目),二者不能共存;Volar 已取代 Vetur 成为 Vue 3 官方推荐语言服务
  • 禁用所有冲突插件:卸载 Vetur 后再装 Volar,否则高亮和跳转会错乱
  • 打开一个 .vue 文件后,按 Ctrl+Shift+P 输入 Change Language Mode,确认生效语言是 vue

保存时自动格式化 Vue 文件但缩进/引号错乱

这是 Prettier 和 VSCode 自带格式器或 Volar 内置格式器抢着干活导致的。关键不是“加功能”,而是“关干扰”。

vue-composition-api-best-practices
vue-composition-api-best-practices

Vue 3 组合式 API 与

热门下载

更多
网站特效
/
网站源码
/
网站素材
/
前端模板

精品课程

更多
相关推荐
/
热门推荐
/
最新课程
uni-app快速上手
uni-app快速上手

共0课时 | 0人学习

Vue 教程
Vue 教程

共42课时 | 17.2万人学习

Vue3.x 工具篇--十天技能课堂
Vue3.x 工具篇--十天技能课堂

共26课时 | 2.5万人学习