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 官方文檔
來源： https://juejin.im/post/5c887bb5f265da2dba0262b0
附上參考文章后設置Laya的模板：
{ "React-Native Class":{ "scope": "javascript,typescript", "prefix": "azure", "body": [ "/*", "* @ author:Azure", "* @ email:XXXXXXXXX@qq.com", "* @ 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}*/", "\t\tthis.xx=null;", "\t}", "", "\tonAwake() ", "\t{", "\t\t", "\t}", "}" ], "description": "快速創建一個Laya模板類" } }