VSCode怎么配置前端开发环境_VSCode HTML CSS JS开发教程【详解】

VSCode 装完不配就写前端，很快会遇到一系列让人抓狂的问题：保存不格式化、标签改了不自动同步、改完代码要手动刷新页面、ESLint 报错却不会自动修复。很多人以为是插件装少了，其实不然。核心问题不在插件多不多，而在几个关键点是否对齐：本地依赖有没有、插件行为有没有明确归属、格式化和校验有没有分清职责。

Live Server 启动后页面不自动刷新？先检查这两个极低但高频的配置陷阱

常见现象是点击 Go Live 后浏览器打开了页面，但你后续保存 HTML 或 CSS 文件，页面却毫无反应，仿佛死掉了一样。这可不是插件坏了，而是两个几乎人人都可能踩过的坑：

• 第一个坑：liveServer.settings.donotShowInfoMsg 这个配置。如果它被设为 true，Live Server 会静默启动，既不提示端口号，也不提示路径，你甚至都不知道它到底有没有跑起来。所以，建议保持默认，或者显式地把它设为 false，让插件别那么“低调”。
• 第二个坑：端口被占用了。比如之前没关干净的 npm run dev，或者另一个 VSCode 窗口还在跑着。Live Server 默认尝试 5500 端口，失败后可能静默地 fallback 到其他端口，但浏览器地址栏里还是旧的端口号，自然也就不会刷新了。

还有一个细节：Live Server 只监听已经保存的文件（Ctrl+S）的变化。如果编辑了内容但没保存，它是不会触发重载的。判断它是否启动成功也很简单，看右下角状态栏有没有显示 Live Server: http://127.0.0.1:5500，如果没显示，那就是没启动成功。

ESLint 报红但按 Ctrl+S 不修复？别再留恋 eslint.autoFixOnSa ve 了

VSCode 旧版设置里常用的 eslint.autoFixOnSa ve，在 2024 年后已经被标记为 deprecated（废弃）了。现在必须用新机制，否则 ESLint 检出的问题只会标红，不会自动修复，让人看着干着急。

立即学习“前端免费学习笔记（深入）”；

正确的做法是：

• 在工作区 .vscode/settings.json 中，把所有 eslint.autoFixOnSa ve 相关字段都删掉，一个不留。
• 然后添加下面这段配置：

  { "editor.codeActionsOnSa ve": { "source.fixAll.eslint": true }, "editor.formatOnSa ve": false }

• 这里有个关键点：必须同时把 editor.formatOnSa ve 设为 false。否则，Prettier 和 ESLint 会抢着格式化，导致样式反复横跳，最后谁都不听谁的。

最后，别忘了在你的项目根目录下本地安装 eslint（npm install eslint --sa ve-dev）。VSCode 的 ESLint 插件默认不读全局版本，如果你没装，它只会报错，不会干活。

HTML 标签重命名失效？Auto Rename Tag 只认“纯种” HTML

你在 .vue 或 .jsx 文件里修改

"auto-rename-tag.activationOnLanguage": ["html", "xml", "php", "ja vascriptreact"]