Inspired by Flutter's code actions for easily wrapping widgets. Implemented using the Emmet command Wrap with Abbreviation
Code Actions:
- Wrap components with elements/components.
- Remove tag and its matching closing tag
Environment-sensitive Wrappers:
- Define wrapping components based on React Web or React Native.
Monorepo Support:
- Option to specify paths where the React Web and React Native code actions should be applied
To use this extension, you need to have emmet enabled (enabled by default).
reactCodeActions.reactWeb/reactNative.enableCodeActions- Enable/disable code actionsreactCodeActions.reactWeb/reactNative.folderPaths- Paths where the code actions should be available (useful for monorepos)reactCodeActions.reactWeb/reactNative.wrappingElements- List of elements that will be available in code actions (extendable to your own needs)
-
reactCodeActions.general.enableClassNameProp- Automatically add aclassNameproperty to the wrapping element - disabled by default. -
reactCodeActions.general.enableRemoveTagAction- Enables a remove tag action that will remove the selected tag and its matching closing tag - disabled by default
Only React Web code actions are enabled by default
div,section,article,main,header,footer,nav,aside
View,ScrollView,Pressable,TouchableOpacity,Text
- The actions will appear in all JSX or TSX files, regardless of the cursor position. This will be fixed in the future so that the cursor must either be inside an element or have text selected.
- No automatic imports will be performed if the import statement for the wrapping component does not exist in the file. This functionality is expected to be implemented in the future.
- if the className setting is not enabled the cursor will jump to the closing wrapping tag, which may not be desired. A setting will be available in the future to determine the cursor placement.