Skip to main content

Create Nested File From Selection

Highlight a component name in the editor and instantly turn it into a nested file under the current parent. Perfect for extracting pieces of JSX without leaving the file you're editing.

When to use​

  • When you've typed a component name in JSX and need its file right away
  • When refactoring a section of JSX into its own component
  • When you want to stay focused in the editor without switching panes

How to use​

  1. Open a file in the editor
  2. Highlight the text that will become the new component name (e.g., Header)
  3. Right-click and select "Create Nested File From Selection"
  4. The new nested file appears right inside the parent file using the text you selected

Example​

In Dashboard.tsx, if you select the text Sidebar from your JSX:

// Dashboard.tsx
<div>
  <Sidebar /> {/* Select "Sidebar" */}
</div>

The new Sidebar.tsx file appears nested right inside Dashboard.tsx in the explorer.