Plop File Templates for Visual Studio Code

Install the extension on the VSCode Marketplace

Features

This extension adds single and multi-file templates to Visual Studio Code. Add a template by right clicking the desired location and selecting 📄 New File from Template

Creating new project item from template

To invoke template selection, simply right click on a folder or file in vscode file explorer and click the 📄 New File from Template menu item.

Extension Setup

Install the VSCode extension
Install plop.js globally using npm install plop -g (optionally you can install plop for just your current project). Note: Plop 3.1.1 or higher required
Now for the fun part! Create a new file called plopfile.js at the root of your project (same folder as package.json, the name/location is configurable).

module.exports = function (plop) {
    // create your generators here
    // Read more about templates at https://plopjs.com/
    plop.setGenerator("basic template", {
        description: "this is a skeleton plopfile",
        prompts: [
            {
                // You should always include a "destinationpath" prompt when using this extension
                // this extension will automatically answer this prompt for the user.
                // Which allows your plop file to be placed in the correct location
                type: "input",
                name: "destinationpath",
                message: "Template destination path"
            },
            {
                type: "input",
                name: "fileName",
                message: "file name"
            }
        ],
        actions: [
            {
                type: "add",
                path: "{{destinationpath}}/{{fileName}}.js",
                templateFile: "plop-templates/exampleFile.hbs"
            }
        ]
    });
};

ProTip: Add plop templates as a recommended extension to your `Workspace` or `Project` settings file and commit it. Then everyone on your team will see this extension!

Settings

To change settings open vscodes settings window and navigate to the plop extension settings

(File → Preferences → Settings → Search for plopTemplates)

Title	Description	Default Value
configFileName	File name or path to plop file	`plopfile.js` at root of workspace
terminalName	Name of the Terminal window created for plop	`terminalName`
plopCommand	By default this extension assumes plop is installed globally (`npm install -g plop`). If you'd like to use a local version of plop you can do so by adding `"add-form-template": "plop"` to your `"scripts"` record in your `package.json`. Example: `"scripts": { "add-from-template": "plop" }` Next update the `plopCommand` setting with your command name (in the example above "add-from-template")	`plop`
destinationPath	Name of the prompt the destination path will be passed in as	`destinationpath`

Using a local version of plop

This extension expects plop.js to be install globally using npm install plop -g if you do not want to do this you can use a local version by doing the following

Install plop for the current project by running npm install --save-dev plop
In your package.json file under scripts add a new plop-script script.

{
    // rest of your package.json file...
    "scripts": {
        "plop-script": "plop", // this tells the extension to use this projects version of plop
    },
    // rest of your package.json file...
}

Go to File → Preferences → Settings → Search for plopTemplates
Edit the "Plop Command" setting to your script name from step 3. In the example above we used plop-script

Resolving common issues

Cannot find module ...\node_modules\plop\src\plop.js'
- You need to install plop globally, do so by running the following npm install -g plop
- Alternatively you can install plop for just the current project
The term 'plop' is not recognized as the name of a cmdlet, function, script file, or operable program...
- You need to install plop globally, do so by running the following npm install -g plop
- Alternatively you can install plop for just the current project
Couldn't load plop config file at the path: ".../plopfile.js" - ENOENT: no such file or directory, stat '...\plopfile.js'
- You need to create a plopfile with generators. Please see Extension Setup

Release Notes

1.2.0

Plop 3.1.1 or higher required
Removed shipped plop dependency
Removed shipped handlebars dependency
Reduced size from 7,200KB --> 54KB
Reduced load time

1.1.0

Fixing bug caused in 1.0.5 causing MODULE_NOT_FOUND error
Updated plop to latest version (2.7.4) and node-plop (0.26.2)

1.0.5

Documentation updates

1.0.4

Skip 'destinationpathName' parameter automatically (thanks @rbadapanda)

1.0.3

Added destinationpath command

1.0.2

Fixed command naming
Added link to vscode marketplace
Added issues link
Added plopCommand setting

1.0.0

Initial release

File Templates

Sam Kirkland