snippet [ˈsnɪpɪt], 或者说「 code snippet 」, 也即代码片，指的是能够帮助输入重复代码模式，比如循环或条件语句的模板。通过 snippet , 我们仅仅输入一小段字符串，就可以在代码片引擎的帮助下，生成预定义的模板代码，接着我们还可以通过在预定义的光标位置之间跳转，来快速补全模板。

当然，看图更易懂。下图将 ivue 补全为 vue 文件基本骨架，并通过光标的跳转，快速补全了待填键值对：

关于基于 vscode 的代码片段配置，看看这篇文章就够了：跟我一起在 Visual Studio Code 添加自定义 snippet(代码段) (opens new window)

可以在这个网址 (opens new window)将自己的代码生成编辑器可以解析的代码片段，毕竟手动配置代码片段也是比较麻烦的

好了，废话说了这么多，该上干货了。翠花，上酸菜

咳咳，还要再啰嗦几句：由于本人目前只用 Vue, 那么就说一下代码片段中 vue.json 和 vue-html.json 的区别吧：如果是在一个空白的 vue 文件中 (里面没有内容), 那么 vue.json 里的代码片段生效，就像 init Vue 这种初始化 Vue 的代码片段就需要写在这个 json 中; 而如果这个 vue 文件中已经有内容了，比如在 init Vue 以后，又要添加别的 html 标签代码片段，那这种代码片段就需要写到 vue-html.json 中了。当然了，他俩的共同点就是只在 .vue 文件中生效

Vue 代码片段

vue.json

{
  "init Vue": {
    "prefix": "ivue",
    "body": [
      "<template>",
      "  <div class=\"$1\">$2</div>",
      "</template>",
      "",
      "<script>",
      "export default {",
      "  name: '$TM_FILENAME_BASE',",
      "  components: {},",
      "  props: {},",
      "  data() {",
      "    return {}",
      "  },",
      "  computed: {},",
      "  watch: {},",
      "  methods: {",
      "    init() {}",
      "  },",
      "  created() {",
      "    this.init()",
      "  },",
      "  mounted() {}",
      "}",
      "</script>",
      "",
      "<style lang=\"less\">",
      ".$1 {",
      "}",
      "</style>",
      ""
    ],
    "description": "init Vue"
  }
}

ElementUI 代码片段

html

vue-html.json

{
  "el-dialog": {
    "prefix": "edg",
    "body": [
      "<el-dialog",
      "  :visible.sync=\"$1\"",
      "  :title=\"$2\"",
      "  :close-on-click-modal=\"false\"",
      "  :close-on-click-esc=\"false\"",
      "  :show-close=\"false\"",
      ">",
      "  $5",
      "  <span slot=\"footer\">",
      "    <el-button @click=\"reset$3Form\">取消</el-button>",
      "    <el-button type=\"primary\" @click=\"submit$4Form\">确定</el-button>",
      "  </span>",
      "</el-dialog>"
    ],
    "description": "el-dialog"
  },
  "el-form": {
    "prefix": "efm",
    "body": [
      "<el-form :model=\"$1\" :ref=\"$2\" :rules=\"$3\" label-width=\"auto\">",
      "  <el-form-item label=\"$4\" prop=\"$5\">",
      "    <el-input v-model=\"$6\" placeholder=\"$7\"></el-input>",
      "  </el-form-item>",
      "</el-form>"
    ],
    "description": "el-form"
  },
  "el-table": {
    "prefix": "etb",
    "body": [
      "<el-table :data=\"$1\" height=\"100%\" border>",
      "  <el-table-column label=\"$2\" prop=\"$3\" align=\"center\"></el-table-column>",
      "</el-table>"
    ],
    "description": "el-table"
  },
  "el-table-column-template": {
    "prefix": "etct",
    "body": [
      "<el-table-column label=\"${1:操作}\" align=\"center\">",
      "  <template slot-scope=\"scope\">",
      "    <el-button type=\"text\" icon=\"el-icon-edit\" @click=\"edit$2(scope.row)\">编辑</el-button>",
      "    <el-button type=\"text\" icon=\"el-icon-delete\" @click=\"del$2(scope.row)\">删除</el-button>",
      "  </template>",
      "</el-table-column>"
    ],
    "description": "el-table-column-template"
  },
  "el-upload": {
    "prefix": "eup",
    "body": [
      "<el-upload",
      "  :action=\"$api.upload($1)\"",
      "  multiple$2",
      "  :data=\"${3:uploadData}\"",
      "  :show-file-list=\"${4:false}\"",
      "  :accept=\"$5\"",
      "  :before-remove=\"${6:beforeRemove}\"",
      "  :on-remove=\"${7:handleRemove}\"",
      "  :on-success=\"${8:handleSuccess}\"",
      "  :on-error=\"${9:handleError}\"",
      "  :file-list=\"${10:fileList}\"",
      ">",
      "  <el-button size=\"small\" type=\"primary\">${11:点击上传}</el-button>",
      "</el-upload>"
    ],
    "description": "el-upload"
  },
  "acceptExcel": {
    "prefix": "acex",
    "body": [
      "accept=\"application/vnd.ms-excel, application/vnd.openxmlformats-officedocument.spreadsheetml.sheet, application/vnd.ms-project\""
    ],
    "description": "acceptExcel"
  }
}

js

javascript.json

{
  "el-confirm": {
    "prefix": "ecfm",
    "body": [
      "this.$$confirm(`此操作将永久删除该$1, 是否继续`, '提示', {",
      "  type: 'warning'",
      "}).then(() => {",
      "  $2",
      "})"
    ],
    "description": "el-confirm"
  },
  "el-resetFields": {
    "prefix": "erf",
    "body": ["this.$$refs[this.$1].resetFields()"],
    "description": "el-resetFields"
  },
  "el-validate": {
    "prefix": "evf",
    "body": ["this.$refs[this.$1].validate(valid => {", "  if (valid) {", "    $2", "  }", "})"],
    "description": "el-validate"
  }
}

html5 代码片段

html.json

{
  "html5": {
    "prefix": "html5",
    "body": [
      "<!DOCTYPE html>",
      "<html lang=\"en\">",
      "  <head>",
      "    <meta charset=\"UTF-8\">",
      "    <meta name=\"viewport\" content=\"width=device-width, initial-scale=1.0\">",
      "    <meta http-equiv=\"X-UA-Compatible\" content=\"ie=edge\">",
      "    <title>${1:Document}</title>",
      "    <style type=\"text/css\">",
      "      ",
      "    </style>",
      "  </head>",
      "  <body>",
      "    $2",
      "  </body>",
      "</html>"
    ],
    "description": "HTML5"
  }
}

md 代码片段

markdown.json

{
  "initPost": {
    "prefix": "ipost",
    "body": [
      "---",
      "layout: post",
      "title: $1",
      "date: ${2:$CURRENT_YEAR-$CURRENT_MONTH-$CURRENT_DATE}",
      "categories: [$3]",
      "tags: [$4]",
      "keywords: $5",
      "thumbnail: /img/$6/thumbnail.png",
      "---",
      "",
      "$6"
    ],
    "description": "initPost"
  }
}