Home

Awesome

<img src="https://raw.githubusercontent.com/samkirkland/plop-templates/master/resources/logo.png" width="48">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.

<img src="https://raw.githubusercontent.com/samkirkland/plop-templates/master/resources/menu.png">

Extension Setup

  1. Install the VSCode extension
  2. 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
  3. 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)

TitleDescriptionDefault Value
configFileNameFile name or path to plop fileplopfile.js at root of workspace
terminalNameName of the Terminal window created for plopterminalName
plopCommandBy default this extension assumes plop is installed globally (npm install -g plop).<br>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.<br><br>Example:<br>"scripts": { "add-from-template": "plop" }<br><br>Next update the plopCommand setting with your command name (in the example above "add-from-template")plop
destinationPathName of the prompt the destination path will be passed in asdestinationpath

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

  1. Install plop for the current project by running npm install --save-dev plop

  2. 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...
}

  1. Go to File → Preferences → Settings → Search for plopTemplates

  2. Edit the "Plop Command" setting to your script name from step 3. In the example above we used plop-script

Resolving common issues

Release Notes

1.2.0

1.1.0

1.0.5

1.0.4

1.0.3

1.0.2

1.0.0