The extension provides refactoring tools for your React codebase: extract JSX into a new component, convert Class Components to Functional Components, wrapping with Hooks and more!
Go to the link below and click
Visual Studio Code Market Place: Glean
Extracting JSX into a new Component
Glean allows easy extraction of JSX into new React components (in the same or other file). Just select the JSX to extract, and Glean will handle all the rest:
Converting Class Component to Functional Component
Glean seamlesly automates convertion of class components to functional component, while take care of all the complexity:
WARNING!!! If You are using React version older than 16.8.0, This refactoring will delete all Lifecycle methods and setState calls!
Converting Functional Component to Class Component
Rename State Variable
Rename any state variable and let Glean rename its setter accordingly for You!
Wrap with Hook (useMemo, useCallback or useEffect)
Extract to file
Select text and either VSCode's code suggestion (aka "Lightbulb") or Command Pallet ('Extract to File' command) to extract the text.
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 Class 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.