Skip to content
| Marketplace
Sign in
Visual Studio Code>Other>TemplaterNew to Visual Studio Code? Get it now.
Templater

Templater

Callum Booth

|
250 installs
| (0) | Free
Template files and components, the quick way
Installation
Launch VS Code Quick Open (Ctrl+P), paste the following command, and press enter.
Copied to clipboard
More Info

Templater

Please report any feature requests or bugs on Github

Features

Allows the creation of template files to be used for quick file creation

How to use

To use, open the command pallete and select the Templater: Create file.... You will then be prompted with the following options:

Default Templates

There are a number of predefined templates that are available to use.

You can disable the default templates from displaying add "templater.includeDefaults": false in settings

Project Templates

You can create templates specifc to the a project by placing any templates in a .templater folder at the root of your project.

Global Templates

You can also have global templates that can be used across projects. To enable this feature, add "templater.customTemplatesUri": "location/to/folder"

Creating a template

There are two types of template you can create, a file template and group template.

You can also organise your templates by folder. For example you may want to split your global templates by language and/or framework. For e.g.

React/
    javascript/
        functionalComponent.jsx
    typescript/
        functionalCompoment.tsx

Vue/
    starter.group/
        starter.js
        stater.test.js

When creating a new file you will be able to navigate through the categories to find the template you wish to use

File Templates

A file template can be used a stand alone template or be placed into a group template. This can be done by either right clicking the folder and selecting Templater: Create file... or using the command pallete. Once you have selected the template, you will be asked to choose the name of the new file. You can either just put a name or a path and name without the extension. For e.g.

filename
folder/subfolder/filename

Currently there is the ability to inject the filename into the template, this can be done by using the placeholder [[$name]]

Exmaple

import React from 'react'

const [[$name]] = (props) => {
    ...code
}

export default [[$name]]

Group Templates

A group template is for a set of files that are colocated. A group template is defined by creating a folder ending with .group. For example Header.group

folder.group/
    file.extension
    file.test.extension

As per the file template when inputting a name you can either put the name or the path, however for the group template this will be the name of the folder and any files that are using the [[$name]] template within the filename.

For exmaple, take the following two group templates

component1.group/
    [[$name]].jsx
    [[$name]].test.jsx

component2.group/
    file.jsx
    file.test.jsx

When using the name header becomes

header/
    header.jsx
    header.test.jsx

header/
    file.jsx
    file.test.jsx

For group templates only files using the [[$name]] will be converted to the chosen name.

Release Notes

1.0.0

Initial release

1.1.0

Added functionality for group templates

  • Contact us
  • Jobs
  • Privacy
  • Manage cookies
  • Terms of use
  • Trademarks
© 2025 Microsoft