必须开“保存即格式化”的插件是prettier和eslint，需同时安装esbenp.prettier-vscode与dbaeumer.vscode-eslint，配置"editor.formatonsave": true和"editor.codeactionsonsave": {"source.fixall.eslint": true}，并引入eslint-config-prettier避免规则冲突。
真正提升前端开发效率的插件，不是装得越多越好，而是选对那几个能自动接管重复劳动、减少上下文切换、让错误在敲代码时就被拦住的工具。
哪些插件必须开“保存即格式化”？
只有 Prettier 和 ESLint 配合启用时，“保存即格式化”才有实际意义。单独开 Prettier 会忽略语义错误（比如未使用的变量），只管排版；单独开 ESLint 默认不格式化，只报错。
- 必须同时安装
esbenp.prettier-vscode和dbaeumer.vscode-eslint - 在
settings.json中配这两项："editor.formatOnSave": true和"editor.codeActionsOnSave": { "source.fixAll.eslint": true } - 关键一步：加
eslint-config-prettier到项目依赖里，否则Prettier和ESLint规则会打架，比如一个要分号、一个不要，保存后代码来回跳 - Vue 项目务必用
Volar而非Vetur，否则script setup里的类型推导和自动导入会失效
路径和导入提示类插件怎么避免冲突？
path-intellisense 和 npm-intellisense 功能有重叠，但底层逻辑不同：前者补全相对/绝对路径（如 ./components/Button.vue），后者补全 node_modules 里的包名（如 lodash/debounce）。两者可共存，但要注意顺序。
- 如果装了
bradlc.vscode-tailwindcss，它自带路径解析能力，再开path-intellisense可能导致@apply里类名提示变慢 -
import-cost依赖webpack或vite的打包分析能力，若项目没配build.rollupOptions或resolve.alias，它显示的包体积可能不准 -
auto-import类功能（如 Volar 的vue.components.autoImport）需关闭javascript.suggest.autoImports，否则 import 语句会重复生成
调试类插件为什么连不上 Chrome？
常见错误是 launch.json 里 url 没匹配本地服务地址，或 webRoot 指向了构建后目录而非源码目录。
- 开发时用
http://localhost:5173（Vite）或http://localhost:3000（React），url必须精确一致，末尾斜杠不能少 -
webRoot应设为"${workspaceFolder}"，不是"${workspaceFolder}/dist"——后者只能调试打包后代码，断点根本打不进源文件 - Chrome 浏览器需禁用所有其他调试插件（尤其是旧版
Debugger for Chrome），VS Code 内置的ms-vscode.js-debug已取代它，手动装反而引发端口占用 - Vue 项目启用
vue-devtools前，确保devtools在createApp时没被设为false
AI 插件该不该默认启用？
像 GitHub Copilot 或 DeepSeek R1 这类 AI 插件，适合用在“写样板逻辑”或“翻译注释”，但绝不该让它生成核心业务逻辑或处理敏感数据。
- 它们的训练数据截止于某个时间点，对 2026 年新出的
React Server Components或Vue 3.5的新 API 支持滞后 - 公司内网项目必须关掉云端模型调用，本地模型（如
DeepSeek R1的离线模式）也需确认是否合规 - 开启后留意 CPU 占用——
copilot后台常驻进程在低配机器上会拖慢文件打开速度 - 真正省时间的是
Quokka.js这类轻量工具：选中一行const a = [1,2,3].map(x => x * 2)，按Ctrl+K J立刻看到结果[2,4,6]，比切窗口跑测试快得多
插件不是越多越强，而是越少越稳。一个干净的 extensions.json 推荐清单里，真正每天高频触发的不会超过 8 个——其余的，留到真需要时再装，别让 VS Code 启动时加载一堆用不到的监听器。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
