Skip to content
| Marketplace
Sign in
Visual Studio Code>Other>TemplarNew to Visual Studio Code? Get it now.
Templar

Templar

abyrd

|
78 installs
| (0) | Free
Generates boilerplate component folders from a template.
Installation
Launch VS Code Quick Open (Ctrl+P), paste the following command, and press enter.
Copied to clipboard
More Info

Templar

Generate new custom named Folders from a standard or custom Template.

Features

Built initially and primarily as a React Component folder structure generator. The in-built template is structured in the following way:

> Template
  > index.js
  > Template.js
  > Template.stories.js
  > Template.styles.js
  > Template.test.js

By default all files are included. Choose what certain files to include or remove with the generateStoriesFile, generateTestFile, and generateTestFile extension settings.

Unchecking all of the previous settings will leave you with a folder structure of the follow:

> Template
  > index.js
  > Template.js

To generate a new folder from the in-built template, right click within the folder window and select Generate Templar Folder. Type in your template name and create a new react component folder with all the necessary starting elements. All references to the word "Template" will be replaced with the given name.

To create your own custom template, add your own template file structure into your repo. Make sure the naming convention of the template is standardized. For example:

> CustomName
  > CustomName.js
  > CustomNameStyled.js
  > CustomNameHelpers.js

Any references to CustomName in each file will also be changed when generating a new folder from your custom template. A React Component with the name CustomName will be renamed to whatever name inputted.

Add your custom template and point to the path with the pathToCustomTemplate setting. Set the useCustomTemplate setting to true to use your custom template.

Settings

This extension contributes the following settings:

  • templar.generateStoriesFile: enable/disable generating the .stories.js file from the template
  • templar.generateStylesFile: enable/disable generating the .styles.js file from the template
  • templar.generateTestFile: enable/disable generating the .test.js file from the template
  • templar.useCustomTemplate: boolean value for whether you want to use a custom template from your repo
  • templar.pathToCustomTemplate: The relative path to the custom template that you want to duplicate
  • Contact us
  • Jobs
  • Privacy
  • Manage cookies
  • Terms of use
  • Trademarks
© 2025 Microsoft