Getting Started
This package purpose is to reduce the amount time and effort to create some boilerplate codes and files.
![Example](https://media.giphy.com/media/v1.Y2lkPTc5MGI3NjExMmc0cGQxZnVjYjRwcnN0MmsyeW1rbTVkdml1Z2J2MDZrYzQ1eGp3aCZlcD12MV9pbnRlcm5hbF9naWZfYnlfaWQmY3Q9Zw/KWeMphu95b9LOLdpbS/giphy.gif)
Initializing Templater on Workspace
Press Ctrl + Alt + P, and then select Templater: Initialize Workspace
, it will initialize a folder called .templater
in the current active workspace.
Create Template
Press Ctrl + Alt + P, and then select Templater: Create Template
, there'll be some input box asking for some information like the name of the template, description, and template target directory
- Title: will be the name of the template.
- Template target directory: target location for later when the template is used, for example you create template for react component, and you want to generate the template in the folder
src/component
later, then you can input src/component
, this can be changed later.
Configuring Created Template
Open folder .templater
on your workspace, and you'll notice there's folder named after your created templates, open the template you want to configure, there's files called template.json
and folder files, if you open the template.json
, you'll see some template configuration.
- targetDirectory: This is the template target directory, when this template run, then all the files inside
files
folder will be copied on the target directory.
- variables: This is the main feature of this extension, you can create variable inside the
template.json
and then on files/folder inside files
folder, you can use the variable with {{VariableName}}
, and when the template is run, this will be replaced with the character that the user input, also you can use the plugin for dynamic naming cases, for example when you write {{VariableName.camelCase}}
, then it will converted to camel case (ex: small button -> smallButton), here's another example with complete available plugin.
For example, given input react component
- camelCase (reactComponent)
- snakeCase (react_component)
- kebabCase (react-component)
- upperCase (REACT COMPONENT)
- lowerCase (react component)
- startCase (React Component)
- capitalize (React component)
- upperFirst (React component)
- lowerFirst (react component)
- pascalCase (ReactComponent)
- constantCase (REACT_COMPONENT)
- pluralCase (react components)
- singularCase (react component)
Utilities can be used together with dot separation thanks to Gearintellix for example (ComponentName.pluralCase.pascalCase
and so on)
You can also create an option variable, just add enums
field on the variable and list of available options, for example
{
"variables": [
{
"name": "UserType",
"description": "The type of user",
"enums": ["Admin", "Wholesaler", "Customer"]
}
]
}
This will create an option instead of text box when executed.
Computed Variables
You can simplifying the usage of variable with computed variable.
![ComputedVariable](https://media0.giphy.com/media/v1.Y2lkPTc5MGI3NjExb20ydmM0OGRzZ2VqaHNtNHpmYmV6azNyejhmMXIzYnVzYzQ4Ymc0dSZlcD12MV9pbnRlcm5hbF9naWZfYnlfaWQmY3Q9Zw/3QxWQ0YMa37jePjbNd/giphy.gif)
Use the created templates
Press Ctrl + Alt + P, and then select Templater: Use Template
, then you'll given an option of all the available templates inside the current workspace, choose template you want to use and then you'll need to insert some information regarding the variables inside template.json
variables field.
Settings
If you're have multiple folders inside your workspace, and you want to select which folder should you use for templating, you can change the settings in the general settings
![Settings](https://media1.giphy.com/media/v1.Y2lkPTc5MGI3NjExczhsd2pkdjdzZGx2NzQzb20zYjk3OXB0NzIwaXkxamo2MTFnenNpaiZlcD12MV9pbnRlcm5hbF9naWZfYnlfaWQmY3Q9Zw/BTUZlAOsQxvG90FGtM/giphy.gif)
Read the more complete usage on This Medium Article or read the docs on Boilerplate Templater Documentation