🧩 Boilerplates in VSCode
Tags: webdev, javascript, programming, showdev
Published: 2023-11-13 19:11:35

[![Download the plugin](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/qcmr1gtha4bnzqdlzy40.png)](https://marketplace.visualstudio.com/items?itemName=PolymerMallard.new-from-template)

## 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.

{% embed https://youtu.be/sQeYK9Lk1oc %}

## 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](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/pvmor66gik24wu3j50ub.jpg)

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"
]
```