前端开发必备VSCode插件配置全攻略-VSCode-PHP中文网

eslint与prettier冲突的根源是规则职责重叠，应禁用eslint中semi、quotes等格式规则，使用eslint-config-prettier并置于extends末尾，vscode中设prettier为默认格式化器且关闭eslint自动修复。

前端开发必备vscode插件配置全攻略

ESLint + Prettier 自动修复冲突怎么解

直接开干：ESLint 和 Prettier 默认规则打架，比如 semi（分号）、quotes（引号）会互相覆盖，保存时反复来回格式化。根本原因是 ESLint 的 fix 和 Prettier 的 format 都在 editor.formatOnSave 触发，但没约定谁先谁后。

实操建议：

装 eslint-config-prettier，禁用所有和 Prettier 冲突的 ESLint 规则
在 .eslintrc.js 中 extends 加上 'prettier'（必须放最后）
settings.json 里明确指定默认格式化器："editor.defaultFormatter": "esbenp.prettier-vscode"
关掉 ESLint 的自动修复："eslint.autoFixOnSave": false，只让它标错，不修

常见错误现象：const a = 1; 保存后变 const a = 1，再保存又加回分号——就是没禁用 ESLint 的 autoFix。

Vue3 项目里 Volar 怎么配才不丢提示

Volar 不是“装了就完事”，Vue3 的 <script setup></script> 和类型推导依赖正确启用 hybridMode 和语言模式识别，否则 defineProps、defineEmits 提示全失效。

实操建议：

全局关掉旧插件：vetur 必须卸载，否则和 Volar 冲突
项目根目录建 .vscode/settings.json，写入：
"vue.experimental.enableVolar": true（VSCode 1.89+ 已内置 Volar，无需额外插件）
确保 typescript.tsdk 指向项目本地 node_modules/typescript，避免用 VSCode 自带 TS 版本
如果 props 类型不提示，检查 defineProps 是否用了泛型写法：defineProps()，而不是运行时对象写法

容易踩的坑：在 jsconfig.json 或 tsconfig.json 里漏配 "compilerOptions": { "types": ["vue"] }，会导致类型无法识别。

前端设计优化skill

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

下载

路径补全失效？Path Intellisense 和别名映射怎么联动

Path Intellisense 默认只认相对路径，遇到 @/components/Button.vue 这种别名路径，不配置就只能手动敲，补全弹窗里压根不出现。

实操建议：

在项目 jsconfig.json 或 tsconfig.json 的 compilerOptions 里加 "baseUrl": "./" 和 "paths" 映射（例如："@/*": ["src/*"]）
Path Intellisense 插件设置里勾选 path-intellisense.mappings，并填入同名映射：{"@": "src"}
如果用 Vite，还需确认 vite.config.ts 中 resolve.alias 和 tsconfig 一致，否则跳转能用、补全不行

性能影响：映射路径太多（比如几十个 alias）会让补全响应变慢，建议只配高频目录，如 @、@assets、@utils。

为什么 Error Lens 行内报错不显示

Error Lens 是靠读取 ESLint / TypeScript Server 的诊断信息渲染的，不是独立校验器。装了插件但没看到红波浪线下的文字提示，大概率是上游没输出诊断数据。

实操建议：

确认 ESLint 已启用且配置正确：eslint.enable: true，且项目有 .eslintrc.js 或 package.json 里的 eslintConfig
TypeScript 文件需开启 TS Server："typescript.preferences.includePackageJsonAutoImports": "auto"，否则 import 错误不报
检查 Error Lens 设置：errorLens.showInGutter 和 errorLens.showInStatusBar 可关可开，但核心是 errorLens.showInline 必须为 true
若只在 .vue 文件里不生效，说明 Volar 没把 template 区域的错误透出给 Error Lens，此时要换用 Volar 自带的诊断能力，或改用 Vue Language Features (Volar) 插件内置提示