ESLint + Prettier 组合必须启用自动修复，否则 ESLint 就是半残废；需设 editor.formatOnSave: true、启用插件“Enable auto fix on save”，用 eslint-config-prettier 关闭冲突规则，并确保根目录有 .eslintrc.js 或 .eslintrc.cjs。
ESLint + Prettier 组合必须启用自动修复
不配自动修复的 ESLint 就是半残废。保存时自动修正缩进、分号、引号、空行等格式问题，才能让团队代码真正统一。只靠人工检查或手动运行 eslint --fix 会漏掉大量低级错误，尤其在快速迭代中。
-
editor.formatOnSave必须设为true，否则 Prettier 不生效 - ESLint 插件需勾选「Enable auto fix on save」，否则
eslint --fix不会在保存时触发 - 两者冲突时优先用
eslint-config-prettier关闭 ESLint 的格式类规则，别硬调顺序 - 项目根目录必须有
.eslintrc.js或.eslintrc.cjs，纯 JSON 不支持动态规则扩展
Volar 是 Vue 3 项目的唯一语言支持插件
还在用 Vetur？Vue 3 的 <script setup>、响应式语法推导、类型提示全挂掉。Volar 基于 @vue/reactivity 实现按需计算，TS 类型检查准确率远高于 Vetur，CPU 占用也更低。
- 安装后务必禁用 Vetur，否则两个插件抢夺 .vue 文件控制权，导致语法高亮错乱、跳转失效
- 需要配合
jsconfig.json或tsconfig.json中的"compilerOptions": {"types": ["volar"]}才能启用完整类型支持 - 如果
ref()变量悬停看不到类型，大概率是没开"vueCompilerOptions": {"target": "3.4"}（根据你用的 Vue 版本调整）
Path Intellisense 要配 jsconfig.json 才能跳转别名路径
写了 import api from '@/api/user' 却 Ctrl+点击无效？不是插件坏了，是你没告诉它 @ 指向哪。Path Intellisense 默认只认相对路径，@ 这种 alias 是“黑盒”，必须显式声明。
前端设计优化skill
下载
前端设计与 UI/UX 全方位优化专家。覆盖视觉层次、排版系统、色彩理论、响应式布局、交互体验、动画动效、无障碍访问、性能优化八大维度，帮助开发者将普通页面升级为高品质产品级界面。前端设计与 UI/UX 全方位优化专家。覆盖视觉层次、排版系统、色彩理论、响应式布局、交互体验、动画动效、无障碍访问、性能优化八大维度，帮助开发者将普通页面升级为高品质产品级界面。
- 在项目根目录新建
jsconfig.json，写入{"compilerOptions": {"baseUrl": ".", "paths": {"@/*": ["src/*"]}}} - 改完配置要重启 VSCode，热加载不识别新
paths - 如果用了
~/或#/等其他别名，全部列进paths，不能只写一个 - Webpack/Vite 别名配置（如
resolve.alias）和jsconfig.json必须严格一致，否则跳转成功但运行报错
Debugger for Chrome 需要匹配 launch.json 的 sourceMap 路径
断点打了却不停？常见原因是生成的 sourcemap 路径和 launch.json 里 webRoot 或 sourceMapPathOverrides 对不上。Chrome 调试器找不到原始 TS/JSX 文件位置，自然无法映射。
立即学习“前端免费学习笔记（深入）”；
- Vue/React 项目推荐用
"webRoot": "${workspaceFolder}"，而不是"${workspaceFolder}/src" - 若用 Vite，确保
vite.config.ts中build.sourcemap设为true，开发模式默认已开 - 遇到
Could not load content for webpack:///...错误，就在 launch.json 加"sourceMapPathOverrides": {"webpack:///src/*": "${webRoot}/src/*"} - 修改 launch.json 后不用重启 VSCode，但必须重新点击「开始调试」启动新会话
