vscode无原生html→jsx转换功能，需依赖auto-import-jsx或html-to-jsx等扩展手动触发；二者均不处理script/style块及模板语法，转换后需人工校验语义与嵌套合法性。

VSCode 里没有原生的“HTML → JSX”一键转换功能

VSCode 本身不提供 HTML 到 JSX 的自动语法转换，因为这是跨语言结构重写，不是简单替换。你看到的“一键转换”效果，基本都依赖第三方扩展，且它们的实现逻辑、覆盖场景和可靠性差异很大。

推荐用 auto-import-jsx 或 html-to-jsx 扩展（但要注意限制）

目前较稳定的两个选择是：auto-import-jsx（轻量，专注标签转换）和 html-to-jsx（功能更全，支持属性映射、事件重命名）。安装后需手动触发命令，不是保存即转。

• auto-import-jsx 对 div、span、class→className、for→htmlFor 等基础转换较准，但不处理内联样式或模板表达式
• html-to-jsx 支持自定义属性映射规则（比如把 v-if 转成三元），但需在 .vscode/settings.json 中配 "html-to-jsx.rules"，否则默认只做标准 HTML 属性转换
• 两者都不处理 <script></script> 或 <style></style> 块，也不解析 Vue/React 模板语法（如 {{ }}、v-bind:）

粘贴 HTML 后按 Ctrl+Shift+P 调出命令面板，搜 Convert HTML to JSX

这是 html-to-jsx 扩展注册的主命令。选中要转换的 HTML 片段（不要全选文件），再执行该命令——它会把选中内容原地替换成 JSX 格式，包括引号统一为双引号、自闭合标签补斜杠、属性名驼峰化等。

VSCode

避免常见的 VSCode 错误——设置冲突、调试器配置和扩展冲突。

下载

• 如果转换后出现 Unexpected token 错误，大概率是原始 HTML 含非法嵌套（如 <p></p> <div></div>），JSX 解析器比 HTML 更严格
• 含 JS 表达式的 HTML（如 <div onclick="doSomething()">）会被转成 <code>onClick={() => doSomething()}，但不会自动提取函数声明，需手动补全
• 空格和换行可能被压缩，若需保留格式，建议转换后立刻按 Shift+Alt+F（格式化快捷键）走一遍 Prettier

真正需要高频转换时，别依赖编辑器，用脚本更可控

比如用 Node.js 调 @babel/parser + html-to-jsx 包写个 CLI 工具，传入 HTML 字符串，输出合法 JSX AST。这样能精确控制：是否保留注释、如何处理 data- 属性、是否展开内联 style 对象……VSCode 扩展做不到这种粒度。

• 在线试手可先用 transform.tools/html-to-jsx，它底层就是 html-to-jsx 库，参数可视化，适合验证边界 case
• 注意：所有转换工具都无法还原 React 组件语义（比如把 <mybutton>Click</mybutton> 当作自定义组件而非普通标签），这类必须人工识别并补 import
JSX 不是 HTML 的子集，也不是超集；它是 JavaScript 语法糖。任何“自动转换”都只是近似，关键节点永远得人眼确认。