This extension generates a component and style for the given component name.
This extension the component with the given name, generates a test file with the testing-library react library and the style that we can choose from 3 possibilities:
- Material-UI
- Styled-Components
- Style without library
- Without style
- After the extension is installed, press the
Ctrl+Shift+P
orCmd+Shift+P
key combination to open the command palette. - Type
generate component
and pressEnter
to generate a component.
- Type the component name and press
Enter
.
- Choose the folder where you want to generate the component or choose path default (
src/components
). Warning: Option Default folder is not available. Will soon be available!
.
- Choose the style library you want to use.
- Choose between
Material-UI
orStyled-Components
orStyle without library
orWithout style
.
- Choose if you want to generate interface for the component.
- Choose between
Yes
orNo
.
- Choose file name format.
- Available formats: KebabCase and PascalCase.
- Example with KebabCase:
button-submit-styles.ts
button-submit.spec.tsx
button-submit.tsx
index.ts
- Example with PascalCase:
ButtonSubmit-styles.ts
ButtonSubmit.spec.tsx
ButtonSubmit.tsx
index.ts
- Ps. All the files that are generated, contain the start code in each one.
button-styles.ts
: Style file for the component.button.spec.tsx
: Test file for the component with the testing-library react.button.tsx
: Component file for the component.index.ts
: Index file for export the component.
If you want to use the style library Material-UI
, you need to install the @material-ui/core
package.
npm install @material-ui/core
If you want to use the style library Styled-Components
, you need to install the styled-components
package.
npm install styled-components
If you want to use the test library testing-library react
, you need to install the @testing-library/react
package.
npm install @testing-library/react
This project is under the MIT license. See the LICENSE file for more details.