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
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....
After installation, open a workspace in VS Code.
Usage
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))
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.