DEV Community

Matt Kenefick
Matt Kenefick

Posted on • Edited on

🧩 Boilerplates in VSCode

Download the plugin

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

Available options

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
Enter fullscreen mode Exit fullscreen mode

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
Enter fullscreen mode Exit fullscreen mode

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
Enter fullscreen mode Exit fullscreen mode

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}
Enter fullscreen mode Exit fullscreen mode

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

${package.name}
${package.version}
...
Enter fullscreen mode Exit fullscreen mode

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

${input.filename}
Enter fullscreen mode Exit fullscreen mode

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."
}
Enter fullscreen mode Exit fullscreen mode

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
Enter fullscreen mode Exit fullscreen mode

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}`
}}
Enter fullscreen mode Exit fullscreen mode

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
Enter fullscreen mode Exit fullscreen mode

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.`
    }
}}
Enter fullscreen mode Exit fullscreen mode

An example docblock might look like:

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

which may generate out as:


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

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"
]
Enter fullscreen mode Exit fullscreen mode

Top comments (0)