应配置editor.defaultFormatter为esbenp.prettier-vscode，禁用prettier.eslintIntegration，安装eslint-config-prettier并在.eslintrc.cjs中extends末尾添加"prettier"，确保ESLint只检查质量、Prettier专管格式。
怎么让保存自动格式化不和 ESLint 冲突
直接开 settings.json 配置，别只点勾选框——很多新手装了 Prettier 和 ESLint 后发现 Ctrl+S 一保存就报错或格式乱跳，根本原因是两者规则打架。
- 必须加
"eslint.configurations": ["eslint:recommended"]并安装eslint-config-prettier包（项目级） -
"editor.defaultFormatter"设为"esbenp.prettier-vscode"，但关掉"prettier.eslintIntegration"（已废弃，新版无效） - 在项目根目录放
.eslintrc.cjs，明确写extends: ["eslint:recommended", "prettier"] - 若用 Vue/React，额外加
"plugin:vue/vue3-recommended"或"plugin:react/recommended"，否则组件语法会标红
为什么 Live Server 启动后页面不刷新
不是插件坏了，大概率是路径或服务配置没对。Live Server 默认只监听当前打开的文件所在目录，且不处理构建产物（如 dist/）。
- 右下角点击
Go Live前，确保你打开的是项目根目录（含index.html），不是某个子文件夹 - 如果用了 Webpack/Vite，别指望 Live Server 能热更新打包后的代码——它只适合纯 HTML/CSS/JS 原生开发
- 端口冲突时，手动改
"liveServer.settings.port": 3000，别留默认5500（尤其 macOS 用户常被占用） - 遇到跨域请求失败，加
"liveServer.settings.AdvanceCustomBrowserUrl": "http://localhost:3000"强制指定地址
如何让 import 语句自动补全 + 避免大包误引
靠人眼扫 node_modules 太慢，也容易引入巨无霸库（比如只用一个工具函数却引了整个 Lodash）。
前端设计优化skill
下载
前端设计与 UI/UX 全方位优化专家。覆盖视觉层次、排版系统、色彩理论、响应式布局、交互体验、动画动效、无障碍访问、性能优化八大维度，帮助开发者将普通页面升级为高品质产品级界面。前端设计与 UI/UX 全方位优化专家。覆盖视觉层次、排版系统、色彩理论、响应式布局、交互体验、动画动效、无障碍访问、性能优化八大维度，帮助开发者将普通页面升级为高品质产品级界面。
- 装
Import Cost插件，它会在import行右侧实时显示包体积（如lodash-es: 12.4 kB） - 配
Auto Import（非官方，推荐Auto Importby steoates），开启"autoImport.autoImportModule": true，敲useEffe就能补全useEffect并自动加import - Vue 项目务必装
Volar（不是 Vetur），它才能识别defineProps类型并支持import智能推导 - 禁用
"javascript.suggest.autoImports": false，否则 TS 项目里类型导入会重复、混乱
调试时断点不生效？先查 launch.json 配置漏项
VSCode 调试不是“装个插件就能断”，Chrome/Firefox 插件只是桥梁，真正起作用的是 .vscode/launch.json 的映射逻辑。
立即学习“前端免费学习笔记（深入）”；
- 必须设
"webRoot": "${workspaceFolder}"，否则源码路径找不到，断点灰掉 - 用构建工具（Vite/Webpack）时，
"sourceMaps": true是基础，但还要加"sourceMapPathOverrides"映射真实路径，例如："webpack:///src/*": "${webRoot}/src/*" - Chrome 调试需提前打开开发者工具 → 设置 → 「Enable local file access」，否则
file://协议下断点无效 - React/Vue 组件内断点失效？检查是否启用了
debugger;语句，或在devtools中勾选「Pause on caught exceptions」
Bracket Pair Colorizer 对嵌套 JSX 有用，但对纯 CSS 几乎无感；Turbo Console Log 省去手敲 console.log，可一旦忘了删，上线前扫描日志就成漏网之鱼——这些细节，比插件名字重要得多。 
