🧩 Boilerplates in VSCode

What is it?

A Visual Studio Code plugin streamlining the creation and management of reusable templates. It's an essential tool for developers looking to optimize their workflow in VSCode.

Why use it?

It's a versatile templating system designed for flexible application. Here are some practical use cases:

Project Boilerplates: Streamline the initial setup for complex projects, including web servers, prototypes, and standard templates.

Dynamic File Templates: Generate files with dynamic variables (docblocks, author info, dates, paths) for personalized, consistent documentation.

Dynamic Structures: Generate folders of files with dynamic variables like you might find in an Angular project.

File Distribution: Spread out files across existing directories / subdirectories of a project. (Some files in /etc, some in /var, some in /home)

Quickstart: A basic template

First, we create a template folder we can use.

1. Create a new template by pressing Cmd+Shift+P and > File Template: New template
2. Select $WORKSPACE/.vscode/templates
3. Type "My First Extension" in the prompt
4. Add some new file(s) in this newly opened project

You now have a working template. Here's how to use it:

Option 1: Generate into the root of project

Open your command panel with Cmd+Shift+P and select > File Template: Generate here...

You should now see the "My First Extension" available in the dropdown. Select that and watch the files appear in the root of your open folder.

Option 2: Generate into a specific folder

Right click a folder in the file explorer and select File Template: Generate here....

You should now see the "My First Extension" available in the dropdown. Select that and watch the files appear in the selected folder.

Template Setup

The structure of a template could look like this:

your-project/
├── manifest.json
└── src/
    ├── {filename}.ts
    ├── {filename}.scss
    └── index.html

By default, the filename copied from your template directory are the same. If you need a dynamic filename(s), you can wrap a variable in brackets like so:

{filename}.vue
{filename}-123.vue

This will prompt the user to provide a value for filename. If they input "Batman", you will get a directory like this:

Batman.vue
Batman-123.vue

We automatically include static variables from process.env and the nearest package.json, if one is available, but you can also define custom variables. There are a couple examples in the examples directory demonstrating a range of functionality for templates.

Note: We start looking for a package.json in the path you've selected and search upwards for the nearest one. This allows you to have multiple projects open in a workspace but still use the most accurate manifest.

For env vars, you can use them like this:

My Home: ${env.HOME}
My User: ${env.USER}

For package.json vars, you can use them like this:

${package.name}
${package.version}
...

To access variables input by the user, like filename if requested by VSCode:

${input.filename}

You can setup custom variables in settings like this:

"new-from-template.variables": {
    "${lorem}": "Lorem ipsum sit amet dolor adipiscing elit et al.",
    "${my-variable}": "Hello World."
}

Dynamic code can be executed via the eval() function in JavaScript by using a double bracket syntax like this: ${{ Date.now() }}

There are several variables injected into the dynamic variables scope, including:

// Special path variables (interpreted)
${{ workspaceRoot }}           = /Users/mattkenefick/Sites/Projects/vscode-file-template
${{ inputPathRelative }}       = .vscode/templates/my-first-extension/index.js
${{ outputPathRelative }}      = tmp/index.js
${{ inputDirectory }}          = /Users/mattkenefick/Sites/Projects/vscode-file-template/.vscode/templates/my-first-extension
${{ outputDirectory }}         = /Users/mattkenefick/Sites/Projects/vscode-file-template/tmp
${{ inputDirectoryRelative }}  = .vscode/templates/my-first-extension
${{ outputDirectoryRelative }} = tmp
${{ inputFilename }}           = index.js
${{ outputFilename }}          = index.js

You can also access the static variables (env/package) through the dynamic scope by prefixing like this: ${{ variables.package_version }}. You might do this to separate SEMVAR from your version, like this:

${{
    const [major, minor, patch] = variables.package_version.split('.');

    `Major: ${major}\nMinor: ${minor}\nPatch: ${patch}`
}}

You can also dynamically define variables on the fly within the template for later use. Let's say we wanted to define a custom "classname" to be used in multiple spots:

${--
    variables.className = outputPathRelative.split('.').slice(0, -1).join('.').split('/').join('-').toLowerCase().split('src-')[1]
--}

// The above can be later accessed via ${{ variables.className }} in the same template

Note: If you're trying the above technique, but the code still appears in your template, you may have a syntax error.

You can include standard JavaScript logic like conditionals as well:

${{
    if (variables.package_author.indexOf('Kenefick') > -1) {
        `It's Matt.`
    }
    else {
        `It's someone else.`
    }
}}

An example docblock might look like:

/**
 * @author ${package.author}
 * @package ${{ outputDirectoryRelative.split('src/')[1] }}
 * @project ${package.name}
 */

which may generate out as:

/**
 * @author Matt Kenefick <matt.kenefick@buck.co>
 * @package Page
 * @project MyProject
 */

Configuration

There are two places where templates are stored:

1. Your home directory, e.g. $HOME/VsCodeTemplates
2. Local vscode directory of your project, e.g. project/.vscode/templates

This can be adjusted in your settings.

"new-from-template.templateDirectories": [
    ".vscode/templates",
    "$HOME/VSCodeTemplates"
]