打造极致前端开发环境的VSCode插件配置-VSCode-PHP中文网

eslint与prettier不打架的关键是：本地安装依赖、eslint-config-prettier置于extends末位、禁用javascript.validate.enable、关闭formatonsave而启用codeactionsonsave触发eslint自动修复。

打造极致前端开发环境的vscode插件配置

直接说结论：插件不是越多越好，真正影响开发体验的只有 5 类核心能力——语法校验、格式化、框架支持、路径补全、标签同步。其他插件要么冗余，要么掩盖了配置问题。

ESLint + Prettier 怎么配才不打架

常见错误现象：保存后缩进变两格又变四格、'quotes' is defined but never used、ESLint fix on save 不生效。本质是规则冲突 + 插件职责错位。

必须本地安装 eslint 和 prettier（不是全局），VS Code 的 ESLint 插件默认不 fallback 到全局版本
eslint-config-prettier 必须出现在 .eslintrc.js 的 extends 数组末尾，顺序错了就白装
禁用 VS Code 自带的 JS/TS 校验："javascript.validate.enable": false，否则会和 ESLint 报重叠错误
不要开 editor.formatOnSave，改用 editor.codeActionsOnSave 触发 ESLint auto-fix，否则 Prettier 会覆盖 ESLint 的修复结果

Vue3 项目为什么 Volar 比 Vetur 强

Vue3 的 Composition API 和 <script setup></script> 语法改变了类型推导逻辑，Vetur 基于旧版 Vue2 解析器，无法正确处理响应式声明、defineProps 类型、模板内表达式类型检查。

前端美化

使用此技能可创建独具特色、具备生产级质量的前端界面，设计品质高。当用户要求构建网页组件、页面、产物、海报或应用程序时（例如：网站、落地页、仪表盘、React 组件、HTML/CSS 布局，或对任意 Web UI 进行样式优化与视觉美化），请启用该能力。输出需为富有创意、精雕细琢的代码与 UI 设计，避免千篇一律的 AI 风格。

下载

Volar 启用 hybridMode: true 才能同时支持 <script></script> 和 <script setup></script> 的类型跳转
props 命名需用 kebab-case（如 user-name）才能被 Volar 正确识别，驼峰写法在模板中会失效
如果用了 unplugin-vue-components 自动导入，Volar 需额外配置 "vue.autoImportComponent": true
Volar 不兼容老项目里的 vue-class-component，遇到就只能降级或重构

Path Intellisense 为什么总找不到 @/components

路径别名（alias）不是插件自动识别的，它依赖项目级配置文件，插件只是读取并补全。

必须在 jsconfig.json 或 tsconfig.json 中明确定义 "paths"，例如：{"@/*": ["src/*"]}
别名前缀不能只写 @，必须带斜杠，@components 不会被识别，@/components 才行
如果项目用 Vite，vite.config.ts 里也得同步配置 resolve.alias，否则运行时会报错，但 Path Intellisense 不报错——这是最隐蔽的坑
插件默认不扫描 node_modules 下的路径，想补全第三方包路径得手动加 "path-intellisense.mappings" 配置项