ESLint与Prettier必须协同配置，否则因规则重叠（如分号、引号）导致格式循环变动；应安装eslint-config-prettier并置于.eslintrc.js的extends末尾以禁用ESLint格式规则，VSCode中设editor.defaultFormatter为esbenp.prettier-vscode且开启editor.formatOnSave。
ESLint 和 Prettier 必须配对使用，否则格式和校验会打架
单独装 ESLint 会标红未定义变量、console、重复声明等逻辑问题；单独装 Prettier 能自动把 const a=1 变成 const a = 1，但两者规则有重叠（比如分号、引号），不协调就会出现「保存一下变一种格式，再保存又变回去」的循环。
实操建议：
- 装
eslint-config-prettier，并在.eslintrc.js的extends里把它放在最后，它会关掉 ESLint 所有和格式相关的规则 - VSCode 设置里把
editor.defaultFormatter设为esbenp.prettier-vscode，同时开启editor.formatOnSave - 别在
.prettierrc里设semi: true，又在 ESLint 里开semi: ["error", "always"]——这是最常踩的坑
Path Intellisense 要配合 jsconfig.json 才能识别 @/src 别名
直接装 Path Intellisense 插件后，输入 import 时按 Ctrl+Space 只能补全相对路径（比如 ../components/Button.vue），对 @/components/Button 这类别名毫无反应。
必须手动配 jsconfig.json（TS 项目用 tsconfig.json）：
立即学习“前端免费学习笔记（深入）”；
前端设计与 UI/UX 全方位优化专家。覆盖视觉层次、排版系统、色彩理论、响应式布局、交互体验、动画动效、无障碍访问、性能优化八大维度，帮助开发者将普通页面升级为高品质产品级界面。前端设计与 UI/UX 全方位优化专家。覆盖视觉层次、排版系统、色彩理论、响应式布局、交互体验、动画动效、无障碍访问、性能优化八大维度，帮助开发者将普通页面升级为高品质产品级界面。
{
"compilerOptions": {
"baseUrl": ".",
"paths": {
"@/*": ["src/*"]
}
}
}
注意点：
- 文件必须放在项目根目录，且名字是
jsconfig.json（不是jsconfig.js或其他） - 如果用了 Vite，还要确保
vite.config.ts里也配了resolve.alias，否则运行时会报错 - 改完配置要重启 VSCode，插件不会热加载
Live Server 启动后页面不自动刷新？检查端口和 MIME 类型
Live Server 点击右下角 Go Live 后，浏览器打开页面但修改 HTML/JS 文件后没刷新，常见原因不是插件坏了，而是环境干扰。
排查步骤：
- 看终端输出的地址是不是
http://127.0.0.1:5500—— 如果是localhost，某些防火墙或 hosts 会拦截 - 打开浏览器开发者工具 → Network 标签，刷新页面，看
index.html的Response Headers里有没有Content-Type: text/html；如果是application/octet-stream，说明服务器没正确识别文件类型，需在插件设置里加"liveServer.settings.CustomBrowser": "chrome" - 确认没同时开着另一个占用了 5500 端口的服务（比如另一个
Live Server实例或本地 Node 服务）
Vue/React 开发别漏掉框架专属插件
Vue VSCode Snippets 和 ES7+ React/Redux/React-Native snippets 不只是写得快，它们生成的代码自带语义和结构约束。比如输入 vbase 回车，直接生成带 defineComponent、setup() 和 return 的完整 Vue 3 组件骨架；输入 rfc 就生成函数组件模板，连 PropTypes 或 useEffect 都预置好了。
容易忽略的细节：
- Vue 插件依赖
Vue Language Features (Volar)，不是旧版Vetur；装错会导致.vue文件语法高亮失效 - React 插件在 TSX 文件里可能不触发片段，需要检查 VSCode 设置里
files.associations是否把*.tsx关联到了typescriptreact - 这些片段默认不带注释，但可以进插件设置搜
snippets，勾选javascript.preferences.includeComments让它自动生成 JSDoc 占位符
Auto Rename Tag 在 JSX 里生效，但遇到 v-if 或 ngIf 就失灵；Bracket Pair Colorizer 对 JS 的大括号有用，可一旦嵌套了模板字符串里的 ${}，颜色就乱套——这些边界情况，得靠实际编码时多试几次才能摸清。 
