HTML 转 JSX — 粘进 React 组件就能用的标记

不会。所有转换都在这个浏览器里完成，代码不会发送到任何地方，也不会被保存。公司的源码或配置文件都可以粘贴。浏览器里只会保留你上次打开的转换方向。转换器（编译器）文件本身会从本站下载，但下载之后代码不会离开浏览器。

每个方向都有自己的网址。Pug ⇄ HTML 这个标签同时对应 /codeconv 和 /codeconv/html-pug，按设置栏中间的 ⇄ 按钮时，画面和网址会一起改变。所以你可以把当前方向直接作为链接发出去，按返回键也会回到上一个方向。按 ⇄ 时如果已有结果，结果会被放进反方向的输入框，方便马上确认转换回来是否一致。

点标签栏最右边的“全部转换”，就会按标记、样式、脚本、数据四组列出全部十六个方向。需要下载转换器的方向会标出体积（例如 694KB），点进去之前就知道要不要等一会儿。本站任意页面都能用的 Ctrl/⌘+K 也可以直接跳到某个转换。

这些语句要去读取其他文件，而浏览器没有可访问的文件系统。放到服务器上当然可以，但那就得把代码发出去，本工具不走那条路。把原本要引入的文件内容直接粘贴到同一个编辑框里就能照常转换。Less 的 @import 也是同样的情况。

刻意不抽。它只整理嵌套。哪些值该做成变量，是项目的设计规范该决定的事；自动抽取只会得到 $color-1、$size-3 这类看不出含义的名字，反而更难读。var(--x) 这样的 CSS 变量也原样保留——换成 SCSS 变量后值会在构建时固定下来，运行时切换主题就失效了。CSS → Less 也是同样的规则。

不会变。它只是把选择器折叠成嵌套，顺序和含义都不变，媒体查询、!important 与 @font-face 原样保留。用逗号连起来的选择器（.a, .b）会整体保留，因为拆开会复制声明。我们的测试也会把生成的 SCSS 再编译回 CSS，确认含义一致。你也可以用设置栏的 ⇄ 按钮自己验证。

不会。本工具只负责去除类型（Sucrase）。想确认类型是否正确，请使用编辑器或 tsc --noEmit。换来的是速度和体积——带类型检查的编译器有好几 MB，对网页来说下载负担太大。namespace、declare module 这类纯类型语法可能会被清空或原样保留。

多数情况可以。class 变成 className，for 变成 htmlFor，style 字符串变成对象，注释变成 {/* */}，stroke-width 这类 SVG 属性也改为驼峰写法。不过 onclick="save()" 这种属性会被包成 () => { save() }，因为 React 只接受函数——而那个函数必须存在于你的组件里。value、checked 如果原样保留，输入框就变成改不动的受控组件，需要你决定是否改成 defaultValue、defaultChecked。这些地方转换后问题面板都会提示。

那是因为你把屏幕上的结果复制到纯文本编辑器再保存，Excel 便无从知道文件是 UTF-8。用下载按钮得到的文件带有 BOM，直接打开就不会乱码。嵌套的值会展开成 a.b 形式的列，含有逗号、引号或换行的值会按规范加引号，所以列不会错位。反过来，从 Excel 复制的表格可以直接粘到 CSV → JSON 方向——用制表符分隔的内容也能自动识别。

类型是根据你粘贴的值推断出来的，所以建议过一遍。数组里的对象会全部扫描：只有部分对象才有的键会加上 ?，出现过 null 的值会加上 | null。即便如此，现在是数字的字段，真实响应里也可能是 null 或字符串。嵌套对象会按键名单独声明（address → Address），名字重复时在后面加编号。

因为它们用的是真正的编译器。dart-sass 压缩后约 694KB，less.js 约 53KB。没有理由让每位访客都背上这些，所以只有第一次使用该方向时才下载，之后浏览器会记住，再打开就很快。相比之下，JSON、CSV、XML、HTML → Pug、HTML → JSX 完全不需要额外下载，断网也能用。

还需要你自己引入 React。本工具只是把 JSX 语法改写成 createElement 调用，既不会把多个文件打包成一个，也不会为旧浏览器降级语法。import 语句原样保留，输出可以直接交给 Vite、webpack 这类打包工具。如果需要 React 17 起使用的自动运行时，请把运行时设置改成 automatic。