Boosting Frontend Productivity: Dynamic Template Generation with VSCode Snippets and Plop

In everyday Vue development, creating new pages and components often involves repetitive steps such as creating folders, .vue files, component directories, and writing boilerplate template, script, and style sections, which can waste a lot of time in large projects.

The article first shows how to define custom VSCode snippets, explaining the snippet JSON schema (prefix, body, $1, $2, description, etc.) and provides a concrete vue.json example that inserts a complete Vue single‑file component skeleton.

{
  "Print to console": {
    "prefix": "vue",
    "body": [
      "
",
      "
",
      "
"
    ],
    "description": "vue-template"
  }
}

Next, the article introduces Plop, a lightweight scaffolding tool built on Inquirer and Handlebars. By installing Plop ( npm install --save-dev plop ) and creating a plopfile.js , developers can define generators that ask for parameters (e.g., page name, whether a LESS file is needed) and then create files from Handlebars templates.

module.exports = function(plop) {
  plop.setGenerator('test', {
    description: 'generate a test',
    prompts: [
      { type: 'input', name: 'name', message: 'view name please', default: 'test' },
      { type: 'input', name: 'less', message: '需要less文件吗？(y/n)' }
    ],
    actions: data => {
      const name = '{{name}}';
      const actions = [];
      actions.push({
        type: 'add',
        path: `src/views/${name}/index.vue`,
        templateFile: 'plop-templates/view/index.hbs',
        data: { name }
      });
      if (data.less === 'y') {
        actions.push({
          type: 'add',
          path: `src/views/${name}/index.less`,
          templateFile: 'plop-templates/index.less'
        });
      }
      return actions;
    }
  });
};

The article also demonstrates more advanced usage, adding prompts for optional navigation bars and conditionally generating related markup in the Handlebars template using {{#if hasNavbar}} blocks.

// hbs file

Finally, the article summarizes that these small automation tricks—custom VSCode snippets and Plop generators—can significantly speed up daily front‑end work, helping developers finish tasks faster and leave more time for creative development.