VSCode 自定义模板代码片段

本文最后更新于:2018年10月30日 上午

VSCode 自定义模板代码片段

场景

VSCode 时常需要输入一些重复的代码片段,例如创建 vue 文件后总是要写一些类似于下面这样的文件。

<template>

</template>

<script>
export default {
  data: () => ({

  }),
  methods: {

  },
  mounted () {

  }
}
</script>

能不能有什么办法使用快捷键,或者提示将之快捷打出来呢?VSCode 已经想到了这些并提供了一个名为 Snippet 的功能。

使用

打开命令面板(_查看 > 命令面板_,快捷键是 _CS-P_),输入 Snippet 找到 Preferences: Configure User Snippets(配置用户代码片段),选择你所需要配置的代码片段生效的语言。

这里以 Vue 为例,回车之后会打开一个名为 vue.json 的文件,初始配置大致如下

{
  // Place your snippets for vue here. Each snippet is defined under a snippet name and has a prefix, body and
  // description. The prefix is what is used to trigger the snippet and the body will be expanded and inserted. Possible variables are:
  // $1, $2 for tab stops, $0 for the final cursor position, and ${1:label}, ${2:another} for placeholders. Placeholders with the
  // same ids are connected.
  // Example:
  // "Print to console": {
  // 	"prefix": "log",
  // 	"body": [
  // 		"console.log('$1');",
  // 		"$2"
  // 	],
  // 	"description": "Log output to console"
  // }
}

上面那些注释其实就给出了一个配置的例子。放开注释我们研究一些每一行的作用

{
  // Place your snippets for vue here. Each snippet is defined under a snippet name and has a prefix, body and
  // description. The prefix is what is used to trigger the snippet and the body will be expanded and inserted. Possible variables are:
  // $1, $2 for tab stops, $0 for the final cursor position, and ${1:label}, ${2:another} for placeholders. Placeholders with the
  // same ids are connected.
  // Example:
  // 代码片段的名字
  "Print to console": {
    "prefix": "log", // 前缀,在 vue 文件中输入这个前缀就会有代码提示
    // 输入前缀回车之后在文件中生成的内容,单行直接用字符串,否则使用数组
    "body": [
      //下面是每一行的内容,$1 指的是第一个变量(光标会首先停在这里)
      "console.log('$1');",
      // $2 是第二个变量,在输入完第一个变量后按 Tab 就能跳转到第二个变量所在的位置
      "$2"
    ],
    // 关于这个代码片段的描述
    "description": "Log output to console"
  }
}

好了,我们也来模仿写一个自己代码片段吧

{
  // 在最下方追加
  "vue teamplte": {
    "prefix": "vueTemplate",
    "body": [
      "<template>",
      "  $1",
      "</template>",
      "",
      "<script>",
      "export default {",
      "  data: () => ({",
      "",
      "  }),",
      "  methods: {",
      "",
      "  },",
      "  mounted () {",
      "",
      "  }",
      "}",
      "</script>"
    ],
    "description": "vue 的模板代码"
  }
}

然后,在 .vue 文件中输入 vueTemplate 试试吧

更多的详细信息(英文)可以参考 Microsoft 官方的 VSCode 创建代码片段


本博客所有文章除特别声明外,均采用 CC BY-SA 4.0 协议 ,转载请注明出处!