需安装mdx扩展、配置文件关联为mdx语言模式、集成pretterr支持jsx格式化、启用eslint校验内联jsx；依次完成四步即可实现vscode中mdx文件的jsx高亮、补全、格式化与语法校验。
如果您在VSCode中编写MDX文件，但发现JSX语法未被正确高亮、补全或预览，则可能是由于缺少对应的语言支持或配置不完整。以下是实现MDX中JSX嵌入功能的多种配置方式：
本文运行环境：MacBook Pro，macOS Sequoia。
一、安装MDX语言扩展
VSCode原生不识别.mdx文件类型，需通过官方推荐扩展启用语法支持与智能提示。该扩展提供基础的JSX高亮、括号匹配及属性补全能力。
1、打开VSCode左侧活动栏中的扩展视图（快捷键Ctrl+Shift+X或Cmd+Shift+X）。
2、在搜索框中输入MDX，找到由Michael Novotny发布的MDX扩展（图标为橙色“M”）。
3、点击“安装”，安装完成后重启VSCode或重新加载窗口（Ctrl+Shift+P → 输入“Developer: Reload Window”并执行）。
二、配置文件关联规则
即使安装了扩展，VSCode仍可能将.mdx文件默认以纯文本或Markdown模式打开，需手动绑定语言模式以激活JSX解析能力。
1、打开任意一个.mdx文件。
2、点击右下角显示的语言模式（如“Plain Text”或“Markdown”）。
3、在弹出的输入框中输入MDX，选择“MDX”选项。
4、点击“Configure file association for '.mdx'”，在settings.json中自动添加如下行："files.associations": {"*.mdx": "mdx"}。
三、集成Prettier进行JSX格式化
MDX中混合JSX代码块时，标准Markdown格式化器无法处理标签缩进与换行逻辑，需使用支持JSX的Prettier配置确保结构清晰可读。
1、在项目根目录创建.prettierrc文件，内容包含：{"semi": true, "singleQuote": true, "jsxSingleQuote": true, "bracketSameLine": false}。
2、安装Prettier扩展（搜索“Prettier - Code formatter”并安装）。
3、在VSCode设置中搜索format on save，勾选“Editor: Format On Save”。
4、确保工作区设置中已启用MDX支持：在settings.json中添加"[mdx]": {"editor.formatOnSave": true}。
四、启用ESLint对内联JSX校验
MDX允许在{}中书写JavaScript表达式及JSX元素，ESLint可检测潜在语法错误、未声明变量及JSX props类型问题。
1、在项目中运行命令：npm install eslint @eslint/js eslint-plugin-react eslint-plugin-mdx --save-dev。
2、创建.eslintrc.cjs，配置parserOptions为{ ecmaVersion: 2022, sourceType: 'module', ecmaFeatures: { jsx: true } }。
3、在plugins数组中加入['react', 'mdx']，并在overrides中为'*.mdx'指定processor为'mdx/mjs'。
4、安装ESLint扩展并启用“ESLint: Enable”工作区设置。
