mdx 文件在 vscode 中需手动配置语言模式为 mdx、安装 unifiedjs.vscode-mdx 和 esbenp.prettier-vscode 扩展，并设置 "files.associations": {"*.mdx": "mdx"} 与 "prettier.parser": "mdx"，否则 jsx/esm 无法高亮或格式化；内置 markdown 预览不支持组件渲染，须依赖 vite 等 dev server 实现运行时预览。
MDX 文件在 VSCode 默认不带语法高亮和组件预览支持，必须手动配置语言模式 + 安装对应扩展 + 调整设置，否则 import、export、JSX 标签（如 <button></button>）会显示为纯文本或报错，预览也完全不可用。
确认文件关联为 mdx 语言模式
VSCode 不会自动把 .mdx 文件识别为 MDX 类型，它常 fallback 到 markdown 模式，导致 JSX 部分被忽略。必须显式绑定：
- 打开任意
.mdx文件 → 点击右下角语言模式（如显示 “Markdown”）→ 点击后选择MDX - 或直接按
Ctrl+Shift+P（macOS 为Cmd+Shift+P），输入Change Language Mode→ 选中MDX - 要永久生效：在
settings.json中加这一行："files.associations": { "*.mdx": "mdx" }
安装 esbenp.prettier-vscode 和 unifiedjs.vscode-mdx
仅靠语言模式还不够。官方推荐的 unifiedjs.vscode-mdx 扩展提供完整 MDX 语法解析（包括嵌入 JSX、ESM 语句、TS 类型），而 prettier 插件需启用对 mdx 的格式化支持：
- 安装
unifiedjs.vscode-mdx（注意作者是unifiedjs，不是旧版mdx-js） - 确保
esbenp.prettier-vscode已启用，并在settings.json中添加："prettier.parser": "mdx", "prettier.extensions": ["*.mdx"]
- 禁用冲突扩展：比如
DavidAnson.vscode-markdownlint对.mdx文件可能报错，建议用unifiedjs.vscode-mdx自带的 lint 规则替代
mdx 预览插件不能依赖默认 Markdown 预览
VSCode 内置的 Markdown Preview 完全不解析 JSX/JS 表达式，打开预览只会看到原始标签（如 <counter></counter>），而不是渲染结果。真需求是「实时组件渲染」，这需要额外工具链：
- VSCode 本身不支持运行时渲染 MDX 组件，所谓“预览”实际是启动一个本地 dev server（如
@mdx-js/rollup或vite-plugin-mdx） - 推荐做法：用终端运行
vite dev（项目已配vite-plugin-mdx），然后在浏览器中打开 —— VSCode 只负责编辑和语法高亮 - 如果坚持要在编辑器内看效果，可尝试
shd101wyy.markdown-preview-enhanced，但它对MDX支持有限，且无法执行组件逻辑，仅适合静态内容
真正卡住人的地方往往不是插件没装，而是语言模式没切对，或者 prettier 没配 "prettier.parser": "mdx" 导致保存时崩掉。另外，别指望 VSCode 原生预览能跑 React 组件 —— 它连 import 都当注释处理。
