prettier保存即格式化是底线，需两步：开启editor.formatonsave并设editor.defaultformatter为esbenp.prettier-vscode；若共存eslint，须引入eslint-config-prettier避免规则冲突。

Prettier 保存即格式化，不是“可选”，是底线

很多新人装了 Prettier 却没开自动格式化，结果还是手动调缩进、补分号、对齐括号——等于白装。
关键动作只有两步：

• 在设置里搜 Format On Save，勾选它
• 再搜 Default Formatter，选 esbenp.prettier-vscode

别信“先写完再统一格式”的说法。真实项目里，没人会等你手动整理 300 行 JSX；PR 被拒的常见理由就是“格式不一致”。
注意：如果同时装了 ESLint，要加装 eslint-config-prettier 并在 .eslintrc.js 里 extends 它，否则 ESLint 和 Prettier 会打架，比如一个要分号、一个不要。

Live Server 不只是刷新页面，而是启动一个最小可用开发环境

Open in Browser 只能打开文件，但不会监听变化、不能跨设备访问、也不支持 fetch 请求（因为是 file:// 协议）。而 Live Server 启动的是 @#@#@#@#@#@#@#@#@#@0，这才是真正能跑通 Ajax、WebSocket、Service Worker 的起点。
默认端口冲突？直接改配置：

• 打开设置 → 搜 liveServer.settings.CustomBrowser，设为 chrome 或 edge
• 搜 liveServer.settings.Port，填个空闲端口，比如 3001
• 还可以加 liveServer.settings.Root 指定根目录，避免每次点错文件夹

别用右键菜单点“Open with Live Server”——按 Ctrl+Shift+P 输入 Live Server: Open with Live Server 更稳，尤其在多窗口时不易误触。

Auto Rename Tag 在 Vue/JSX 里容易失效，原因很具体

前端美化

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

下载

它默认只开 html 语言支持，但 Vue 单文件组件里的 <template></template> 是 vue 语言模式，JSX 文件是 javascriptreact 或 typescriptreact。不手动配，改 <div> 就不会同步改 <code>