Boilerplate Templater

Getting Started

This package purpose is to reduce the amount time and effort to create some boilerplate codes and files.

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.

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

Read the more complete usage on This Medium Article or read the docs on Boilerplate Templater Documentation