Skip to content
| Marketplace
Sign in
Visual Studio Code>Other>Component Folder ExtensionNew to Visual Studio Code? Get it now.
Component Folder Extension

Component Folder Extension

nassinger

|
3 installs
| (0) | Free
Installation
Launch VS Code Quick Open (Ctrl+P), paste the following command, and press enter.
Copied to clipboard
More Info
  • This extension automatically creates a new component folder with a React component file, a CSS file, and an index file (by default .tsx and .ts).

  • Usage:

    1. In the Explorer, right-click on an existing folder

    2. Choose Create Component Folder

    3. Type your component name (e.g. Navbar) and press Enter

    4. The extension makes:

      Navbar/
        ├ Navbar.tsx
        ├ Navbar.css
        └ index.ts
      
  • To change the file extensions:

    1. Open Preferences > Settings (or press Ctrl+,)

    2. Search for Component Folder Extension

    3. Or add to your settings.json: "componentFolderExtension.componentFileExtension": ".jsx", "componentFolderExtension.indexFileExtension": ".js"

    • componentFolderExtension.componentFileExtension sets the extension for the React component file (default: .tsx)
    • componentFolderExtension.indexFileExtension sets the extension for the index file (default: .ts)
  • Contact us
  • Jobs
  • Privacy
  • Manage cookies
  • Terms of use
  • Trademarks
© 2025 Microsoft