Go to the link below and click
Extracting JSX into a new Component
Glean allows easy extraction of JSX into new React components. Just select the JSX to extract, and Glean will handle all the rest:
Converting Functional Component to Stateful Component
Converting Stateful Component to Functional Component
WARNING!!! This refactoring will delete all Lifecycle methods and setState calls!
Extract to file
Select text and either VSCode's code suggestion (aka "Lightbulb") or Command Pallet ('Extract to File' command) to extract the text.
All the experimental features are opt-in and need to be enabled through the configuration.
Hooks Support for Class Component to Functional Component Refactoring
glean.jsModuleSystem (Default: 'esm')
Determines how the selected code will be exported/imported. Valid options are 'esm' and 'commonjs'.
glean.jsFilesExtensions (Default: [ "js", "jsx", "ts", "tsx" ])
glean.switchToTarget (Default: false)
Determines whether VSCode should switch to target file after extracting.
glean.experiments (Default: )
A list of enabled experimental features. Available experimental features:
glean.showConversionWarning (Default: true)
Determines whether VSCode should show conversion warning when converting Stateful Component to Functional Component.
Feel free to open issues or PRs!
In order to start working all you need to do is:
Please refer to to the following guide.