前端开发必备VSCode插件详细指南-VSCode-PHP中文网

eslint报错但不自动修复，是因为默认仅静态检查，必须手动配置"editor.codeactionsonsave": {"source.fixall.eslint": true}，且需项目有有效配置文件、本地依赖已安装、规则本身支持fix。

前端开发必备vscode插件详细指南

ESLint 为什么报错但不自动修复

默认安装 ESLint 插件后，它只做静态检查、标红提示，eslint --fix 不会自动运行。必须手动配置保存时触发修复，或启用编辑器级自动修复。

在 settings.json 中开启："editor.codeActionsOnSave": { "source.fixAll.eslint": true }
确保项目根目录有有效的 .eslintrc.js 或 .eslintrc.cjs，且已安装对应依赖（如 eslint、@eslint/js）
若用 Prettier，需加 eslint-config-prettier 关闭格式类规则，否则 --fix 可能和 Prettier 冲突
部分规则（如 no-console）默认不可自动修复，需查文档确认该规则是否支持 fix

Prettier 保存后格式没变化

常见原因是格式化程序未设为默认，或文件类型未被 Prettier 支持识别。

前端设计优化skill

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

下载

检查 settings.json 是否设置了："editor.defaultFormatter": "esbenp.prettier-vscode"
确认当前文件语言模式正确：VSCode 右下角应显示 JavaScript、TypeScript、Vetur（.vue）等，而非 Plain Text
.prettierignore 中若误写了 src/** 或 **/*.ts，会导致对应文件跳过格式化
Vue 文件需配合 Volar（Vue 3）或 Vetur（Vue 2），单独装 Prettier 对 <template></template> 和 <style></style> 块无效

路径跳转失效：@/xxx 点不开

VSCode 默认不认识 @ 别名，需要两层配置才能支持 Ctrl+Click 跳转。

先在项目根目录 jsconfig.json 或 tsconfig.json 中声明路径映射："compilerOptions": { "baseUrl": ".", "paths": { "@/*": ["src/*"] } }
再安装插件 Path Intellisense 或 Alias Navigator（后者专治跳转）；Path Intellisense 主要补全，跳转能力弱
重启 VSCode 或执行 Developer: Reload Window，否则新配置不生效
若用 Vite，还需确认 vite.config.ts 中 resolve.alias 与 tsconfig.json 一致，否则类型检查和跳转可能不一致

Live Server 修改 HTML 后浏览器不刷新

不是所有 HTML 都能被 Live Server 监听，尤其当项目结构或启动方式不标准时。

必须从「文件夹」打开项目，而非单个 HTML 文件；右下角状态栏显示 Go Live 按钮才表示插件就绪
检查插件设置："liveServer.settings.donotShowInfoMsg": false，开启提示可看到端口和根路径信息
若用 Webpack/Vite 开发服务器，Live Server 会冲突——它只适合纯静态页或原型阶段，上线前务必停用
某些安全策略（如 Chrome 的 chrome://flags/#unsafely-treat-insecure-origin-as-secure）会影响本地 file:// 协议下的自动刷新，建议始终用 http://127.0.0.1:xxxx

复杂点在于每个插件都依赖上下文：项目配置、语言服务、文件类型识别、甚至 VSCode 版本。少一个环节，功能就断链。别指望装完就跑，得一个个验证行为是否符合预期。