React Component Scaffold
Quickly create React or React Native components with customizable templates and structure.
Features
- Create React or React Native components
- Support for TypeScript and JavaScript
- Choose between Functional and Class components
- Customizable style extensions (scss, css, etc.)
- Right-click in explorer to create components in any directory
- Save preferences or choose per component
- Separate type definitions in dedicated files
- Type-safe imports with explicit 'type' keyword
Usage
- Right-click in the explorer where you want to create a component
- Select "Create React Component"
- Enter the component name in kebab-case
- Follow the prompts to create your component
Or use the command palette:
- Press
Ctrl/Cmd + Shift + P
- Search for "Create React Component"
- Follow the prompts
Configuration
On first use or after reset:
- Choose language (TypeScript/JavaScript)
- Choose project type (React/React Native)
- Set default component type (Functional/Class)
- Choose whether to prompt for component type each time
- Set style extension (for React projects)
To reset configuration:
- Press
Ctrl/Cmd + Shift + P
- Search for "Reset React Component Scaffold Configuration"
Generated Structure
For TypeScript React components:
component-name/
├── ComponentName.tsx
├── types.ts
├── index.ts (or .js)
└── ComponentName.module.scss (for React only)
For TypeScript React Native components:
component-name/
├── ComponentName.tsx
├── types.ts
└── index.ts
For JavaScript components, the same structure applies but with .js extensions and no types.ts file.
Requirements
Extension Settings
This extension contributes the following settings through the configuration wizard:
useTypeScript : Enable/disable TypeScript support
styleExtension : CSS file extension (css, scss, less, etc.)
defaultComponentType : Default component type (Functional/Class)
promptForComponentType : Whether to prompt for component type on each creation
projectType : Project type (React/React Native)
License
MIT
| |