如何在VS Code中实现粘贴HTML自动转换为符合JSX规范的代码

方案1：粘贴时自动转换（最贴合需求） #

针对VS Code编辑器可以直接通过插件实现粘贴即转换，无需额外操作：

• 安装插件 HTML to JSX，复制Bootstrap的HTML代码后，在JSX文件右键选择「Paste HTML as JSX」即可直接生成符合要求的JSX代码，自动完成属性替换和单标签闭合。
• 如需完全自动无需右键操作，可额外安装 Paste and Transform 插件，配置JSX文件的粘贴转换规则为HTML转JSX，后续粘贴时会自动执行转换。

方案2：复用已有Prettier环境，保存时自动修正 #

你已经安装了Prettier，搭配ESLint即可实现粘贴后保存自动修正所有问题：

• 先安装ESLint和React规则插件：npm i eslint eslint-plugin-react -D
• 在项目根目录的ESLint配置文件（.eslintrc.json等）中添加如下规则：

{
  "extends": ["plugin:react/recommended"],
  "rules": {
    "react/no-unknown-property": "error",
    "react/self-closing-comp": ["error", { "html": true }]
  }
}

• 开启编辑器「保存时自动执行ESLint修复」的配置，后续粘贴原始HTML后只需保存文件，就会自动把class改为className、for改为htmlFor，同时补全单标签的闭合符。

方案3：自定义转换逻辑（适合批量处理） #

如果需要批量转换多处HTML代码，可以自己写简单的转换脚本，核心逻辑如下：

const htmlToJsx = (rawHtml) => {
  return rawHtml
    .replace(/\sclass=/g, ' className=')
    .replace(/\sfor=/g, ' htmlFor=')
    .replace(/<(input|img|br|hr|meta|link)([^>]*?)>/g, (_, tag, attrs) => {
      return attrs.trim().endsWith('/') ? `<${tag}${attrs}>` : `<${tag}${attrs}/>`
    })
}

内容的提问来源于stack exchange，提问作者telegrace