VSCode 装对插件可替代专用 IDE：ESLint+Prettier 自动修复代码风格，Auto Import 智能补全 import 路径，Live Server 仅用于静态页预览，避免与框架开发流程混用。
VSCode 本身不是前端开发工具，但装对插件后，它能替代大部分专用 IDE 的功能——关键不在“多”，而在“准”。下面几个插件和配置组合，覆盖了日常编码、调试、协作中最耗时的环节。
ESLint + Prettier 自动修复写法不一致
很多人装了 ESLint 和 Prettier 却没真正用起来，结果还是手动改缩进、分号、引号。问题出在配置冲突或保存时未触发修复。
- 必须安装
ESLint插件（由eslintnpm 包驱动），而非只装Prettier插件 - 在项目根目录加
.eslintrc.cjs，启用plugin:prettier/recommended并确保prettier在 extends 列表末尾 - 在
settings.json中设"editor.codeActionsOnSave": { "source.fixAll.eslint": true }，禁用"editor.formatOnSave" - 避免同时开启
Prettier插件的格式化，否则会和 ESLint 冲突，报Conflict with another formatter
Auto Import 按需补全 import 语句
手写 import 不仅慢，还容易拼错路径或导出名，尤其在 monorepo 或别名路径（@/components）下更易出错。
- 装
Auto Import插件（bysteoates），它基于当前 tsconfig.json 或 jsconfig.json 解析路径别名 - 输入函数名（如
useRouter）后按Ctrl+Space，会直接给出带正确路径的 import 补全项 - 如果补全不出现，检查
jsconfig.json是否有"compilerOptions.baseUrl"和"paths"配置 - 不推荐用
Path Intellisense替代——它只补路径，不识别导出成员，容易引入未导出的变量
Live Server 启动轻量本地服务但别用于真实调试
Live Server 插件启动快、热重载直观，适合静态 HTML/CSS 快速预览，但它不支持代理、环境变量、模块解析，也不走 webpack/vite 构建流程。
立即学习“前端免费学习笔记（深入）”；
- 右键 HTML 文件 → “Open with Live Server”，端口默认
5500，可在设置里改liveServer.settings.port - 不要用它跑 Vue/React 项目：没有 HMR、无 source map、
import.meta.env全是undefined - 真要调试，用框架自带命令（
npm run dev）并配好Debugger for Chrome或 VSCode 内置的Edge调试器 - 如果页面加载空白，先看浏览器控制台是否报
Cross-Origin Request Blocked——这是 Live Server 无法处理模块导入的典型表现
插件越多，VSCode 启动越慢，且不同插件间可能抢夺同一快捷键或文件监听权。真正省时间的不是“装得全”，而是让 ESLint 自动修、Auto Import 少敲字、Live Server 只在该用的地方用——其余时候，老老实实用框架原生命令。
