VSCode前端开发应按需安装插件：初学HTML/CSS/JS仅需Live Server、Auto Rename Tag、vscode-icons；React/Vue项目须配ESLint与Prettier但需禁用ESLint自动格式化以避免冲突；TypeScript项目额外装JavaScript and TypeScript Nightly；团队协作统一用EditorConfig。
VSCode 添加前端开发必备插件，不是“装得越多越好”，而是按需安装、避免冲突、配置到位——尤其新手容易在 ESLint 和 Prettier 同时启用时触发格式化打架，或因 Live Server 与构建工具（如 Vite）端口冲突导致页面空白。
怎么快速装对插件，不踩兼容性坑
别直接搜“前端插件”堆一堆，先确认你当前项目类型和阶段：
- 刚学 HTML/CSS/JS：只装
Live Server+Auto Rename Tag+vscode-icons，够用且零配置 - 写 React/Vue 项目：必须加
ESLint（插件名ESLint） +Prettier（插件名Prettier），但要关掉其中一个的自动格式化开关 - 用 TypeScript：额外装
JavaScript and TypeScript Nightly（微软官方，比内置 TS 支持更新快） - 团队协作：统一装
EditorConfig for VS Code，靠.editorconfig文件同步缩进/换行规则，比各自设置更可靠
所有插件都从扩展面板（Ctrl+Shift+X）搜官方名称安装，别信“Vue Tools Pro”这类非官方打包插件——它们常捆绑旧版依赖，更新滞后还报 Cannot find module 'vue/compiler-sfc' 错误。
ESLint 和 Prettier 冲突时怎么配
两者默认都会监听保存事件，结果 ESLint --fix 刚修完分号，Prettier 立刻删掉它。根本解法是只留一个负责格式化：
前端设计与 UI/UX 全方位优化专家。覆盖视觉层次、排版系统、色彩理论、响应式布局、交互体验、动画动效、无障碍访问、性能优化八大维度，帮助开发者将普通页面升级为高品质产品级界面。前端设计与 UI/UX 全方位优化专家。覆盖视觉层次、排版系统、色彩理论、响应式布局、交互体验、动画动效、无障碍访问、性能优化八大维度，帮助开发者将普通页面升级为高品质产品级界面。
立即学习“前端免费学习笔记（深入）”；
- 推荐让
Prettier做格式化（更稳定），ESLint只做代码质量检查：在 VSCode 设置里关掉eslint.format.enable，打开editor.formatOnSave - 同时安装
eslint-config-prettier（需 npm 安装到项目里），并在.eslintrc.js的extends中加入'prettier'，否则no-unused-vars这类规则仍可能和 Prettier 的printWidth冲突 - 如果用 Vue，
eslint-plugin-vue必须和vue-eslint-parser版本匹配，常见错误Failed to load parser 'vue-eslint-parser'就是因为 npm install 时没锁版本
Live Server 启动失败常见原因
点右键 → “Open with Live Server” 没反应，或浏览器打开空白页，大概率是以下几点：
- 当前文件不是
index.html：Live Server 默认只服务根目录下的index.html，其他文件要手动输路径，比如http://127.0.0.1:5500/src/main.html - 项目用了构建工具（Vite/Webpack）：别再开 Live Server，它会和
vite dev server抢 5500 端口，直接运行npx vite即可 - 防火墙拦截：Windows 用户偶尔遇到
ERR_CONNECTION_REFUSED，临时关闭防火墙或在 Live Server 设置里改端口（liveServer.settings.port） - 路径含中文或空格：VSCode 扩展对非 ASCII 路径支持不稳定，把项目移到
C:\project\这类纯英文路径下再试
真正麻烦的不是装插件，而是插件之间的隐式依赖——比如 Path Intellisense 需要项目有 jsconfig.json 或 tsconfig.json 才能识别 @/components 别名，而很多人装了就以为自动生效。动手前先看插件文档里写的“Prerequisites”，比盲目重启 VSCode 有用得多。
