代码片段是一种方便重复输入代码的模板。（例如循环或条件语句或vue文件的基础模版）
内置片段
VSCode 已经包含了多种语言的内置片段，例如：JavaScript、TypeScript、Markdown 和 PHP。
您可以通过在命令面板中运行插入片段命令来获取当前文件编程语言的片段列表，从而查看语言的可用片段。
创建你自己的片段
您可以轻松定义自己的片段，无需任何扩展。要创建或编辑您自己的代码片段，请选择“文件” > “首选项”下的“用户代码段”（macOS 上的“代码” > “首选项”），然后选择应显示代码片段的语言（按语言标识符），或者选择“新建全局代码段”文件选项（如果应该）出现在所有语言中。VSCode 为您管理底层代码片段文件的创建和刷新。
Snippets 文件采用 JSON 编写，可以定义无限数量的代码段。代码段支持大多数用于动态行为的 TextMate 语法，根据插入上下文智能地格式化空白，并允许轻松进行多行编辑。
下面是for JavaScript 循环片段的示例：
// in file 'Code/User/snippets/javascript.json'
{
"For Loop": {
"prefix": ["for", "for-const"],
"body": ["for (const ${2:element} of ${1:array}) {", "\t$0", "}"],
"description": "A for loop."
}
在上面的例子中：
- “For Loop”是
代码片段名称。 prefix定义显示代码段的触发词。body是一行或多行内容，插入时将连接为多行。换行符和嵌入的选项卡将根据插入片段的上下文进行格式化。description是输入触发此显示的片段的可选描述。
另外，所述body的例子中的上述具有三个占位符（在遍历顺序列出）： ，1:array，1:array，{2:element}和0。您可以∗∗使用Tab快速跳转到下一个占位符∗∗，此时您∗∗可以编辑占位符或再次跳转到下一个∗∗。‘冒号后面的字符串‘（如果有）是‘默认文本‘，例如element在0。您可以∗∗使用Tab快速跳转到下一个占位符∗∗，此时您∗∗可以编辑占位符或再次跳转到下一个∗∗。‘冒号后面的字符串‘（如果有）是‘默认文本‘，例如element在{2:element}. 占位符遍历顺序是按数字升序，从一开始；零是一个可选的特殊情况，它总是最后出现，并在光标位于指定位置时退出片段模式。
片段范围
片段是有范围的，因此只建议相关片段。片段可以通过以下任一方式确定范围：
- 片段范围内的语言（可能是所有）
- 该项目范围，其片段的作用域（可能是所有）
语言片段范围
根据是否在以下位置定义，每个代码段都适用于一种、几种或所有（“全局”）语言：
- 一个语言片断文件
- 一个全局性片段文件
单语言用户定义片段在特定语言的片段文件（例如javascript.json）中定义，您可以通过Preferences: Configure User Snippets通过语言标识符访问该文件。片段仅在编辑为其定义的语言时才可访问。
多语言和全局用户定义片段都定义在“全局”片段文件（带有文件后缀的JSON .code-snippets）中，也可以通过Preferences: Configure User Snippets 访问。在全局代码段文件中，代码段定义可能有一个附加scope属性，该属性采用一个或多个语言标识符，这使得代码段仅可用于那些指定的语言。如果未提供任何scope属性，则全局代码段可用于所有语言。
大多数用户定义的片段都限定在一种语言内，因此在特定于语言的片段文件中定义。
变量
使用$name或${name:default}，您可以插入变量的值。当未设置变量时，将插入其默认值或空字符串。当变量未知（即未定义其名称）时，将插入该变量的名称并将其转换为占位符。
可以使用以下变量：
- TM_SELECTED_TEXT 当前选中的文本或空字符串
- TM_CURRENT_LINE 当前行的内容
- TM_CURRENT_WORD 光标下单词的内容或空字符串
- TM_LINE_INDEX 基于零索引的行号
- TM_LINE_NUMBER 基于一个索引的行号
- TM_FILENAME 当前文档的文件名
- TM_FILENAME_BASE 当前文档的文件名，不带扩展名
- TM_DIRECTORY 当前文档的目录
- TM_FILEPATH 当前文档的完整文件路径
- RELATIVE_FILEPATH 当前文档的相对（相对于打开的工作区或文件夹）文件路径
- CLIPBOARD 剪贴板的内容
- WORKSPACE_NAME 打开的工作区或文件夹的名称
- WORKSPACE_FOLDER 打开的工作区或文件夹的路径
插入当前日期和时间：
- CURRENT_YEAR 本年度
- CURRENT_YEAR_SHORT 当前年份的最后两位数字
- CURRENT_MONTH 月份为两位数（例如“02”）
- CURRENT_MONTH_NAME 月份的全名（例如“七月”）
- CURRENT_MONTH_NAME_SHORT 月份的简称（例如“Jul”）
- CURRENT_DATE 一个月中的哪一天
- CURRENT_DAY_NAME 日期名称（例如“星期一”）
- CURRENT_DAY_NAME_SHORT 一天的简称（例如“星期一”）
- CURRENT_HOUR 24 小时制的当前小时
- CURRENT_MINUTE 当前分钟
- CURRENT_SECOND 当前秒
- CURRENT_SECONDS_UNIX 自 Unix 纪元以来的秒数
插入随机值：
- RANDOM 6位随机 Base-10 数字
- RANDOM_HEX 6位随机 Base-16 数字
- UUID V4版本 UUID
对于插入行或块注释，遵循当前语言：
- BLOCK_COMMENT_START示例输出：PHP/*或 HTML<!--
- BLOCK_COMMENT_END示例输出：PHP*/或 HTML-->
- LINE_COMMENT 示例输出：在 PHP 中
注：\t是代码风格中tab的距离
自定义代码片段
vue文件的基础模版
/* vue自定义基础模板 */
"vue custom template ": {
"scope": "vue",
"prefix": "vueT",
"body": [
"<template>",
"\t<div class=\"app-container\">",
"\t\t${0:${1:${TM_FILENAME_BASE}}}",
"\t</div>",
"</template>",
"",
"<script>",
"export default {",
"\tname: '${TM_FILENAME_BASE/(.)/${1:/upcase}/}',",
"\tcomponents: {},",
"\tprops: {},",
"\tdata() {",
"\t\treturn {\n",
"\t\t};",
"\t},",
"\tcomputed: {},",
"\twatch: {},",
"\tcreated() {},",
"\tmounted() {},",
"\tmethods: {",
"\t}",
"}",
"</script>",
"<style scoped lang='scss'>",
"</style>",
""
],
"description": "vue custom template自定义模板"
},
自定义弹框基础模版
/* vue的弹框dialog基础模板 */
"vue dialogCustom template ": {
"scope": "vue",
"prefix": "dialogTemplate",
"body": [
"<template>",
"\t<el-dialog",
"\t\t:title=\"headerTitle\" ",
"\t\t:visible.sync=\"dialogVisible\" ",
"\t\t:before-close=\"beforeClose\"" ,
"\t>",
"\t\t<el-form",
"\t\t\tref=\"addForm\" ",
"\t\t\t:model=\"addForm\"",
"\t\t\t:rules=\"formRules\"",
"\t\t\tlabel-position=\"right\"" ,
"\t\t\tlabel-width=\"130px\"" ,
"\t\t\tstyle=\"margin: 0px 50px\" ",
"\t\t>",
"\t\t\t<el-form-item label=\"名称\" prop=\"name\">",
"\t\t\t\t<el-input",
"\t\t\t\t\tv-model.trim=\"addForm.companyName\"",
"\t\t\t\t\tplaceholder=\"请输入名称\"",
"\t\t\t\t/>",
"\t\t\t</el-form-item>",
"\t\t</el-form>",
"\t\t<div slot=\"footer\" class=\"dialog-footer\">",
"\t\t\t<el-button @click=\"beforeClose\"> 取消 </el-button>",
"\t\t\t<el-button type=\"primary\" @click=\"submitClick\" :loading=\"loading\">",
"\t\t\t\t确定",
"\t\t\t</el-button>",
"\t\t</div>",
"\t</el-dialog>",
"</template>",
"",
"<script>",
"export default {",
"\tname: '${TM_FILENAME_BASE/(.)/${1:/upcase}/}',",
"\tcomponents: {},",
"\tprops: {},",
"\tdata() {",
"\t\treturn {",
"\t\t\theaderTitle: '新增',",
"\t\t\tdialogVisible: false,",
"\t\t\tloading: false,",
"\t\t\taddForm: {",
"\t\t\t\tname: '',",
"\t\t\t},",
"\t\t\tformRules:{",
"\t\t\t\tname: [",
"\t\t\t\t\t{ required: true, message: '请输入名称', trigger: 'blur' },",
"\t\t\t\t],",
"\t\t\t}",
"\t\t};",
"\t},",
"\tcomputed: {},",
"\twatch: {},",
"\tcreated() {},",
"\tmounted() {},",
"\tmethods: {",
"\t\topen(type, data) {",
"\t\t\tthis.dialogVisible = true;",
"\t\t},",
"\t\tbeforeClose() {",
"\t\t\tthis.$confirm('退出后已输入数据无法保存, 是否继续?', '提示', {",
"\t\t\t\tconfirmButtonText: '确定',",
"\t\t\t\tcancelButtonText: '取消',",
"\t\t\t\ttype: 'warning',",
"\t\t\t})",
"\t\t\t\t.then(() => {",
"\t\t\t\t\tthis.closeDialog();",
"\t\t\t\t})",
"\t\t\t\t.catch(() => {});",
"\t\t},",
"\t\tcloseDialog() {",
"\t\t\tthis.dialogVisible = false;",
"\t\t\tthis.$refs.addForm.resetFields();",
"\t\t},",
"\t\tsubmitClick() {",
"\t\t\tthis.$refs.addForm.validate((valid) => {",
"\t\t\t\tif (valid) {",
"\t\t\t\t\tconsole.log(11);",
"\t\t\t\t\tthis.dialogVisible=false;",
"\t\t\t\t}",
"\t\t\t});",
"\t\t},",
"\t}",
"};",
"</script>",
"<style scoped lang='scss'>",
"</style>",
""
],
"description": "vue dialogCustom template自定义弹框模板"
},
如果对您有所帮助，请点个赞给予支持一下^_^
