New from Template

Creates a new file/folder structure from user-defined templates capable of logic and variables.

Quickstart

First, we need to create a template to use.

1. Create a new template pressing Cmd+Shift+P and ">File Template: New template"
2. Select $WORKSPACE/.vscode/templates
3. Write "My First Extension" in the prompt
4. Add new file(s) in this newly opened project

You now have a working template. Go to a different project and press Cmd+Shift+P and ">File Template: Generate here..." You should now see the "My First Extension" available in the dropdown. After selecting that, you should see your files appear in the project.

Read further to learn more about structuring your templates and using dynamic code/variables.

Usage

1. Right click a file in the tree explorer and select "File Template: Generate here..." or using the action bar (Cmd+Shift+P)
2. Select template to use
3. Add any required inputs (optional)

If you don't use the file Explorer tree (left panel), it will add your template to the root of current folder structure.

Configuration

You can define custom variables to use in the scripts and multiple locations for templates via settings. We automatically include variables from process.env and the nearest package.json, if there's one available. There are a couple examples in the examples directory demonstrating a range of functionality for templates.

To use env vars, you can add them like so:

My Home: ${env.HOME}
My User: ${env.USER}

To use package.json vars:

${package.name}
${package.version}
...

To use user-defined input variables (as asked by the plugin), you can use like:

${input.filename}

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.

Custom Variables

Hardcoded variables with no special wrappings. You can add these to your User Settings.

	"new-from-template.variables": {
		"${lorem}": "Lorem ipsum sit amet dolor adipiscing elit et al.",
		"${my-variable}": "Hello World."
	}

These would be accessible in your template through ${lorem} and ${my-variable}.

Template Locations

Identify where templates can be found. You can add these to your User Settings.

	"new-from-template.templateDirectories": [
		".vscode/templates",
		"$HOME/VSCodeTemplates"
	]

Available variables are:

~ = process.env.HOME
$HOME = process.env.HOME
$WORKSPACE= workspaceRoot

Evaluated Code

You can evaluate code / conditionals within the templates using a special syntax. It's executed through eval() in the NodeJS environment.

// Print date
${{ Date.now() }}

// Access variables from process.env, package, and anything user defined
// Note that `package.version` becomes `package_version` in this context
${{ variables.package_version }}

// 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

// Performing operations
${{
	const [major, minor, patch] = variables.package_version.split('.');

	`Major: ${major}\nMinor: ${minor}\nPatch: ${patch}`
}}

// Conditionals
${{
	if (variables.package_author.indexOf('Kenefick') > -1) {
		`It's Matt.`
	}
	else {
		`It's someone else.`
	}
}}

// Setting variables (note the syntax change)
${--
	variables.myVariable = 'My Variable'
--}

Value: ${{ variables.myVariable }}
Value Upper: ${{ variables.myVariable.toUpperCase() }}

Creating a template

This extension will search for folders within your new-from-template.templateDirectories list. Every extension must have a manifest.json file.

{
	"name": "My Extension"
}

Or if you want to have your files in a subdirectory:

{
	"name": "My Extension",
	"rootDir": "src"
}

All files (except the manifest) will be copied to the directory you select. Binary files are transferred over without modifiction. ASCII files are evaluated for variables.

By default, the filenames 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

Any variables that are requested of the user will be accessible through an "input" object within the template, for example:

<div class="view-${input.filename"></div>

<!-- <div class="view-Batman></div> -->

Release Notes

0.2.1

• Modify template to include src/ by default

0.2.0

• Add dynamic filenames
• Improve variables and add ability to set them
• Add examples
• Update README

0.1.0

• Initial release