前端效率提升靠精选5–7个核心插件并精准配置：Prettier与ESLint必须配对启用自动修复和格式化，Volar需禁用Vetur且配置tsconfig，REST Client依赖环境变量和响应提取，Path Intellisense与Auto Rename Tag需适配别名和JSX。
直接说结论：前端项目效率提升不靠堆插件，靠选对 5–7 个核心插件 + 关键配置联动，否则反而拖慢启动和响应速度。
为什么 Prettier 和 ESLint 必须配对使用，且不能只装一个
单独装 Prettier 只能格式化代码，但无法识别 undefined variable 或 missing semicolon 这类逻辑/语法错误；单独装 ESLint 虽能报错，但默认不自动修复、不统一缩进/引号风格，团队协作时仍会因手动格式化引发大量 Git 冲突。
- 必须在
settings.json中启用"editor.formatOnSave": true和"eslint.enable": true - 安装
eslint-config-prettier（不是eslint-plugin-prettier），否则两者规则会打架，比如semi和no-extra-semi冲突导致保存后反复增删分号 -
Prettier的"prettier.disableLanguages": ["vue"]配置要慎用——Vue SFC 的<script>块仍需格式化，真正该关的是<template>，应改用"prettier.vueIndentScriptAndStyle": false
Volar 不是 Vetur 的简单升级，Vue3 项目里禁用 Vetur 是硬性要求
Volar 和 Vetur 在底层机制上互斥：Vetur 基于旧版 TypeScript 语言服务，Volar 使用 TS 插件式语言服务器（TS Plugin），同时支持 defineProps 类型推导和 setup 语法高亮。若共存，VS Code 会随机加载其中一个，导致 props 提示失效或 ref 类型丢失。
- 检查是否残留
Vetur：命令面板输入Developer: Show Running Extensions，搜索vetur，禁用并重启 -
Volar必须配合项目级tsconfig.json中的"compilerOptions.types": ["volar"]（Vue 官方推荐写法），否则defineEmits<{ click: [string] }>()类型不生效 - 如果用
defineComponent写 Options API，Volar默认不校验，需额外加// @ts-ignore或改用defineComponent({})显式包裹
REST Client 替代 Postman 的真实门槛：环境变量和请求链怎么写才不翻车
REST Client 的核心价值不在发单个请求，而在构建可复用、可交接的接口测试流。但多数人卡在环境变量引用和跨请求数据传递上。
- 环境变量必须定义在
.vscode/settings.json中，格式为："rest-client.environmentVariables": { "local": { "host": "http://localhost:3000" } }，不能写在.env文件里 - 用
{{host}}/api/user引用变量时，确保当前 .http 文件顶部有@name = local声明，否则变量为空字符串 - 从上一个请求提取 token：在响应头中加
###分隔符后，写@token = response.body.token，下个请求用Authorization: Bearer {{token}}—— 注意response.body是原始 JSON 字符串，若字段嵌套深，得用response.body.data.user.token - 中文参数 URL 编码：直接写
GET {{host}}/search?q=张三会 400，必须手动encodeURIComponent('张三')或改用POST+application/x-www-form-urlencoded
Path Intellisense 和 Auto Rename Tag 看似简单，但路径别名和 JSX 标签容易出错
Path Intellisense 默认不识别 @/ 别名，Auto Rename Tag 在 JSX 中对 div 有效，但对 MyComponent 自定义组件无效，这是两个最常被忽略的兼容性缺口。
- 要支持
@/components/Button.vue补全，必须在项目根目录jsconfig.json或tsconfig.json中配置"baseUrl": "./"和"paths": { "@/*": ["src/*"] } -
Auto Rename Tag对 JSX 失效是因为它默认只处理 HTML 标签，需在设置中开启"auto-rename-tag.ignoreTagNames": ["div", "span"]并清空列表，或改用更现代的Auto Rename Tag (React)插件 - 当文件名含空格或特殊字符（如
user detail.js），Path Intellisense生成的导入路径会漏转义，需手动补require('./user%20detail')，建议命名一律用kebab-case
插件越多，VS Code 启动越慢、内存占用越高，尤其开大项目时。真正关键的是把 Prettier + ESLint + Volar + REST Client 四个插件的配置细节调对，其他如 Path Intellisense 和 Auto Rename Tag 属于“开了就回不去”的实用型，但必须按项目实际技术栈验证兼容性，而不是无脑全装。
