ReactComponentGeneratorExtension
A Cool VSCode extension that lets you create react component files/folders instantly with boilerplate code. It also handles imports/exports on its own.
Install / Use
/learn @uditkumar01/ReactComponentGeneratorExtensionAbout this skill
Quality Score
0/100
Category
Development & EngineeringSupported Platforms
GitHub Copilot
README
<div align="center">
<img src="https://raw.githubusercontent.com/uditkumar01/ReactComponentGeneratorExtension/main/assets/logo.png" alt="logo" width="150" />
<h1>React Component Generator <kbd>v1.1.3</kbd></h1>
</div>
<br />
<div align="center">
<img src="https://img.shields.io/badge/typescript-%23007ACC.svg?style=for-the-badge&logo=typescript&logoColor=white" alt="ts badge" />
<img src="https://img.shields.io/badge/VSCODE%20Extension%20API-5C2D91.svg?style=for-the-badge&logo=visual-studio-code&logoColor=white" alt="nextjs badge" />
<br />
<!-- <img src="https://img.shields.io/github/repo-size/uditkumar01/ReactComponentGeneratorExtension?style=for-the-badge&color=blueviolet" alt="repo size badge" /> -->
<img src="https://img.shields.io/github/stars/uditkumar01/ReactComponentGeneratorExtension?style=for-the-badge&color=silver" alt="build status badge" />
<img src="https://img.shields.io/github/forks/uditkumar01/ReactComponentGeneratorExtension?style=for-the-badge" alt="no of forks badge" />
<!-- <img alt="View Count" src="https://shields-io-visitor-counter.herokuapp.com/badge?page=uditkumar01/ReactComponentGeneratorExtension&style=for-the-badge&label=Hits" /> -->
<img alt="Download Count" src="https://img.shields.io/visual-studio-marketplace/d/uditkumar01.react-component-generator?style=for-the-badge&color=gold" />
<img alt="rating" src="https://img.shields.io/visual-studio-marketplace/stars/uditkumar01.react-component-generator?style=for-the-badge" />
<br />
<img alt="version" src="https://img.shields.io/visual-studio-marketplace/v/uditkumar01.react-component-generator?style=for-the-badge" />
<img alt="last updated date" src="https://img.shields.io/visual-studio-marketplace/last-updated/uditkumar01.react-component-generator?style=for-the-badge" />
<!-- <img alt="Hits" src="https://hits.sh/github-cool-covers.vercel.app.svg?style=for-the-badge&color=0fa5c3&labelColor=48484e&label=Website+Hits"/> -->
</div>
<br />
<br />
Features
A cool VSCode extension that lets you create your component's files/folders instantly with boilerplate code. Also automatically handles CSS file import if needed and exports the component from the index file of the Component directory.
How to install?
- Go to Extenstion Marketplace or press <kbd>Ctrl</kbd> + <kbd>Shift</kbd> + <kbd>X</kbd>.
- Search for
uditkumar01.react-component-generator. - Then simply install the extension named
React Component Generator.
How to use?
- You need to open your react project in VSCode to use this extension.
- Press <kbd>Ctrl</kbd> + <kbd>Shift</kbd> + <kbd>P</kbd>.
- Search
React Component generator. - Or you can use it via explorer context menu *Note: This option will only appear on directories named
componentsorcomponent. - Or You can directly use keyboard shortcut <kbd>Shift</kbd> + <kbd>Space</kbd>.
Note: While naming components you can use space or other symbols which will be removed and the character next to it will be capitalized.
Features v1.0.0
- Creates required files and folders for your component.
- Creates boilerplate code for the component you generated.
- Will automatically export the file from
index.js.
For more information
Demo Gif
