javgt/vscode-component-creator

This extension is used for the creation of components in a more optimal and faster way

React Create Component

Generate your components quickly, with multiple easily customizable templates

Features

• Create a component depending on the selected language.
• Create a style file depending on the type of style or extension selected.
• You can create styles per module.
• You can create a component with built-in style import.
• It generates a barrel in your folder.
• In the tsx files, integrate the interface.

Commands

Command	Description	context	keybindings
RCC: Create Component	Create a component in the path that you select	palette command	ctrl + shift + l
RCC: Delete cache	Delete the cache of the component creator	palette command
RCC: Create page	Create a page in the path that you select	menu context

Integrations

Integrations	Technologies
Framework or library	React, React Native
Language	Javascript, Typescript
Style extensions	CSS, SASS, SCSS
Styles options	CSS Module, styled-component, tradicional
Extras	Storybook, Test Testing Library

How does it work?

Use from a specific path

You can use it by clicking on the folder where you want your component to be and clicking on the "Create Component" option.

Use by entering the path

You can also use it by giving it by executing the "Create Component" command from the command palette To create a component it can also be executed with the following keys (ctrl + shift + l)

Settings

You can change the configurations of the templates to make the creation more customizable and faster, for more information go to the configuration documentation

Structure Results

ComponentFolder
│
│── Component.{jsx, tsx}
│
|── styles(.module).{css, scss, sass}
│
|── Component.stories.{jsx, tsx} [optional]
│
|── Component.test.{jsx, tsx} [optional]
│
└── index.{js, ts}

Example of output with traditional CSS

Typescript

css

Barrel

Testing

Storybook

License

React Create Component is MIT licensed.

vscode-component-creator's Issues

sin soporte para linux?

ReactNative Style

Hola, vengo usando tu extensión hace un tiempo, ahora estoy trabajando con react native y me gustaría tener esta opción aquí , no es muy diferente a los que ya tenes, por ahí solo tendrías que agregar un archivo de estilos con la siguiente linea

export const styles = StyleSheet.create({})

y el archivo del componente algo así

import { Text } from 'react-native'
import { styles } from './Historial.styles';

const Historial = () => {
	return <Text>Historial</Text>;
};

export default Historial;