React Component & SCSS File Generator

This VS Code extension automates the creation of a new React component along with an associated styles.module.scss file, saving you setup time and ensuring consistent imports for stylesheets across projects.

Features

• Creates a new folder for each React component.
• Generates a .tsx component file with basic boilerplate.
• Generates a styles.module.scss file and imports it directly into the component.

Installation

1. Install this extension directly from the VS Code Marketplace by searching for React Component & SCSS File Generator, or install the .vsix file manually:

   • Download the .vsix file from the Releases tab.
   • Open the Extensions sidebar in VS Code, click on the ... menu, and select Install from VSIX....

2. After installation, open a workspace in VS Code.

Usage

1. Create a Component:

   • Right click the folder where you want to create the component.
   • Run the command "Create Component with SCSS".
   • (alternative: Open the command palette (Ctrl+Shift+P or Cmd+Shift+P on macOS))

2. Enter Component Name: You’ll be prompted to enter a name for the new component. The extension will:

   • Create a folder named after the component in the currently selected directory.
   • Generate a .tsx file with the same name as the component.
   • Generate a styles.module.scss file in the same folder and import it into the component file.

3. Resulting Structure: /your-selected-folder └── ComponentName/ ├── ComponentName.tsx └── styles.module.scss

Example

Let’s say you want to create a component named Button. The extension will produce:

Button.tsx

import styles from "./styles.module.scss";

const Button = () => {
  return <div className={styles.button}>Button</div>;
};

export default Button;