VS-Code Folder Templates

What is this and why

VS-Code Folder Templates is an extension that creates your folders/files as specified in custom templates.

Why? Because creating the same directories over and over again is annoying to do manually.

Features

• Create Templates for folder structures and files and then let the extension do the rest.
• Spend your time actually programming and not creating files.

Templating

To create your templates you have two options.

1. Create templates on your File System
2. Go into your settings.json from VSCode and create templates manually. (Open the command palette and select "Open Settings (JSON)" to easily access your settings.json)

Interpolation

The value <FTName> (or [FTName]) will always be interpolated into the component name you are asked for when creating the structure. Adding a transformer with this pattern <FTName | transformer> (or <FTName % transformer>) will give you the ability to transform your componentname wherever needed. The currently supported transformers are:

• lowercase
• uppercase
• camelcase
• capitalcase
• constantcase
• dotcase
• headercase
• nocase
• paramcase
• pascalcase
• pathcase
• sentencecase
• snakecase
• singular
• plural
• lowercasefirstchar
• capitalize
• kebabcase

It is possible to specify a set of custom Variables which will be interpolated as well. You will be asked to enter a value for every custom variable defined. They can be transformed the same way as the default <FTName>

Examples

Date values

As of v3.12.0 it is possible to add dates to a file name or its content. However it will only be possible to add the current time in your local time zone or UTC. The way to achieve this is by using the placeholder [DATE_NOW(FORMATSTRING)] for local timezone or [DATE_NOW_UTC(FORMATSTRING)] for UTC time.

As an example [DATE_NOW('yyyy-mm-dd')] will result in 2024-03-04. Please take a look at this https://date-fns.org/v2.30.0/docs/format documentation to see all the available formatting patterns.

Thanks to the change-case and pluralize libraries, for the transformations

• https://github.com/blakeembrey/change-case
• https://www.npmjs.com/package/pluralize

Creating templates on the File System

One option is to create a .fttemplates folder in your project root and save all templates you want to access in this project there. This path can be changed via the folderTemplates.templateFolderPath setting in your vscode settings.

To use global templates over multiple projects use the Set Custom Global Folder Templates Directory command to choose a folder which functions as a global .fttemplates directory.

DEPRECATED: You can also use the global template folder that exists in the directory of this extension.

Create a folder with files and folders inside your template directory and use placeholders wherever you need them. That's it. You created your template. It works out of the box but if you need some special settings for a template you can create a .ftsettings.json file inside your template folder.

See more in the examples

folderTemplates.templateFolderPath

This setting is used to deviate from the default .fttemplates folder path at the root of your project folder. If this setting is set then Folder Templates will look for your templates at the specified path (relative to your project root)

• Default .fttemplates

Available .ftsettings.json Properties

Creating your Template in VS Code settings.json {#template-format}

There are two key parts to creating your FT Templates. Folder Structures and File Templates.

folderTemplates.structures {#foldertemplatestructures}

The folderTemplates.structures option takes an array of objects where one object equals one Folder Structure.

Example Structure

{
  "name": "My Custom Template",
  "customVariables": ["CustomVar", "CustomVar2"],
  "omitParentDirectory": true,
  "structure": [
    {
      "fileName": "<FTName>.jsx",
      "template": "Typescript Functional Component"
    },
    {
      "fileName": "tests/<FTName>.test.js"
    },
    {
      "fileName": "index.js",
      "template": "IndexFile"
    },
    {
      "fileName": "bashfile.sh",
      "template": "echo \"Hello World\"",
      "isExecutable": true
    },
    {
      "fileName": "<CustomVar>",
      "template": "EmptyDirectory"
    }
  ]
}