在Visual Studio Code 中建立模板（代码片断）

1.新建全局模板

• 打开 File -> Preferences -> User Snippets ( 在macOS上 Code -> Preferences -> User Snippets)
• 选择 New Global Snippets file 选项，如图：

  

  点击选择
• 在弹窗框内输入本身喜欢的名称，而后保存

  

• 在代码编辑栏里看看到刚才建立的文件

  

• 到这里模板已经建立完成，下面只须要写入你本身须要的文件便可，这个是建立的JSON文件，因此只能在{...}内写须要的代码

2.字段定义解释

{
	"React-Native Class":{
		"scope": "javascript,typescript",
		"prefix": "rnc",
		"body": [
			"import React, { Component } from 'react'",
			"import { StyleSheet, View, Text ,Image } from 'react-native'",
			"",
			"/**",
			"*",
			"* @ author: ",
			"* @ email: ",
			"* @ data: $CURRENT_YEAR-$CURRENT_MONTH-$CURRENT_DATE $CURRENT_HOUR:$CURRENT_MINUTE",
			"*/",
			"class ${1:className} extends Component {",
			"",
			"\trender() {",
			"\t\treturn (",
			"\t\t\t<View style={styles.container}>",
			"\t\t\t</View>",
			"\t\t)",
			"\t}",
			"}",
			"",
			"const styles = StyleSheet.create({",
			"\tcontainer: {",
			"\t\tflex: 1",
			"\t}",
			"})",
			"",
			"export default ${1:className}"
		],
		"description": "建立一个React-Native类"
	}
}
复制代码

此处以React-Native 类文件进行举例说明，经常使用的字段也只有这几个（scope，prefix，body，description）

• 如代码的React-Native Class 字段：给模板取的名称（这个可根据本身喜欢取名）

• scope（固定字段）：文件建立属性，好比javascript,typescript，可不写，但不能乱写

• prefix（固定字段）：智能提示选项卡，好比你取名rnc，当你建立一个文件后，输入rnc后就会出现智能选项卡

• body （固定字段）：字符串数组，放置代码片断，一句代码占用一个元素。

  注：缩进使用 "\t" ，尽可能不要使用空格
  复制代码

• description（固定字段）：顾名思义，这个模板的描述，智能提示卡上可显示（因此应简短明了）

3.语法解释

• $1,$2,$3...$0:制表位，表示代码片断建立好后光标显示的位置，$1表示光标初始位置，$2表示用户按下键盘上的Tab键光标移动的下一个位置，依次类推，$3表示再次按下Tab键的下一个位置，数字表示Tab按下几下显示的位置，$0表示光标结束的位置

  注：若是两个字段同样，均可以使用相同的，用户输入时，两处同时输入
  复制代码

• ${1:className}:预占制表位，和上边同样，只是上边是显示空白，这个会在光标处显示预占位className，这个className能够写你本身须要的东西，当Tab选中时可修改，好比${1:params1}，${2:params2}

  注：预占制表位可嵌套使用，好比${1:another ${2:placeholder}}
  复制代码

• ${1|one,two,three|}：占位符有选择的值，当用户Tab选中是显示可选的值，用户给出的值中选择。语法：在| |（双竖线）内写预选参数，多个参数用“，”隔开，根据须要，数字1也是可变的

• $name 或 ${name:default}:插入可变的值，当一个变量不设置,默认或空字符串插入，当一个变量是未知的(即它的名字不是下面定义的变量)变量的名称，那插入以后将转换成占位符

能够使用的基本变量

TM_SELECTED_TEXT 当前选中的文本或空字符串
    TM_CURRENT_LINE 当前行中的内容（即你哪行输入模板，即显示当行）
    TM_CURRENT_WORD 词的内容根据光标或空字符串
    TM_LINE_INDEX 基于zero-index的行号（即你在哪行建立的快速模板的行号 减1）
    TM_LINE_NUMBER 基于一个索引的行号（即你在哪行建立的快速模板的行号）
    TM_FILENAME 当前文档的文件名
    TM_FILENAME_BASE 当前文档的文件名（不包括扩展）
    TM_DIRECTORY 当前文档的目录
    TM_FILEPATH 当前文档的完整的文件路径
    CLIPBOARD 剪贴板的内容
复制代码

可插入的日期和时间变量

CURRENT_YEAR 当前日期的年(example '2019')
    CURRENT_YEAR_SHORT 当前年的后两位(example '19')
    CURRENT_MONTH 当前月两位表示法 (example '02')
    CURRENT_MONTH_NAME 当前月全称 (example 'March')
    CURRENT_MONTH_NAME_SHORT 当前月简称 (example 'Mar')
    CURRENT_DATE 当天两位表示法 (example '06')
    CURRENT_DAY_NAME 星期 (example 'Monday')
    CURRENT_DAY_NAME_SHORT 星期简称 (example 'Mon')
    CURRENT_HOUR 24小时制，小时
    CURRENT_MINUTE 分
    CURRENT_SECOND 秒
复制代码

例如：

{
    "hello": {
        "scope": "javascript,html",
        "prefix": "hello",
        "body": "$CURRENT_YEAR-$CURRENT_MONTH-$CURRENT_DATE $CURRENT_HOUR:$CURRENT_MINUTE"
    }
}
复制代码

输出：当前的年月日（例如：2019-03-06 11:03）

可插入的块语法

BLOCK_COMMENT_START 例如在PHP中输出/*或者HTML中输出<!--
    BLOCK_COMMENT_END 例如在PHP中输出*/或者HTML中输出 -->
    LINE_COMMENT 例如在PHP中输出//或者HTML中输出<!-- -->
复制代码

例如：

{
    "hello": {
        "scope": "javascript,html",
        "prefix": "hello",
        "body": "$BLOCK_COMMENT_START Hello World $BLOCK_COMMENT_END"
    }
}
复制代码

输出：

<!-- Hello World -->
复制代码

建立代码片断基本就会用到这些，其余的一些命令使用比较少，就不一一解释了！有兴趣的能够查看Visual Studio Code 官方文档