Skip to content
| Marketplace
Sign in
Visual Studio Code>Programming Languages>React TransformerNew to Visual Studio Code? Get it now.
React Transformer

React Transformer

James Pan

|
3 installs
| (0) | Free
支持 JSX 结构的多种快捷操作,包括用新标签包裹、与兄弟节点交换、创建 forwardRef、移除包裹标签、批量移除内容、创建 & 表达式、条件表达式等。旨在提升 React 开发效率,简化常见的组件结构调整和重构流程。
Installation
Launch VS Code Quick Open (Ctrl+P), paste the following command, and press enter.
Copied to clipboard
More Info

React Transformer

一个强大的 VSCode 扩展,助你高效重构和转换 React (JSX/TSX) 代码!
一键重构、包裹、交换、转换 JSX 元素。


功能

  • 用任意标签包裹 JSX(默认 Fragment)
  • 与下一个兄弟 JSX 元素交换位置
  • 创建 forwardRef 包裹
  • 移除 JSX 元素并提升其子元素
  • 将 JSX 转换为 && 表达式
  • 将 JSX 转换为条件(三元)表达式

命令与用法

命令名称 描述 用法
Wrap with new tag
react-transformer.warp_it
用自定义标签包裹选中的 JSX 元素(默认 Fragment)。 光标放在 JSX 元素内,右键选择"Wrap with new tag",或用命令面板。
Swap with next sibling
react-transformer.swap_with_next_sibling
与下一个兄弟 JSX 元素交换位置。 光标放在 JSX 元素内,右键选择"Swap with next sibling",或用命令面板。
Create forward
react-transformer.create_forward
将函数组件转换为 React.forwardRef。 光标放在函数组件变量上,右键选择"Create forward",或用命令面板。
Remove
react-transformer.remove
移除选中的 JSX 元素并提升其子元素。 光标放在 JSX 元素内,右键选择"Remove",或用命令面板。
Create ampersand expression
react-transformer.create_ampersand_expression
用 {condition && <JSX>} 包裹 JSX。 光标放在 JSX 内,右键选择"Create ampersand expression",或用命令面板。
Create conditional expression
react-transformer.create_conditional_expression
用 {condition ? <JSX> : null} 包裹 JSX。 光标放在 JSX 内,右键选择"Create conditional expression",或用命令面板。

快捷键

你可以按 Shift + Ctrl + R 快速打开重构菜单。

右键菜单

所有命令在编辑 React 文件时均可通过右键菜单访问。


示例

1. 用新标签包裹

Wrap with new tag demo

2. 与下一个兄弟元素交换

Swap with next sibling demo

3. 创建 forwardRef

Create forwardRef demo

4. 移除 JSX 元素

Remove JSX demo

5.转换为条件语句

Remove JSX demo

6. 转换为三元表达式

Remove JSX demo


如何激活

价格:30 元

  1. 扫码添加微信 mogician666
  2. 向开发者支付 30 元
  3. 把机器码发给开发者
  4. 开发者根据机器码发送激活码
  5. 搜索"输入激活码"命令,输入激活码
  6. 激活成功后,畅享全部高级功能!

联系方式

微信二维码

注意事项

  • 激活码只能支持一台电脑。
  • 更换电脑或重装系统需要另行购买激活码。
  • Contact us
  • Jobs
  • Privacy
  • Manage cookies
  • Terms of use
  • Trademarks
© 2025 Microsoft