React Transformer

一个强大的 VSCode 扩展，助你高效重构和转换 React (JSX/TSX) 代码！
一键重构、包裹、交换、转换 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 文件时均可通过右键菜单访问。

Wrap with new tag demo

Swap with next sibling demo

Create forwardRef demo

Remove JSX demo

Remove JSX demo

Remove JSX demo

价格：30 元

微信二维码