Component Folder Generator

A simple VS Code extension that generates a new component folder structure with boilerplate files.

Features

• Right-click on any folder in the Explorer
• Select "Create Component Folder"
• Enter the component name in kebab-case
• A new folder with the specified name is created, containing:
  • index.ts
  • [ComponentName].tsx
  • [ComponentName].module.scss

File Structure Example

Input name: main-hero-banner

/selected-folder/
└── /main-hero-banner/
├── index.ts
├── MainHeroBanner.tsx
└── MainHeroBanner.module.scss

File Content Templates

index.ts

export { default, } from './MainHeroBanner';

MainHeroBanner.tsx

import styles from './MainHeroBanner.module.scss';

const MainHeroBanner = () => {
  return (
    <div>MainHeroBanner</div>
  );
};

export default MainHeroBanner;

MainHeroBanner.module.scss

@use "@styles/scss/partials/variables" as *;
@use "@styles/scss/partials/mixins" as *;

.root {

}

Naming Rules

• Must be in kebab-case
• Only lowercase English letters
• No spaces or special characters
• A folder with the same name must not already exist

Usage

1. Right-click on a folder in VS Code's Explorer.
2. Select Create Component Folder.
3. Enter the component name (e.g., feature-card).
4. The folder and files will be generated automatically.