# JSX 格式化工具

使用此JSX格式化工具格式化React组件和其他JSX。粘贴代码后，工具会将其解析为带有JSX的JavaScript模块，以两个空格缩进和分号输出JavaScript，并将多行JSX元素排版为嵌套标签各自占一行、整体置于圆括号内。工具会报告语法错误，让React开发者能快速获得易读的组件，用于评审、调试和编写文档。

## 常见问题

### JSX格式化工具如何工作？

它首先会在启用JSX的情况下，将代码解析为JavaScript模块，然后按统一样式输出。JSX元素的排版规则与HTML格式化工具相同，因此嵌套的块级标签会各自缩进并单独占行。

### 多行JSX元素如何编写？

如果元素包含 div、section、p、ul 或 h1 等块级子元素，每个子元素都会单独占一行，整个元素会用圆括号包裹。对于能放在一行内的元素（例如单个组件标签），则保持行内排版。

### 支持片段和自闭合组件吗？

支持，<> 和 </> 形式的片段以及<Item key={1}/>等自闭合组件都可以解析并保留。它们的属性以及花括号内的表达式都会按原样复制。

### 遇到语法错误会怎样？

解析器会停止，工具会显示错误信息（例如意外的标记），而不会返回格式化了一部分的代码。请修正报错位置后重新格式化。

### JavaScript 部分使用什么样式？

代码块缩进两个空格，每行一条语句，运算符两侧留空格，语句末尾加分号。样式没有可更改的选项。

### 注释会保留吗？

会保留JavaScript中的行注释和块注释。JSX表达式内的注释会保留在花括号中。

### TSX文件中的TypeScript支持吗？

不支持，此工具解析的JSX语法不包含类型注解，因此带有类型的TSX会被视为语法错误并拒绝处理。请使用TypeScript格式化工具处理带类型的代码。

### 格式化会改变组件的渲染效果吗？

工具只会重新输出JavaScript，JSX布局会更改块级元素之间的空白，而React会忽略单独成行元素之间的空白。如果标签旁的行内文本对间距有精确要求，请检查格式化结果。

### 为什么输出会用 javascript 代码围栏包裹？

JSX是JavaScript的扩展，因此结果会以标记为 javascript 的Markdown代码块返回。复制围栏之间的代码行，粘贴到你的 .jsx 文件中。

### 组件最多可以有多大？

每次运行最多可处理 5 MB 代码；超过此大小的输入会被拒绝并显示提示。输出与 Code Formatter 的JSX选项相同。

在这里投放广告？

[给我们发邮件](mailto:hi@dennn.is?subject=%E5%9C%A8%20OneClick%20Pro%20%E4%B8%8A%E6%8A%95%E6%94%BE%E5%B9%BF%E5%91%8A)

[广告 适用于 WordPress 的智能体就绪型插件套件。](https://sleekwp.com/?ref=oneclickpro)