Code Template Tool

Generate files/folders based on templates.

What's new in 0.6.0

Add the filed allowExistingFolder to template config.

If allowExistingFolder is set to true, when trying to create a directory that is already existing, the existing directory will just be used.

If set to false or not configured, when trying to create a existing directory, a FileAlreadyExistsError will be thrown.

Features

Template describes the shape of the file content as well as the folder structure.
Destination folder path can be specified via right-click context or active editor, and be modified in user input interface.
Folders that do not exist can be cerated recursively.
Allow variables in file content as well as file/folder names.

Support multiple identifier styles.

Case style

Case	Example
camelCase	`myLovelyCat`
pascalCase	`MyLovelyCat`
snakeCase	`my_lovely_cat`
kebabCase	`my-lovely-cat`
snakeUpperCase	`MY_LOVELY_CAT`
snakePascalCase	`My_Lovely_Cat`
kebabUpperCase	`MY-LOVELY-CAT`
kebabPascalCase	`My-Lovely-Cat`
upperCase	`MYLOVELYCAT`
lowerCase	`mylovelycat`

Prefix and suffix

Identifiers can be prefixed or suffixed with any visible characters.

Globally and template-level configuration of file encoding.
Globally and template-level configuration of file ignorance list (glob pattern).
Template-level configuration of processing mode for already existing directories.

Usage

Commands

template: Edit Templates

Open the templates folder in a new window.
template: Reload Templates

Remember to call this command to update templates metadata cached in memory after editing templates config files, adding new templates or deleting existing templates.
template: New File / Folder From Template

To select a template and generate codes based on it.

Call commands

Open command palette and input a command.
Right click code area of the active editor and pick a command from the popup menu.
Right click file/folder names or space area of the explorer window and pick a command from the popup menu.

Destination Folder

The initial destination folder may be the active editor's folder, right clicked folder, right clicked file's folder, workspace folder or user home folder based on the template: New File / Folder From Template �command's invocation mode.
Destination folder will show and can be changed in user input interface.

Define Templates

Templates folder

All templates should be defined in the templates folder (Specified by the setting codeTemplateTool.templatesPath.) If the specified folder does not exist, it will be auto created.

By default, it's {homedir}/.vscode/templates.

Template structure

+ exampleTemplate              // template define folder
  - template.config.json       // template configuration file
  - {other files and folders}  // template content

Template content

Template content support variables.

By default, a variable in template content is like this: ___var___. It takes ___ as it's left boundary and right boundary.

You can set variables' boundaries via the codeTemplateTool.variable.leftBoundary and codeTemplate.variable.rightBoundary fields in user settings.

For example, if you set codeTemplateTool.variable.leftBoundary to {_ and codeTemplateTool.variable.rightBoundary to _}, a variable will be like {_var_}

Example1:

// The template content is a folder and what it contains.

+ ___PageName___Page        // folder with variable in it's name
  - index.js                // file with fixed name
  - ___PageName___Page.js   // file with variable in it's name
  - ___pageName___Page.css
  - ___pageName__Model.js
  + components              // sub folder with fixed name

___PageName___Page.js

import React from 'react'
import { connectModel } from 'reduxModel'
import ___pageName___Model from './___pageName___Model'
import './___pageName___Style.scss'

class ___PageName___Page extends React.Component {
    componentDidMount() {

    }

    render() {
        return (
            <div className="___page-name___">

            </div>
        )
    }
}

export default connectModel(___pageName___Model, state => ({
    ___pageName___: state.___pageName___,
}))(___PageName___Page)

___pageName___Model.js

import {
    createModel,
    ___initialStateType___InitialState,
    ___reducerType___Reducer,
} from 'reduxModel'

const ___pageName___Model = createModel({
    name: '___pageName___',
    initialState: ___initialStateType___InitialState,
    asyncOperations: [
        {
            get___PageName___: (success, fail) => ({
                api: {
                    success,
                    fail,
                },
            }),
            reducers: ___reducerType___Reducer,
        },
    ],
    syncOperations: [
        {
            reset___PageName___: () => {},
            reducer: () => ___initialStateType___InitialState,
        },
    ],
})

export default ___pageName___Model

...other files

If the configuration file is:

template.config.json

{
    "name": "Common Page Template",
    "variables": ["pageName", "initialStateType", "reducerType"]
}

template.config.json

{
    "name": "Common Page Template",
    "variables": [
        {
            "name": "pageName",
            "style": {
                "case": "auto"
            }
        },
        {
            "name": "initialStateType",
            "style": {
                "case": "auto"
            }
        },
        {
            "name": "reducerType",
            "style": {
                "case": "auto"
            }
        },
    ]
}

and the user inputs are as follows:

pageName: lovelyCats
initialStateType: list
reducerType: list

Then the generated content will be:

// Folder structure

+ LovelyCatsPage
  - index.js
  - LovelyCatsPage.js
  - lovelyCatsPage.css
  - lovelyCatsModel.js
  + components

LovelyCatsPage.js

import React from 'react'
import { connectModel } from 'reduxModel'
import lovelyCatsModel from './lovelyCatsModel'
import './lovelyCatsPage.scss'

class LovelyCatsPage extends React.Component {
    componentDidMount() {

    }

    render() {
        return (
            <div className="lovely-cats">

            </div>
        )
    }
}

