利用VSCode自定义代码片段Snippets

作为一前端工程师，创建文件或者码字时中总会遇到一些重复性的代码，如果我可以像快捷键一样输入一个命令就可以调出这些代码多好，那么学会snippets对于提高工作效率必不可少。

vscode版本信息

版本: 1.66.0 (user setup)
提交: e18005f0f1b33c29e81d732535d8c0e47cafb0b5
日期: 2022-03-30T05:50:14.623Z
Electron: 17.2.0
Chromium: 98.0.4758.109
Node.js: 16.13.0
V8: 9.8.177.11-electron.0
OS: Windows_NT x64 10.0.19044

开始

打开编辑器>右下角设置按钮>用户代码片段

创建自定义片段

创建代码片段分两种类型：

• 全局代码片段（每种语言环境下都能触发代码块）。
• 对应语言的局部代码片段（只能在对应语言环境下才能触发），新建全局代码片段会在 snippets 目录下生成 .code-snippets 为后缀的配置文件，而新建对应语言的代码片段会生成 对应语言 + .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"
// }
}

snippets语法

prefix      :代码片段名字，即输入此名字就可以调用代码片段。
body        :这个是代码段的主体.需要编写的代码放在这里,　　　　　 
$1          :生成代码后光标的初始位置.
$2          :生成代码后光标的第二个位置,按tab键可进行快速切换,还可以有$3,$4,$5.....
${1,字符}    :生成代码后光标的初始位置(其中1表示光标开始的序号，字符表示生成代码后光标会直接选中字符。)
description :代码段描述,输入名字后编辑器显示的提示信息。

snippets变量

我们在编写模板的时候，可以插入一些vscode给我门提供的变量

使用 $name 或者 ${name:default} 可以插入变量的值。如果未设置变量，则会插入其默认值或空字符串。当变量未知（未定义其名称）时，会将插入的变量名称转换为占位符。

1）文档相关：

变量	变量含义
TM_SELECTED_TEXT	当前选定的文本或空字符串
TM_CURRENT_LINE	当前行的内容
TM_CURRENT_WORD	光标下的单词内容或空字符串
TM_LINE_INDEX	基于零索引的行号
TM_LINE_NUMBER	基于单索引的行号
TM_FILENAME	当前文档的文件名
TM_FILENAME_BASE	当前文档没有扩展名的文件名
TM_DIRECTORY	当前文档的目录
TM_FILEPATH	当前文档的完整文件路径
CLIPBOARD	剪贴板的内容
WORKSPACE_NAME	已打开的工作空间或文件夹的名称

2）当前日期和时间：

变量	变量含义
CURRENT_YEAR	当前年份
CURRENT_YEAR_SHORT	当前年份的最后两位数
CURRENT_MONTH	月份为两位数（例如'02'）
CURRENT_MONTH_NAME	月份的全名（例如'June'）（中文语言对应六月）
CURRENT_MONTH_NAME_SHORT	月份的简称（例如'Jun'）（中文语言对应是6月）
CURRENT_DATE	这个月的哪一天
CURRENT_DAY_NAME	当天是星期几（例如'星期一'）
CURRENT_DAY_NAME_SHORT	当天是星期几的简称（例如'Mon'）（中文对应周一）
CURRENT_HOUR	24小时时钟格式的当前小时
CURRENT_MINUTE	当前分
CURRENT_SECOND	当前秒

3）要插入行或块注释，请遵循当前语言：

变量	变量含义
BLOCK_COMMENT_START	输出：PHP /*或HTML格式<!--
BLOCK_COMMENT_END	输出：PHP */或HTML格式-->
LINE_COMMENT	输出：PHP //或HTML格式

snippets示例

我创建的是基于文件类型的局部代码片段vue.json

下面是自己的vue文件的代码片段

{
    "vue": {
        "prefix": "vue",
        "body": [
            "<template>",
            "	<div></div>",
            "</template>",
            "<script>",
            "	export default {",
            "		name: \"$0\",",
            "		components: {},",
            "		props: {},",
            "		data() {",
            "			return {};",
            "		},",
            "		computed: {},",
            "		created() {},",
            "		mounted() {},",
            "	  destroyed() {},",
            "		methods: {},",
            "	};",
            "</script>",
            "<style lang=\"scss\" scoped>",
            "</style>"
            "<style scoped>",
            "</style>"
        ],
        "description": "vue"
    },
}

