Visual Studio Code (VS Code)自定義代碼模板

在日常程序編寫時，一段代碼或說明會重複出現，這時候就能夠使用模板，有利於提升咱們的工做效率

VSCode 做爲一種輕量級的代碼編輯器，業界內頗受歡迎；下面就介紹一下如何利用VSCode snippet 製做代碼模板。

建立一個snippets

• 菜單欄選擇File
• 下拉菜單中選擇 Preferences
• 再選擇User snippets，出現下圖狀況，選擇對應的語言便可；若是沒有你須要的語言，你須要安裝對應的語言插件。

Snippets內容使用JSON格式進行定義。

好比我想新建一個 Vue 模板：則選擇 vue.json (Vue) 如圖：

而後輸入下面的 json 代碼：

{
	"vue template": {
		"prefix": "vuem",
		"body": [
			"<template>",
			" <div>",
			" ",
			" </div>",
			"</template>",
			"<script>",
			" export default {",
			" name:'$1',",
			" data () {",
			" return {",
			" ",
			" }",
			" },",
			" computed:{",
			" ",
			" },",
			" methods:{",
			" ",
			" },",
			" components: {",
			" ",
			" },",
			" }",
			"</script>",
			"<style scoped>",
			" ",
			"</style>",
			""
		],
		"description": "vue template"
	},
}
複製代碼

保存，而後新建.vue文件，輸入 vuem+tab 或 vuem+enter 即生成模板

• vue template ：當前snippet名字。
• prefix ：前綴，代碼塊使用快捷方式；鍵入前綴，按tab鍵，代碼塊就會被使用。
• body ：代碼塊內容；換行使用\r\n。
• description ：鍵入前綴，vscode 感知到前綴，顯示的說明內容。
• $1,$2,$0 ：指定代碼模塊生成後，編輯光標出現位置; 使用Tab鍵進行切換(編輯光標按$1,$2,$3...$0的順序跳轉)，$0是光標最後可切換位置。

Snippet語法

Tabstops

$1，$2指定代碼塊生成後，光標出現的位置；不一樣位置的相同$1位置同時出現光標。

Placeholders

給光標出現位置加上默認值；例如，${1:another ${2:placeholder}}；$1處位置默認值是another。

Choice

光標位置設置多個值可供選擇; 例如，${1|one,two,three|}；$1位置處能夠選擇one,two,three中一個詞填充在此處。

Variables

• 經常使用變量
  • TM_SELECTED_TEXT 當前選中內容或空字符串
  • TM_CURRENT_LINE 當前行內容
  • TM_CURRENT_WORD 光標處字符或空字符串
  • TM_LINE_INDEX 從0開始的行號
  • TM_LINE_NUMBER 從1開始的行號
  • TM_FILENAME 當前被編輯文檔名
  • TM_FILENAME_BASE 當前被編輯文檔名，沒有後綴
  • TM_DIRECTORY 當前被編輯文檔目錄
  • TM_FILEPATH 當前被編輯文檔全路徑
  • CLIPBOARD 當前剪切板內容
• 日期和時間相關變量
  • CURRENT_YEAR 當前年
  • CURRENT_YEAR_SHORT 當前年後兩位
  • CURRENT_MONTH 月份，兩位數字表示，例如02
  • CURRENT_MONTH_NAME 月份全稱，例如 'July'
  • CURRENT_MONTH_NAME_SHORT 月份簡寫 ，例如'Jul
  • CURRENT_DATE 某天
  • CURRENT_DAY_NAME 星期幾， 例如'Monday'
  • CURRENT_DAY_NAME_SHORT 星期幾的簡寫， 'Mon'
  • CURRENT_HOUR 小時，24小時制
  • CURRENT_MINUTE 分鐘
  • CURRENT_SECOND 秒數
• 變量格式化

${TM_FILENAME/(.*)\\..+$/$1/}
  |           |         |  |
  |           |         |  |-> no options
  |           |         |
  |           |         |-> references the contents of the first
  |           |             capture group
  |           |
  |           |-> regex to capture everything before
  |               the final `.suffix`
  |
  |-> resolves to the filename
複製代碼

一個 python snippet

"python template": {
        "prefix": "pyHeader",
        "body": [
            "#!user/bin/python"
            "# _*_ coding: utf-8 _*_"
            " "
            "# @File : $TM_FILENAME"
            "# @Version : 1.0"
            "# @Author : xxxxxxx"
            "# @Email : xxxxxxx"
            "# @Time : $CURRENT_YEAR/$CURRENT_MONTH/$CURRENT_DATE $CURRENT_HOUR:$CURRENT_MINUTE:$CURRENT_SECOND"
            "#Description:"
            " " 

            "import datetime"
            "start_time = datetime.datetime.now()"

            "end_time = datetime.datetime.now()"
            "print(end_time-start_time)"
        ],
        "description": "my vue python template",
    }
複製代碼

其實下面的語法隨便看看就行，別的也沒什麼好說的，好了，就這樣

---

^_<