export default connectModel(lovelyCatsModel, state => ({
    lovelyCats: state.lovelyCats,
}))(LovelyCatsPage)

lovelyCatsModel.js

import {
    createModel,
    listInitialState,
    listReducer,
} from 'reduxModel'

const lovelyCatsModel = createModel({
    name: 'lovelyCats',
    initialState: listInitialState,
    asyncOperations: [
        {
            getLovelyCats: (success, fail) => ({
                api: {
                    success,
                    fail,
                },
            }),
            reducers: listReducer,
        },
    ],
    syncOperations: [
        {
            resetLovelyCats: () => {},
            reducer: () => listInitialState,
        },
    ],
})

export default lovelyCatsModel

...other files

Example2:

// The template content is two files and their content.

- ___componentName___.js    // file with variable in it's name
- ___componentName___.css

Template configuration file

The name of template configuration file can be specified via the user settings filed codeTemplateTool.configFile. By default, it's template.config.json.

The content of template configuration file should be a json object.

Example:

template.config.json
```
{
    "name": "Template Example",
    "variables": [
        "{variable configuration}",
        "{variable configuration}",
        "..."
    ],
    "encoding": "utf8", // string, optional
    "ignore": ["{glob pattern}", "{glob pattern}", "..."], // array of string, optional
    "allowExistingFolder": false, // boolean, optional
}
```
- The name field specifies template's name showed in the template select list.
- Variable configuration
  
  Examples:
```
// Simplified configuration

"variableName" // just a variable name string
```
```
// Full configuration

{
    "name": "variableName", // required
    "defaultValue": "variableDefaultValue", // optional
    "style": { // optional
        // All fields of style are optional.
        "noTransformation": false,
        "keepUpperCase": false,
        "case": "camelCase",
        "prefix": "$$",
        "suffix": "___"
    }
}
```
- The encoding filed specifies the encoding used when reading from template files and writing to target files.
  
  If not configured, the filed codeTemplateTool.encoding in user settings will be used. Usually, it's utf8.
- The ignore filed can be used to filter files/folders by glob patterns.
  
  The final ignore list is the merged result of the ignore filed configured here and the filed codeTemplateTool.ignore configured in user settings.
- If the allowExistingFolder filed is set to true, when trying to create a directory that is already existing, the existing directory will just be used.
  
  If set to false or not configured, when trying to create a existing directory, a FileAlreadyExistsError will be thrown.

Variable rules

A variable in template content has a left boundary and a right boundary to distinguish from non variable content. By default, variables' left boundary and right boundary are both ___(three underscores).

The boundary can be customized by setting the fields codeTemplateTool.variable.leftBoundary and codeTemplateTool.variable.rightBoundary in user settings.
Take myPet as an example of variable name, in template configuration files, you can use any of myPet, MyPet, my_pet, my-pet, My_Pet, MY_PET, My-Pet, MY-PET to represent any one of ___myPet___, ___MyPet___, ___my_pet___, ___my-pet___, ___My_Pet___, ___MY_PET___, ___My-Pet___ and ___MY-PET___ in corresponding template content.

Actually, myPet, MyPet, my_pet, my-pet, My_Pet, MY_PET, My-Pet, MY-PET can be clearly �separated into the same case ignore string list ["my", "pet"], so they are treated as the same variable with different styles.
Valid character sets for variables:
- For variables' name: a-zA-Z0-9
- For variable's value:
  - If style.noTransformation is true: a-zA-Z0-9
  - Else: any characters
If style.noTransformation is true, The placeholders in template content will be replaced with the raw user input value.

If style.keepUpperCase is true, uppercase words in user input will not be transformed to other cases,they will stay uppercase when joined with other words.

Example

words	transform to	keepUpperCase is false	keepUpperCase is true
"XML HTTP request"	pascalCase	`XmlHttpRequest`	`XMLHTTPRequest`
"new customer ID"	camelCase	`newCustomerId`	`newCustomerID`

Common transformation process of identifier styles

Any of the input variable values lovelyCat, LovelyCat, LovelyCat, lovely_cat, Lovely_Cat, lovely-cat, Lovely-Cat, lovely cat, Lovely Cat yields the same result in generated content.

If variable configuration is a string or it's style.case field is auto, the actual case will be parsed from the corresponding placeholder.

Example:

Template content:

other content___MyPet___Other content
other content ___myPet___ Other content
other content ___my_pet___ Other content
other content ___My_Pet___ Other content
other content ___MY_PET___ Other content
other content ___my-pet___ Other content
other content ___My-Pet___ Other content
other content ___MY-PET___ Other content

Template configuration:

{
    "name": "Template Example",
    "variables": [
        {
            "name": "myPet",
            "style": {
                "case": "auto"
            }
        }
    ]
}

{
    "name": "Template Example",
    "variables": ["myPet"]
}

Possible user inputs for the variable myPet:

lovelyCat
LovelyCat
lovely_cat
Lovely_cat
LOVELY_CAT
lovely-cat
Lovely-Cat
LOVELY-CAT
lovely cat
Lovely Cat
LOVELY CAT

Generated content:

other contentLovelyCatOther content
other content lovelyCat Other content
other content lovely_cat Other content
other content Lovely_Cat Other content
other content LOVELY_CAT Other content
other content lovely-cat Other content
other content Lovely-Cat Other content
other content LOVELY-CAT Other content

After case transformation, style.prefix and style.suffix will be added to the variable value.

Example: