React Component/Container Switcher
This extension allows you to quickly switch between your React components and their associated containers.
Ctrl+Shift+P and then begin typing
RCCS: Switch to associated component/container which will allow you to switch between components and containers. ALternatively, pressing
Alt+C will also switch between the two. If the other file doesn't exist you will be prompted to create it.
A button on the status bar allows you to see the kind of file currently open and allows you to switch to the other kind by clicking.
You can configure this extension always open the different file types in diffent parts of the screen.
For this extension to work, your container and component folders must be siblings. And the components must be nested directly below either as in their own folders or in standalone files. Currently, only
.tsx files are supported. The following are valid folder names for components and containers:
Valid component folder names:
Valid container folder names:
If the extension cannot find a valid component/container to switch to, it will display a small message in the corner of the editor letting you know.
Example directory structure:
This is an example of a valid (although, poor) directory structure, where every component has a corresponding container:
| | Navbar.jsx
| | SignIn.ts
| | index.js
No known issues.
- Added a status bar item that shows information about the current file. Clicking this triggers file switching.
- When switching to a file that doesn't exist, you will be prompted to create the file.
- Added templates when creating containers and components.
- Added a configuration option to open specific types of files on different parts of the screen.
- Added a configuration option for the status bar item.
- Bug fixes.
- Added support for