VisualStudioCode中创建代码模板
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={ainer}>",
"\t\t\t</View>",
"\t\t)",
"\t}",
"}",
"",
"const styles = ate({",
"\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中输出<!-- -->
例如：js竖线分割的字符串转数组
{
"hello": {
"scope": "javascript,html",
"prefix": "hello",
"body": "$BLOCK_COMMENT_START Hello World $BLOCK_COMMENT_END"
}
}
输出：
<!-- Hello World -->
创建代码⽚段基本就会⽤到这些，其他的⼀些命令使⽤⽐较少，就不⼀⼀解释了！有兴趣的可以查看
来源：
附上参考⽂章后设置Laya的模板：
{
"React-Native Class":{
"scope": "javascript,typescript",
"prefix": "azure",
"body": [
"/*",
"* @ author:Azure",
"* @ email:XXXXXXXXX@qq",
"* @ data: $CURRENT_YEAR-$CURRENT_MONTH-$CURRENT_DATE $CURRENT_HOUR:$CURRENT_MINUTE", "*/",
"export default class $TM_FILENAME_BASE extends Laya.Script {",
"",
"\tconstructor() {",
"\t\tsuper();",
"\t\t/** @prop {name:name, tips:\"提⽰⽂本\", type:Node/Int/Number/String/Bool, default:null}*/",
"\=null;",
"\t}",
"",
"\tonAwake() ",
"\t{",
"\t\t",
"\t}",
"}"
],
"description": "快速创建⼀个Laya模板类"
}
}

版权声明：本站内容均来自互联网，仅供演示用，请勿用于商业和其他非法用途。如果侵犯了您的权益请与我们联系QQ:729038198，我们将在24小时内删除。