VSCode 自定义模板代码片段

本文最后更新于:2020年12月30日 早上

场景

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 创建代码片段