1.新建全局模板
- 打開 File -> Preferences -> User Snippets ( 在macOS上 Code -> Preferences -> User Snippets)
-
選擇 New Global Snippets file 選項(xiàng)鸣峭，如圖：圖1.png
點(diǎn)擊選擇
-
在彈窗框內(nèi)輸入自己喜歡的名稱，然后保存圖2.png
-
在代碼編輯欄里看看到剛才創(chuàng)建的文件圖3.png
- 到這里模板已經(jīng)創(chuàng)建完成，下面只需要寫入你自己需要的文件即可袍嬉，這個(gè)是創(chuàng)建的JSON文件杈曲，所以只能在{...}內(nèi)寫需要的代碼
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: ",
"* @ date: $CURRENT_YEAR-$CURRENT_MONTH-$CURRENT_DATE $CURRENT_HOUR:$CURRENT_MINUTE",
"*/",
"class $TM_FILENAME_BASE 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 $TM_FILENAME_BASE"
],
"description": "創(chuàng)建一個(gè)React-Native類"
}
}
此處以React-Native 類文件進(jìn)行舉例說明谷炸，常用的字段也只有這幾個(gè)（scope遥赚，prefix疏咐，body纤掸，description）
如代碼的React-Native Class 字段：給模板取的名稱（這個(gè)可根據(jù)自己喜歡取名）
scope（固定字段）：文件創(chuàng)建屬性，比如javascript,typescript浑塞，可不寫借跪，但不能亂寫
prefix（固定字段）：智能提示選項(xiàng)卡，比如你取名rnc缩举，當(dāng)你創(chuàng)建一個(gè)文件后垦梆，輸入rnc后就會出現(xiàn)智能選項(xiàng)卡
-
body （固定字段）：字符串?dāng)?shù)組匹颤，放置代碼片段，一句代碼占用一個(gè)元素托猩。
注：縮進(jìn)使用 "\t" 印蓖，盡量不要使用空格 description（固定字段）：顧名思義，這個(gè)模板的描述京腥，智能提示卡上可顯示（所以應(yīng)簡短明了）
3.語法解釋
-
$1,$2,$3...$0:制表位赦肃，表示代碼片段創(chuàng)建好后光標(biāo)顯示的位置，$1表示光標(biāo)初始位置公浪，$2表示用戶按下鍵盤上的Tab鍵光標(biāo)移動的下一個(gè)位置他宛，依次類推，$3表示再次按下Tab鍵的下一個(gè)位置欠气，數(shù)字表示Tab按下幾下顯示的位置厅各，$0表示光標(biāo)結(jié)束的位置
注：如果兩個(gè)字段一樣，都可以使用相同的预柒，用戶輸入時(shí)队塘，兩處同時(shí)輸入 -
${1:className}:預(yù)占制表位，和上邊一樣宜鸯，只是上邊是顯示空白憔古，這個(gè)會在光標(biāo)處顯示預(yù)占位className，這個(gè)className可以寫你自己需要的東西淋袖，當(dāng)Tab選中時(shí)可修改鸿市，比如${1:params1}，${2:params2}
注：預(yù)占制表位可嵌套使用即碗，比如${1:another ${2:placeholder}} ${1|one,two,three|}：占位符有選擇的值焰情，當(dāng)用戶Tab選中是顯示可選的值，用戶給出的值中選擇拜姿。語法：在| |（雙豎線）內(nèi)寫預(yù)選參數(shù)烙样，多個(gè)參數(shù)用“冯遂，”隔開蕊肥，根據(jù)需要，數(shù)字1也是可變的
$name 或 ${name:default}:插入可變的值蛤肌，當(dāng)一個(gè)變量不設(shè)置,默認(rèn)或空字符串插入壁却，當(dāng)一個(gè)變量是未知的(即它的名字不是下面定義的變量)變量的名稱，那插入之后將轉(zhuǎn)換成占位符
可以使用的基本變量
TM_SELECTED_TEXT 當(dāng)前選中的文本或空字符串
TM_CURRENT_LINE 當(dāng)前行中的內(nèi)容（即你哪行輸入模板裸准，即顯示當(dāng)行）
TM_CURRENT_WORD 詞的內(nèi)容根據(jù)光標(biāo)或空字符串
TM_LINE_INDEX 基于zero-index的行號（即你在哪行創(chuàng)建的快速模板的行號 減1）
TM_LINE_NUMBER 基于一個(gè)索引的行號（即你在哪行創(chuàng)建的快速模板的行號）
TM_FILENAME 當(dāng)前文檔的文件名
TM_FILENAME_BASE 當(dāng)前文檔的文件名（不包括擴(kuò)展）
TM_DIRECTORY 當(dāng)前文檔的目錄
TM_FILEPATH 當(dāng)前文檔的完整的文件路徑
CLIPBOARD 剪貼板的內(nèi)容
可插入的日期和時(shí)間變量
CURRENT_YEAR 當(dāng)前日期的年(example '2019')
CURRENT_YEAR_SHORT 當(dāng)前年的后兩位(example '19')
CURRENT_MONTH 當(dāng)前月兩位表示法 (example '02')
CURRENT_MONTH_NAME 當(dāng)前月全稱 (example 'March')
CURRENT_MONTH_NAME_SHORT 當(dāng)前月簡稱 (example 'Mar')
CURRENT_DATE 當(dāng)天兩位表示法 (example '06')
CURRENT_DAY_NAME 星期 (example 'Monday')
CURRENT_DAY_NAME_SHORT 星期簡稱 (example 'Mon')
CURRENT_HOUR 24小時(shí)制展东，小時(shí)
CURRENT_MINUTE 分
CURRENT_SECOND 秒
例如：
{
"hello": {
"scope": "javascript,html",
"prefix": "hello",
"body": "$CURRENT_YEAR-$CURRENT_MONTH-$CURRENT_DATE $CURRENT_HOUR:$CURRENT_MINUTE"
}
}
輸出：當(dāng)前的年月日（例如：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 -->
創(chuàng)建代碼片段基本就會用到這些，其他的一些命令使用比較少炒俱，就不一一解釋了盐肃！有興趣的可以查看Visual Studio Code 官方文檔
