ComponentName.module.less (for module less style option)
The extension can also automatically create SSG, SSR and normal pages for next.js
Usage
Right click on the file or folder in the file explorer
Select one of following options the generate new files and templated code
Enter a component name in the pop up in camelCase or PascalCase. If you enter the component name as in camelCase, then extension will convert it PascalCase automatically.
Configuration
You can access to the extension's settings through VSCode settings. You can customize:
config item
default
options
description
ComponentGenerator.global.generateFolder
true
boolean
Generate or not separate folder for newly created component
ComponentGenerator.global.quotes
single
single, double
Controls the quotes for the imports in the files.
ComponentGenerator.global.case
pascal
pascal, param
Controls the casing that the files should be generated in.
ComponentGenerator.indexFile.create
true
boolean
Whether to generate component's index file or not.
ComponentGenerator.indexFile.extension
ts
string
The extension of generated component index file. e.g.: index.(extension)
ComponentGenerator.nextPage.extension
tsx
string
The extension of generated nextjs page file. e.g.: my-page.tsx(extension)
ComponentGenerator.mainFile.create
true
boolean
Whether to generate component's main file or not.
ComponentGenerator.mainFile.extension
tsx
string
The extension of generated component file. e.g.: ComponentName.(extension)
ComponentGenerator.styleFile.create
false
boolean
Whether to generate component's stylesheet file or not.
ComponentGenerator.styleFile.extension
ts
string
The extension of generated stylesheet file. e.g.: ComponentName.styles.(extension)
ComponentGenerator.styleFile.suffix
``
string
The suffix to add to the end of the stylesheet filename. Default: ComponentName.styles.(extension)
