装完VSCode后需一次性安装五大核心插件(ESLint、Prettier、Volar、Path Intellisense、Error Lens)并正确配置:选对插件ID、禁用Vetur、重启VSCode、设置settings.json关键项、安装eslint-config-prettier对齐规则、启用Volar语言模式。

装完 VSCode 后,不需要一个个搜、点、配——五大核心插件(ESLint、Prettier、Volar、Path Intellisense、Error Lens)可以一次性装齐并启用关键功能,但前提是跳过默认安装陷阱,直奔配置要害。
插件安装不能只靠“搜索+安装”
VSCode 扩展市场里同名插件常有多个作者版本,装错一个就卡死或冲突。比如 Volar 必须选官方出品(作者是 Vue),而 Vetur 要彻底禁用;Prettier 必须认准 esbenp.prettier-vscode 这个 ID,其他“Prettier”前缀的第三方包不兼容 ESLint。
- 打开扩展面板(Ctrl+Shift+X),依次粘贴以下 ID 直接安装:
dbaeumer.vscode-eslint、esbenp.prettier-vscode、vue.volar、christian-kohler.path-intellisense、philsinatra.errorlens - 装完立刻重启 VSCode —— 尤其
Volar,不重启会导致defineProps类型不提示 - 如果已装过
Vetur,在扩展列表里右键 → “禁用”,别留着
settings.json 里必须改的三处硬配置
插件装了 ≠ 生效。多数人卡在这一步:格式化不触发、错误不标红、路径不补全。真正起作用的是 settings.json 里的显式声明,不是插件自带默认值。
-
"editor.formatOnSave": true—— 没这句,Prettier就是摆设 -
"editor.defaultFormatter": "esbenp.prettier-vscode"—— 必须写死,否则 Vue/TS 文件可能被其他格式器劫持 -
"eslint.validate": ["javascript", "typescript", "vue"]—— 只加这三个,加html或json会报错Definition for rule 'xxx' was not found
ESLint 和 Prettier 别打架的关键开关
保存时代码来回缩进、分号忽有忽无,基本都是两者规则没对齐。不是调单个插件设置,而是靠 eslint-config-prettier 这个“和事佬”关掉 ESLint 里所有和格式相关的规则。
前端设计与 UI/UX 全方位优化专家。覆盖视觉层次、排版系统、色彩理论、响应式布局、交互体验、动画动效、无障碍访问、性能优化八大维度,帮助开发者将普通页面升级为高品质产品级界面。前端设计与 UI/UX 全方位优化专家。覆盖视觉层次、排版系统、色彩理论、响应式布局、交互体验、动画动效、无障碍访问、性能优化八大维度,帮助开发者将普通页面升级为高品质产品级界面。
立即学习“前端免费学习笔记(深入)”;
- 项目根目录运行:
npm install eslint-config-prettier --save-dev - 在
.eslintrc.js的extends数组末尾加上'eslint-config-prettier' - 删掉
.prettierrc里和 ESLint 冲突的项,比如"semi"、"singleQuote"—— 这些由 ESLint 统一管,Prettier只负责排版节奏
Volar 的 template 区域没提示?检查这个开关
Volar 默认只激活 <script setup></script> 区域的 TS 类型检查,<template></template> 里 v-model、组件属性不提示,大概率是因为没开语言服务器模式。
- 打开命令面板(Ctrl+Shift+P),输入
Volar: Select Language Mode,选Vue - 再输
Volar: Restart Server强制重载 - 如果还是不行,在设置里搜
volar.trace.server,设为"Verbose",看输出面板里有没有Failed to resolve component类错误
最常被忽略的是:插件装完后,settings.json 里没写 editor.defaultFormatter 就等于没配;Volar 和 Vetur 共存会让整个 Vue 文件失去类型提示;eslint-config-prettier 不装,ESLint 和 Prettier 就永远在互相覆盖。这些不是“可选项”,是前端项目能跑起来的第一道门槛。

















