必须安装Astro官方插件并配置astro.config.mjs/ts、tsconfig.json中"types": ["astro"]及"include"项，再配合Path Intellisense和@prettier/plugin-astro，才能实现高亮、补全、跳转与格式化。
Astro 官方插件必须装，但光装它远远不够——VSCode 里 .astro 文件能高亮、补全、跳转、报错，全靠它和配套配置协同工作；缺一环，就卡在“看起来装了，实际不生效”。
怎么确认 Astro 插件已正确激活
装完插件后别急着写代码，先验证是否真正接管了文件。打开一个 .astro 文件，看 VSCode 右下角状态栏语言模式：如果是 Plain Text 或 HTML，说明没生效。必须显示为 Astro 才算成功。
- 快捷键
Ctrl+K Ctrl+M（Win/Linux）或Cmd+K Cmd+M（Mac）调出语言模式面板，手动选Astro - 若选不了，检查项目根目录是否存在
astro.config.mjs或astro.config.ts——Astro 插件依赖该文件启动语言服务器 - 用
npm list astro确认本地已安装astro包（不是全局安装），否则类型服务无法加载
为什么 TypeScript 提示总报 “Cannot find module ‘astro’”
这是 VSCode 的 TS 语言服务没读到 node_modules/astro 里的类型定义，和终端里 npm run dev 能跑完全不冲突。
- 在 VSCode 命令面板（
Ctrl+Shift+P）运行Developer: Restart TS Server，强制重载类型系统 - 如果用
pnpm，检查pnpm store是否被 VSCode 排除；可在.vscode/settings.json加："typescript.preferences.includePackageJsonAutoImports": "auto" - 确保
tsconfig.json中有"types": ["astro"]，且"include"包含src/**/*和astro.config.*
组件路径补全失效？不是插件问题，是路径映射没配
Astro 组件导入路径是相对的，但 VSCode 默认只对 .js/.ts 做路径智能提示，.astro 文件需额外支持。
PigX UI 前端开发
下载
PigX UI Pro 前端开发指南 - Vue 3 + TypeScript + Element Plus。当用户提到 PigX UI、PigX 前端、lgb-mgui 项目、Vue 3 企业级后台开发、Element Plus 后台开发时使用此技能。
立即学习“前端免费学习笔记（深入）”；
- 在
tsconfig.json或jsconfig.json中确保没有把src/**/*.{astro,mdx}写进"exclude" - 推荐安装
Path Intellisense插件——它会主动扫描src/下所有文件，包括.astro，补全路径时才真正可用 - 若仍不提示，检查
"files.associations"设置是否已加："*.astro": "astro"（放在.vscode/settings.json里）
Prettier 格式化 .astro 文件失败的三个硬条件
prettier 默认不识别 .astro，必须同时满足三件事，保存时格式化才会动起来。
- 已安装
@prettier/plugin-astro：npm install -D @prettier/plugin-astro -
prettier.config.js或.prettierrc中有"overrides"配置：{"files":"*.astro","options":{"parser":"astro"}} - VSCode 设置中
"editor.defaultFormatter"设为 Prettier（不是 ESLint 或内置 HTML 格式化器），且"editor.formatOnSave": true
最容易被忽略的是：Astro 插件的格式化能力（astro.format.enable）和 Prettier 是两套系统，混用容易冲突；建议统一用 Prettier + @prettier/plugin-astro，关掉 Astro 插件的格式化开关。
