前端工程师必装的VSCode插件及用途-VSCode-PHP中文网

live server 页面不刷新的根本原因是未在正确上下文启动服务：必须通过“file → open folder”打开整个项目目录，而非单个html文件；仅对已保存的.html文件生效，且默认监听.html/.css/.js文件变更，不支持.scss/.ts等源码文件直接刷新。

前端工程师必装的vscode插件及用途

Live Server 启动本地服务时页面不刷新

改完 HTML/CSS/JS 保存后浏览器没反应，大概率是没在正确的上下文里启动服务。Live Server 只对当前打开的文件夹根目录生效，不是单个文件——必须用 File → Open Folder 打开整个项目目录，再右键 HTML 文件点 Open with Live Server。

常见坑点：

直接双击打开 HTML 文件（路径是 file:/// 协议），Live Server 不会接管
端口被占用时默认失败但不报错，可在设置里把 liveServer.settings.port 改成 0 启用随机端口
如果项目用了构建工具（如 Vite、Webpack），别用 Live Server，它不处理模块解析和 HMR

ESLint + Prettier 冲突导致格式化乱掉

两者都做代码格式化，但规则打架：ESLint 关注逻辑错误和可维护性，Prettier 只管样式。不协调的话，保存一次可能触发两轮格式化，const a=1 被 ESLint 加空格，又被 Prettier 删掉，最后卡在中间态。

正确做法是让 ESLint 管“对不对”，Prettier 管“好不好”：

前端设计优化skill

前端设计与 UI/UX 全方位优化专家。覆盖视觉层次、排版系统、色彩理论、响应式布局、交互体验、动画动效、无障碍访问、性能优化八大维度，帮助开发者将普通页面升级为高品质产品级界面。前端设计与 UI/UX 全方位优化专家。覆盖视觉层次、排版系统、色彩理论、响应式布局、交互体验、动画动效、无障碍访问、性能优化八大维度，帮助开发者将普通页面升级为高品质产品级界面。

下载

装插件 esbenp.prettier-vscode 和 dbaeumer.vscode-eslint
在 VSCode 设置里关掉 editor.formatOnSave，只开 editor.codeActionsOnSave 并设为 { "source.fixAll.eslint": true }
加 eslint-config-prettier 到项目 ESLint 配置里，禁用所有和 Prettier 重叠的规则

Volar 在 Vue 3 `<script setup></script>` 中跳转失败

Volar 是 Vue 3 官方推荐的语言支持插件，但它默认启用“Take Over Mode”，会停用 TypeScript 插件。一旦项目里有 .ts 或 .d.ts 文件混用，类型推导和跳转就断掉。

解决方法很具体：

按 Ctrl+Shift+P 输入 Developer: Toggle Developer Tools，看控制台有没有 Volar: failed to resolve tsconfig 报错
确认项目根目录有 tsconfig.json，且 compilerOptions.types 包含 vue
在 VSCode 设置里搜 volar.stronglyTyped，勾选它；再搜 volar.autoInsertDotValue，关掉（避免模板中自动补全 .value）

Quokka 运行时报 `ReferenceError: require is not defined`

Quokka 默认用 Node.js 运行环境，但前端项目常依赖浏览器全局对象（window、document）或 ESM 模块。直接跑 import { foo } from './utils' 就会崩。

分场景处理：

纯算法/工具函数测试：在文件顶部加 // @ts-nocheck + // @quokka {"env": {"node": true}}，强制走 CommonJS
Vue/React 组件逻辑片段：改用 // @quokka {"env": {"browser": true}}，并手动 mock window 和 document
想测真实组件渲染？别用 Quokka，上 Vitest 或 Playwright

真正卡住人的往往不是“该装什么”，而是“装了之后为什么不动”。比如 Volar 的 Take Over Mode、Quokka 的执行环境、ESLint 和 Prettier 的职责边界——这些细节不调清楚，插件反而变成干扰源。