很多新手装完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.formatOnSa ve": true——没这句，Prettier就是摆设，保存时啥都不干
• "editor.defaultFormatter": "esbenp.prettier-vscode"——必须写死，否则Vue或TS文件可能被其他格式器劫持，结果五花八门
• "eslint.validate": ["ja vascript", "typescript", "vue"]——只加这三个，别画蛇添足加html或json，否则会报错Definition for rule 'xxx' was not found，白白浪费时间

ESLint和Prettier别打架的关键开关

如果你保存代码时发现缩进乱跳、分号时有时无，基本就是ESLint和Prettier的规则没有对齐。

这不是调单个插件设置就能解决的问题。要靠eslint-config-prettier这个“和事佬”，关闭ESLint里所有和格式相关的规则，让它们各司其职。

• 项目根目录运行：npm install eslint-config-prettier --sa ve-dev
• 在.eslintrc.js的extends数组末尾加上'eslint-config-prettier'
• 删掉.prettierrc里和ESLint冲突的项，比如"semi"、"singleQuote"——这些由ESLint统一管，Prettier只负责排版节奏，别让它俩抢饭碗

Volar的template区域没提示？检查这个开关

Volar默认只对