Quickly generate files and folders from reusable templates in Visual Studio Code.
- Create file templates with any structure (multiple files and subfolders).
- Generate files from templates directly into your workspace.
- Use variables (
@{variable}) in both file names/paths and file content. - Store templates globally for use across all your projects.
- Simple and fast workflow from the Command Palette or context menu.
- Open VS Code.
- Go to the Extensions view (
Ctrl+Shift+X/Cmd+Shift+X). - Search for
Templify. - Click Install.
Alternatively, build from source:
git clone https://github.com/Rul991/file-templates-vs-code
cd file-templates-vs-code
bun install
bun run buildThen press F5 to launch an Extension Development Host.
- Open the Command Palette (
Ctrl+Shift+P/Cmd+Shift+P). - Run Templify: Create template.
- Enter a template name/path (e.g.
react-component). - Enter file paths one by one (e.g.
index.tsx,styles.css,README.md).- Use forward slashes to include subfolders (e.g.
src/components/Component.tsx). - Press
Enterwith an empty input to stop adding files.
- Use forward slashes to include subfolders (e.g.
- Each created file will be opened in the editor so you can add content.
Template files are stored in your VS Code global storage (under templates/<template-name>).
- Right‑click on a folder in the Explorer and select Templify: Create from template
- or run the command from the Command Palette.
- Choose the template you want to use.
- If the template contains variables, you will be prompted to enter a value for each one.
- The files will be created in the selected folder (or the workspace root if no folder is selected).
- Run Templify: Delete template from the Command Palette.
- Select the template to delete.
- The template folder will be permanently removed.
Templates support variables using the syntax @{variableName}.
- Variables can be used in file contents and in file/folder names.
- When creating files from a template, you will be prompted to enter a value for each unique variable found.
- The variable name can contain any characters except
}.
Example:
Template structure:
my-component/
├── @{ComponentName}.tsx
└── styles.css
Content of @{ComponentName}.tsx:
import React from 'react';
const @{ComponentName} = () => {
return <div className="@{ComponentName}">Hello @{ComponentName}</div>;
};
export default @{ComponentName};When using this template, you will be asked for the value of ComponentName. If you enter Button, the resulting file will be Button.tsx with the content correctly substituted.
- Visual Studio Code version 1.76.0 or higher.
This extension is built with Bun.
bun run build– bundles the extension toout/extension.js.bun run pack– builds and packages a.vsixfile.
This project is licensed under the GPL-3.0-or-later license.