在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 官方文檔