This extension for Visual Studio Code provides a quick way to refactor your React code. It allows you to extract a valid piece of component code into a new function, automatically passing the props and building the extracted component interface, if using Typescript.
Get it at Visual Studio Code Marketplace: React Extract
-
Code Extraction: Select a valid piece of React component code that you want to refactor.
-
Quick Refactor Action: Use the Code Actions feature (
Ctrl + .
orCmd + .
, by default) to initiate the refactoring process. -
Component Naming: Pass the component name at the input prompt.
-
Automatic Prop Passing: The extension will automatically identify and pass the necessary props to the new function.
-
TypeScript Support: If you're using TypeScript, the extension will also build the interface for the new function.
-
Code Placement: The new function will be placed at the bottom of the current file.
You may customize the way that the extracted component is built, with the following options on your Settings (Ctrl + ,
or Cmd + ,
, by default):
-
Description: The type of type declaration to be used when extracting the component.
-
Accepts:
"interface" | "type"
-
Default:
"interface"
// interface
interface ComponentProps {
// ...
}
// type
type ComponentProps = {
// ...
};
-
Description: The type of function declaration to be used when extracting the component.
-
Accepts:
"arrow" | "function"
-
Default:
"function"
// arrow
const Component = () => (
//...
)
// function
function Component() {
//...
}
-
Description: Whether to declare the component using React.FC or not. [Only takes effect if "Function Declaration" is set to "Arrow Function"].
-
Accepts:
"true" | "false"
-
Default:
"false"
// true
const Component: React.FC<ComponentProps> = ({...props}) => (
//...
)
// false
const Component = ({...props}: ComponentProps) => (
//...
)
-
Description: Whether to create the extracted component with explicit return statement or not. [Only takes effect if "Function Declaration" is set to "Arrow Function"].
-
Accepts:
"true" | "false"
-
Default:
"false"
// true
const Component: React.FC<ComponentProps> = ({...props}) => {
return (<Extracted />)
}
// false
const Component = ({...props}: ComponentProps) => (<Extracted />)
If you encounter any problems or have suggestions for improvements, please open an issue. Your feedback and contribution is appreciated. If you have the agreed solution as well, please open a pull request.
Clone the repo, install dependencies and enter VS Code.
$ https://github.com/joao-mbn/react-extract.git
$ cd react-extract
$ npm i
$ code .
- Comment the following block of code in
webpack.config.js
to avoid conflicts with the ts-lib files in thenode_modules
:
plugins: [
new CopyPlugin({
patterns: [{ from: 'node_modules/typescript/lib/*.d.ts', to: '[name][ext]' }]
})
];
- Go to Run and Debug and select Run Extension from the menu. Hit the play button or F5. For more information go to the Official VS Code Extension Development Docs.
- Install the Extension Test Runner and TypeScript + Webpack Problem Matchers extensions.
- Open the Command Palette
Ctrl + Shift + P
orCmd + Shift + P
. - Select Task: Run Task.
- Select tasks: watch tests.
- Run the tests from the test explorer.
You can add a new folder under the src/test/components
folder with the .jsx and .tsx files and their results using the project's naming convention via a script, as follows:
$ npm run create-test myNewTestCase
Replace myNewTestCase with the appropriate test case name.
This extension is currently not fully supportive of Class Components. You can use it just fine on them, but the passed props may be wrongy extracted. Let it be known if you wish full support on them.
Even with this disclaimer, be welcome to open issues related to its use with Class Components, as to improve the implementation when support is given.