VSCode 自定义模板代码片段

发表于 阅读次数： 阅读次数： Changyan： 本文字数： 2.5k 阅读时长 ≈ 2 分钟

VSCode 自定义模板代码片段

场景

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

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
<template>

</template>

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

  }),
  methods: {

  },
  mounted () {

  }
}
</script>

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

使用

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

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

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
{
  // 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"
  // }
}

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

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
{
  // 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"
  }
}

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

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
{
  // 在最下方追加
  "vue teamplte": {
    "prefix": "vueTemplate",
    "body": [
      "<template>",
      "  $1",
      "</template>",
      "",
      "<script>",
      "export default {",
      "  data: () => ({",
      "",
      "  }),",
      "  methods: {",
      "",
      "  },",
      "  mounted () {",
      "",
      "  }",
      "}",
      "</script>"
    ],
    "description": "vue 的模板代码"
  }
}

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

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