应安装官方MJML插件、配置本地MJML CLI环境、启用预览功能、设置自定义编译路径，并禁用冲突的HTML格式化插件。
如果您在 Visual Studio Code 中使用 MJML 开发响应式邮件模板时遇到语法高亮缺失、实时预览失败或代码补全无效等问题，则可能是由于 MJML 插件未正确配置或与其他扩展存在冲突。以下是解决此问题的步骤：
本文运行环境：MacBook Air，macOS Sequoia。
一、安装官方 MJML 插件
VSCode 官方市场中由 mjml 团队维护的插件提供语法支持、格式化和基础校验功能，是开发响应式邮件模板的基础依赖。
1、打开 VSCode，点击左侧活动栏的扩展图标（或按 Cmd+Shift+X）。
2、在搜索框中输入 MJML，找到名称为 MJML Language Support 的插件（发布者为 mjml）。
3、点击“安装”，安装完成后重启 VSCode。
二、配置本地 MJML CLI 环境
MJML 插件需调用本地安装的 mjml 命令行工具以实现 HTML 实时编译与错误提示，仅安装插件无法启用预览功能。
1、确保系统已安装 Node.js（v18 或更高版本）。
2、在终端中执行命令：npm install -g mjml。
3、验证安装是否成功：运行 mjml --version，输出版本号即表示可用。
三、启用 MJML 预览功能
插件内置的预览面板可将 .mjml 文件即时渲染为 HTML，便于快速验证响应式结构在不同设备下的表现。
1、在 VSCode 中打开一个后缀为 .mjml 的文件。
2、右键编辑器空白区域，选择 Preview MJML。
3、预览窗口将在右侧以分栏形式展开，支持滚动查看渲染结果。
四、配置自定义 MJML 编译路径
当全局 mjml 命令不可访问（如使用 nvm 管理多版本 Node）时，插件可能无法自动定位 CLI，需手动指定可执行文件路径。
1、进入 VSCode 设置（Cmd+,），搜索 mjml.executablePath。
2、点击“编辑 in settings.json”，在配置对象中添加键值对："mjml.executablePath": "/Users/yourname/.nvm/versions/node/v18.19.0/bin/mjml"。
3、替换路径中的 yourname 为当前用户名，并确认该路径下确实存在 mjml 可执行文件。
五、禁用冲突的 HTML 格式化插件
部分 HTML 格式化扩展（如 Prettier、Beautify）会在保存 .mjml 文件时错误应用 HTML 规则，导致 MJML 特有标签被破坏或缩进异常。
1、打开设置，搜索 html.format.enable。
2、取消勾选该选项，或在 settings.json 中添加："[mjml]": {"html.format.enable": false}。
3、重启 VSCode 后，MJML 文件将不再受全局 HTML 格式化规则影响。
