vs code有一个很方便的模板定义功能:User Snippets(中文版称为“用户代码片段”),它允许用户为某个前缀定义一个代码片段。使用时,只要输入这个前缀,点击回车,vs code就会自动插入这个代码片段。
中文版为文件>首选项>用户代码片段
。点击后会在顶部出现一个输入框:
假设我们要为vue创建一个模板,可以在这里输入vue
,然后回车,vs code会自动新建一个名为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"
// }
"vue template": {
"prefix": "vue",
"body": [
"<template>",
" <div>$0",
" </div>",
"</template>\n",
"<script>",
"export default {",
" name: '${TM_FILENAME_BASE}',",
" data() {",
" return {\n",
" };",
" },",
" methods: {\n",
" },",
"};",
"</script>\n",
"<style lang=\"scss\" scoped>\n",
"</style>",
"$2"
],
"description": "vue template"
}
}
主键vue template
是代码片段的名字,没有太大的意义。prefix
是片段前缀,我们只要输入这个前缀,点击回车,即可插入body中定义的模板。description
是代码片段的描述。
body中有几个特殊的值,其中$0
是光标最终停下的位置($1
也是类似的效果),$2
会插入一个制表符,${TM_FILENAME_BASE}
引用的是当前文件名(不包含后缀)。
保存该文件后代码片段即可生效。
现在我们新建一个vue文件,输入vue
:
然后回车,可以看到,页面自动生成了如下内容:
vs code自动把前缀vue
替换成了json中定义的body的内容,可谓是非常方便。
同样的,也可以定义一个HTML文件的代码片段,这样只要在文件中输入html
,就可以迅速生成一个HTML页面的基本结构了。
除了这种通用的模板,还可以为其他常写的代码编写片段。比如我们希望输入关键字for
即可自动生成一个循环语句,可以这样写:
{
"for": {
"prefix": "for",
"body": [
"for (let i = 0; i < $0; i++) {",
" ",
"}"
]
}
}
当然了,用户代码片段可以用于定义任何模板,包括java模板、php模板等,只要你是vs code用户即可。