创建多个snippets

同类型文件文件如何创建多个代码片段呢，还是在原来的文件里，复制一份即可，修改prefix值

如下

{
"vue": {
    "prefix": "vue",
    "body": [
        "<template>",
        "	<div></div>",
        "</template>",
        "<script>",
        "	export default {",
        "		name: \"$0\",",
        "		components: {},",
        "		props: {},",
        "		data() {",
        "			return {};",
        "		},",
        "		computed: {},",
        "		created() {},",
        "		mounted() {},",
        "	  destroyed() {},",
        "		methods: {},",
        "	};",
        "</script>",
        "<style lang=\"scss\" scoped>",
        "</style>"
        "<style scoped>",
        "</style>"
    ],
    "description": "vue"
},
"vxe": {
    "prefix": "vxe",
    "body": [
        "<template>",
        "    <vxe-grid ref=\"xGrid\" v-bind=\"gridOptions\"></vxe-grid>",
        "</template>",
        "<script>",
        "	export default {",
        "		name: \"\",",
        "		components: {},",
        "		props: {},",
        "		data() {",
        "			return {",
        "				gridOptions: {",
        "					formConfig: {",
        "						titleWidth: 100,",
        "						titleAlign: \"right\",",
        "						items: [{ field: \"name\", title: \"app.body.label.name\", span: 8, titlePrefix: { message: \"app.body.valid.rName\", icon: \"fa fa-exclamation-circle\" }, itemRender: { name: \"$input\", props: { placeholder: \"请输入名称\" } } }]",
        "					},",
        "					columns: [",
        "						{ type: \"checkbox\", title: \"ID\", width: 120 },",
        "						{ field: \"name\", title: \"Name\", sortable: true, titleHelp: { message: \"名称必须填写！\" }, editRender: { name: \"input\", attrs: { placeholder: \"请输入名称\" } } }",
        "					],",
        "					pagerConfig: {",
        "						pageSize: 10,",
        "						pageSizes: [5, 10, 15, 20, 50, 100, 200, 500, 1000]",
        "					},",
        "					proxyConfig: {",
        "						seq: true,",
        "						sort: true,",
        "						filter: true,",
        "						form: true,",
        "",
        "						props: {",
        "							result: \"result\",",
        "							total: \"page.total\"",
        "						},",
        "						ajax: {",
        "							query: ({ page, sorts, filters, form }) => {",
        "								const queryParams = Object.assign({}, form);",
        "								const firstSort = sorts[0];",
        "								if (firstSort) {",
        "									queryParams.sort = firstSort.property;",
        "									queryParams.order = firstSort.order;",
        "								}",
        "								filters.forEach(({ property, values }) => {",
        "									queryParams[property] = values.join(\",\");",
        "								});",
        "								return fetch(`${this.serveApiUrl}/api/pub/page/list/${page.pageSize}/${page.currentPage}`, queryParams).then(response => response.json());",
        "							},",
        "							delete: ({ body }) => {",
        "								return fetch(`${this.serveApiUrl}/api/pub/save`, { method: \"POST\", headers: { \"Content-Type\": \"application/json\" }, body: JSON.stringify(body) }).then(response => response.json());",
        "							},",
        "							save: ({ body }) => {",
        "								return fetch(`${this.serveApiUrl}/api/pub/save`, { method: \"POST\", headers: { \"Content-Type\": \"application/json\" }, body: JSON.stringify(body) }).then(response => response.json());",
        "							}",
        "						}",
        "					}",
        "				}",
        "			};",
        "		},",
        "		computed: {},",
        "		created() {},",
        "		mounted() {},",
        "		destroyed() {},",
        "		methods: {}",
        "	};",
        "</script>",
        "<style lang=\"scss\" scoped>",
        "</style>",
        "<style scoped>",
        "</style>"
    ],
    "description": "vxe"
    }
}

snippets在线工具

附上编写代码片段的在线工具：

snippet-generator.app