这是第 75 篇不掺水的原创，想获取更多原创好文，请搜寻公众号关注咱们吧~ 本文首发于政采云前端博客：辞别复制粘贴：动静模板生成小技巧

前言

在日常开发中，咱们须要不停的新建页面和组件。以 Vue 我的项目为例，咱们在新建一个页面的时候，须要经验一遍又一遍反复的过程：

1、先新建一个文件夹

2、而后新建一个.vue文件，写上<template>、<script>、<style>

3、如果页面波及多个组件，还要新建 component 文件夹，并反复以上两个步骤

4、最初才是咱们的业务代码

假如新建一个页面，并复制粘贴模板代码须要 1 分钟的工夫，一个我的项目如果有 60 个页面，就得破费 1 个小时写这种重复性高、无聊且干燥的代码。这显然不是咱们想看到的，上面给大家分享几个提效小技巧。

基于 Vscode 的 Snippets 自定义代码块

通过 Vscode 的 Snippets 咱们能够自定义 Snippets ，从而实现快捷生成代码片段。

  • 关上 Vscode ，顺次点击文件——首选项——用户代码片段

Snippets 语法

prefix: 代码片段名字，即输出此名字就能够调用代码片段body: 这个是代码段的主体.须要编写的代码放在这里　　　 $1: 生成代码后光标的初始地位$2: 生成代码后光标的第二个地位,按 tab 键可进行疾速切换,还能够有 $3,$4,$5.....${1,字符}: 生成代码后光标的初始地位（其中 1 示意光标开始的序号，字符示意生成代码后光标会间接选中字符）description: 代码段形容,输出名字后编辑器显示的提示信息tab键制表符:\t换行: \r 或者\n

以 vue.json 为例：

{    "Print to console": {        "prefix":"vue",        "body": [            "<template>",            "\t<div>test</div>",            "</template>",            "<script>",            "export default{",                "\tmounted(){$1},",                "\tcomponents: {},",                "\tdata() {",                "\t\treturn {",                "\t\t};",                "\t},",          "}",            "</script>",            "<style lang='less'>",            "</style>"        ],        "description": "vue-template"    }}

成果展现如下：

基于 plop 自定义根底的文件模板

plop的介绍能够看 plop官网，plop 性能次要是基于 inquirer 和 handlebars 。

简略的说，plop 这个轻量的脚手架就是通过提前配置好要生成的页面模板，并且在命令行中承受指定的参数，从而生成咱们须要的模板。

  • 在我的项目中装置 plop

npm install --save-dev plop

  • 我的项目根目录下新建plopfile.js
