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 or Cmd+Shift+P key combination to open the command palette.
• Type generate component and press Enter 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 or Styled-Components or Style without library or Without style.

• Choose if you want to generate interface for the component.
• Choose between Yes or No.

• 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 @mui/material package.

npm install @mui/material

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.