VSCode中必装的前端开发插件清单分享-VSCode-PHP中文网

eslint 和 prettier 必须配对启用：eslint 负责逻辑错误与代码质量检查（如未使用变量、console 漏删），prettier 专司格式化（缩进、引号、分号等）；单独启用任一工具均无法覆盖完整规范需求。

vscode中必装的前端开发插件清单分享

ESLint 和 Prettier 必须配对启用，不能只装一个

单独装 ESLint 会报错但不格式化；只装 Prettier 则完全不管变量未使用、console 漏删、隐式全局等逻辑问题。两者定位不同：ESLint 是质量守门员，Prettier 是排版整容师。

常见错误现象：保存后代码没变样 → 检查是否设置了 "editor.formatOnSave": true 且 "editor.defaultFormatter" 指向了 esbenp.prettier-vscode；ESLint 报红但右键无 Fix all auto-fixable problems → 确认项目根目录有 .eslintrc.js 或 eslint.config.js，且已安装对应插件依赖（如 eslint-plugin-vue）。

必须在 settings.json 中关闭 Prettier 与 ESLint 的规则冲突：加一行 "eslint.configFile": "./eslint.config.js"（v9+ 新配置方式），并安装 eslint-config-prettier
Vue3 项目建议扩展 "extends": ["plugin:vue/vue3-recommended"]，React 项目用 plugin:react/recommended
不要依赖插件自带的“快速修复”按钮，优先用 Ctrl+Shift+P → ESLint: Fix all auto-fixable problems 手动触发

别名路径跳转失效？不是插件问题，是配置没对齐

@/components/Button.vue 点不了、跳不过去，90% 是因为 jsconfig.json 或 tsconfig.json 里的 baseUrl 和 paths 没写对，或者 VSCode 没重载 TS 服务。

典型错误：写了 "@/*": ["src/*"] 却漏了 "baseUrl": "./"；或用了 Vite 但 tsconfig.json 里没包含 "include": ["src/**/*"]。

前端设计优化skill

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

下载

检查 tsconfig.json 是否含 "compilerOptions": { "baseUrl": "./", "paths": { "@/*": ["src/*"] } }
改完配置后，必须执行 Ctrl+Shift+P → TypeScript: Restart TS server，否则跳转永远不生效
如果用的是 @ 别名但项目是 JS（非 TS），需额外装插件 lihuiwang.vue-alias-skip 并手动配置别名映射

Live Server 启动后页面不热更新？多半是文件监听范围错了

Live Server 默认只监听当前打开的 HTML 文件及其同级资源，不会自动感知 src 下的 Vue/React 组件变更。它本质是个静态服务器，不是开发服务器。

错误现象：改了 App.vue，浏览器没刷新 → 这不是插件 bug，是用途误用。它适合纯 HTML/CSS/JS 原生小 demo，不适合现代前端工程。

确认你当前打开的文件是 index.html（不是 App.vue 或 main.ts），且该文件真实存在于项目根目录或当前工作区
如果项目用了 Vite/Webpack，直接关掉 Live Server，用 npm run dev 启动官方 dev server —— 它才支持 HMR（模块热替换）
需要临时预览单个 HTML 文件时，右键菜单选 Open with Live Server，别点底部状态栏的 Go Live（它可能绑定到错误工作区）

AI 补全类插件（Copilot / Roo Code）要设好作用域，否则污染代码

AI 插件默认对所有语言、所有文件生效，但你在写 .gitignore 或 README.md 时让它补全 JS 语法，结果生成一堆 const 和花括号 —— 这不是模型弱，是作用域没锁死。

真实影响：补全建议插入位置错乱、注释被覆盖、敏感配置文件被改写。

在 settings.json 中按语言禁用：例如 "github.copilot.enable": { "plaintext": false, "markdown": false, "json": false }
对 .env 类文件，直接在文件顶部加注释 // copilot-disable（部分插件识别该指令）
Roo Code 等本地模型插件，首次运行必须手动指定项目根目录，否则它会把整个磁盘当上下文，响应慢且易出错

真正卡住人的，从来不是插件装不装，而是装完之后没验证配置是否生效、没确认作用域是否收窄、没区分清楚「静态预览」和「开发服务器」的边界。这些地方一松懈，效率反而比不用插件还低。