module.exports = function(plop){  plop.setGenerator('test',{ // 这里的 test 是一个本人设定的名字，在执行命令行的时候会用到      description: 'generate a test', // 这里是对这个plop的性能形容      prompts: [        {          type: 'input', // 问题的类型          name: 'name', // 问题对应失去答案的变量名，能够在actions中应用该变量          message: 'view name please', // 在命令行中的问题          default: 'test' // 问题的默认答案        }      ],      actions: data => {          const name = '{{name}}';          const actions = [          {              type: 'add', // 操作类型，这里是增加文件              path: `src/views/${name}/index.vue`, // 模板生成的门路              templateFile: 'plop-templates/view/index.hbs', // 模板的门路              data: {                name: name              }          }        ];        return actions;      }    });}
  • 在根目录下创立 plop-templates 文件夹，并在 plop-templates/view 里新建一个index.hbs
<template>  <div /></template><script>  export default {    name: '{{ properCase name }}',    props: {},    data() {      return {}    },    created() { },    mounted() { },    methods: {}  }</script><style lang="less"></style>
  • 新增脚本

在package.json中新增

"script":{    ...,    "new":"plop"}
  • 运行npm run new

至此，一个简略的固定模板就主动生成好了。

plop 进阶

此时咱们曾经能够生成固定的模板了，那么问题来了，有些文件夹上面须要 .less 文件，有些则不须要，此时咱们又该如何动静配置呢？

话不多说，间接看例子吧！

// plopfile.js 文件module.exports = function(plop){  plop.setGenerator('test',{      description: 'generate a test',      prompts: [        {          type: 'input',          name: 'name',          message: '请输出文件夹名称',        },        {          type: 'input',          name: 'less',          message: '须要less文件吗？(y/n)',        }      ],      actions: data => {        const name = '{{name}}';        let actions = [];        if (data.name) {          actions.push({            type: 'add',            path: `src/${name}/index.vue`, // 文件生成后所在的地位            templateFile: 'plop-templates/view/index.hbs', // 模板门路            data: {              name: name            }          });        }        if (data.less === 'y') {          actions.push({            type: 'add',            path: `src/${name}/index.less`, // 文件生成后所在的地位            templateFile: 'plop-templates/index.less', // 模板门路          })        }        return actions;      }    });  }

此时咱们曾经能够动静配置文件的个数，那么问题又来了，在一个页面中有时须要导航条，有时不须要导航条，这种状况该如何解决呢？

// plopfile.js 文件module.exports = function(plop){  plop.setGenerator('test',{      description: 'generate a test',      prompts: [        {          type: 'input',          name: 'pageName',          message: '请输出文件夹名称',        },        {          type: 'input',          name: 'less',          message: '须要less文件吗？(y/n)',        },{          type: 'confirm',          name: 'hasNavbar',          message: '须要页面导航栏吗？(y/n)',          default: this.hasNavbar        }      ],      actions: data => {        const { pageName, less, hasNavbar } = data;        const name = '{{pageName}}';        let actions = [];        if (pageName) {          actions.push({            type: 'add',            path: `src/${name}/index.vue`,            templateFile: 'plop-templates/view/index.hbs',            data: {              name: name,              hasNavbar: hasNavbar, // 是否有操作按钮            }          });        }        if (less === 'y') {          actions.push({            type: 'add',            path: `src/${name}/index.less`,            templateFile: 'plop-templates/index.less',          })        }        return actions;      }    });  }
// hbs 文件<template>  <div>    {{#if hasNavbar}}      <div>导航栏</div>    {{/if}}  </div></template><script>  export default {    name: '{{ properCase name }}',    props: {},    data() {      return {}    },    created() { },    mounted() { },    methods: {}  }</script><style lang="less"></style>

成果展现如下：

总结

本文次要给大家介绍了几种简略的新建文件模板的小技巧，每天一个提效小技巧，准点上班不是梦！若有其余更好的办法，欢送大家在留言区评论。

参考文献

辞别手敲template,主动生成根底模板(Vue)

VScode—自定义代码片段snippets

基于PLOP应用命令行主动生成 .vue 文件

举荐浏览

浅析 vue-router 源码和动静路由权限调配

编写高质量可保护的代码：高深莫测的正文

招贤纳士

政采云前端团队（ZooTeam），一个年老富裕激情和创造力的前端团队，隶属于政采云产品研发部，Base 在风景如画的杭州。团队现有 40 余个前端小伙伴，平均年龄 27 岁，近 3 成是全栈工程师，妥妥的青年风暴团。成员形成既有来自于阿里、网易的“老”兵，也有浙大、中科大、杭电等校的应届新人。团队在日常的业务对接之外，还在物料体系、工程平台、搭建平台、性能体验、云端利用、数据分析及可视化等方向进行技术摸索和实战，推动并落地了一系列的外部技术产品，继续摸索前端技术体系的新边界。

如果你想扭转始终被事折腾，心愿开始能折腾事；如果你想扭转始终被告诫须要多些想法，却无从破局；如果你想扭转你有能力去做成那个后果，却不须要你；如果你想扭转你想做成的事须要一个团队去撑持，但没你带人的地位；如果你想扭转既定的节奏，将会是“5 年工作工夫 3 年工作教训”；如果你想扭转原本悟性不错，但总是有那一层窗户纸的含糊… 如果你置信置信的力量，置信平凡人能成就不凡事，置信能遇到更好的本人。如果你心愿参加到随着业务腾飞的过程，亲手推动一个有着深刻的业务了解、欠缺的技术体系、技术发明价值、影响力外溢的前端团队的成长历程，我感觉咱们该聊聊。任何工夫，等着你写点什么，发给 ZooTeam@cai-inc.com