Skip to content
| Marketplace
Sign in
Visual Studio Code>Snippets>React Component SplitterNew to Visual Studio Code? Get it now.
React Component Splitter

React Component Splitter

Sahar Avraham

|
3,599 installs
| (3) | Free
Splits long components into shorter, readable subcomponents
Installation
Launch VS Code Quick Open (Ctrl+P), paste the following command, and press enter.
Copied to clipboard
More Info

React Component Splitter

This extension allows to easily split long React components into sub-components.

Usage:

1. Select the code you want to export to a new sub-component.

2. Choose Split to New Component from the Right-Click Menu / Command Palette.

3. Enter a name for the new sub-component.

enter image description here

Notes:

  • The new component should is created inside the current component folder

  • The selected code represents a valid jsx of React component(s)

  • Imports and variables that become unused after splitting, will be deleted from the original component and re-imported in the new component

Reporting Bugs:

If you find a bug or malfunction, or have any other comments, please open a github issue (with specific code example).

  • Contact us
  • Jobs
  • Privacy
  • Manage cookies
  • Terms of use
  • Trademarks
© 2025 Microsoft