在日常开发中，我们需要不停的新建页面和组件。
以 Vue 项目为例，我们在新建一个页面的时候，需要经历一遍又一遍重复的过程：
1、先新建一个文件夹
2、然后新建一个 .vue 文件，写上 <template>、<script>、<style>
3、如果页面涉及多个组件，还要新建 component 文件夹，并重复以上两个步骤
4、最后才是我们的业务代码

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

基于 Vscode 的 Snippets 自定义代码块

通过 Vscode 的 Snippets 我们可以自定义 Snippets，从而实现快捷生成代码片段。

  • 打开 Vscode，依次点击文件——首选项——用户代码片段

image.png

html.json html代码片段

  1. {
  2.     "HTML Snippets": {
  3.         "prefix": "!doc",
  4.         "body": [
  5.             "<!DOCTYPE html>",
  6.             "<html>",
  7.             "\t<head>",
  8.             "\t\t<meta charset=\"UTF-8\" />",
  9.             "\t\t<meta name=\"viewport\" content=\"width=device-width, initial-scale=1.0, user-scalable=false\" />",
  10.             "\t\t<title>$1</title>",
  11.             "\t</head>",
  12.             "\t<body>",
  13.             "\t\t$0",
  14.             "\t</body>",
  15.             "</html>"
  16.         ],
  17.         "description": "HTML Template"
  18.     }
  19. }

使用 ：新建html文件后输入 ！ 然后按 tab 键自动补全；或者！doc 再 enter
image.png
生成
image.png

vue.json vue代码片段

  1. {
  2.  "Print to console": {
  3.   "prefix":"vue",
  4.   "body": [
  5.    "<template>",
  6.    "\t<div>test</div>",
  7.    "</template>",
  8.    "<script>",
  9.    "export default{",
  10.     "\tmounted(){$1},",
  11.     "\tcomponents: {},",
  12.     "\tdata() {",
  13.     "\t\treturn {",
  14.     "\t\t};",
  15.     "\t},",
  16.     "}",
  17.    "</script>",
  18.    "<style lang='less'>",
  19.    "</style>"
  20.   ],
  21.   "description": "vue-template"
  22.  }
  23. }

使用：新建vue文件，输入 vue ，按下enter键
image.png
生成：
image.png