vscode - 程式碼模板

程式編寫時，一段程式碼或說明會重複出現，使用模板有利於提高我們的工作效率。

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

建立一個snippets

• 選單欄選擇File
• 下拉選單中選擇 Preferences
• 再選擇User snippets，出現下圖情況，選擇對應的語言即可；如果沒有你需要的語言，你需要安裝對應的語言外掛。

Snippets內容使用JSON格式進行定義。
一個JavaScript例子

{
    "For_Loop": {
        "prefix": "for",
        "body": [
          "for (const ${2:element} of ${1:array}) {",
          "\t$0",
          "}"
        ],
        "description": "For Loop"
    }
}
 

• For_Loop: 當前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}}

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",
    }

config

// javascript.json
{
    // Place your snippets for javascript here. Each snippet is defined under a snippet name and has a prefix, body and 
    // description. The prefix is what is used to trigger the snippet and the body will be expanded and inserted. Possible variables are:
    // $1, $2 for tab stops, $0 for the final cursor position, and ${1:label}, ${2:another} for placeholders. Placeholders with the 
    // same ids are connected.
    // Example:
    "Print to console": {
        "prefix": "log|console",
        "body": [
            "console.log('$1')",
            "$2"
        ],
        "description": "Log output to console"
    },
    "For_Loop": {
        "prefix": "for",
        "body": [
            "for (const ${2:element} of ${1:array}) {",
            "\t$0",
            "}"
        ],
        "description": "For Loop"
    },
    "console.log": {
        "prefix": "cl",
        "body": [
            "console.log($1)"
        ],
        "description": "console.log"
    },
    "notes": {
        "prefix": "/*",
        "body": [
            "/**",
            " * @method $1",
            " * @description $2",
            " * @param $2",
            " * @return $2",
            " */",
        ],
        "description": "notes 方法註釋"
    },
    "todo": {
        "prefix": "todo|TODO",
        "body": [
            "// !!!TODO $1"
        ],
        "description": "TODO: // !!!TODO $1"
    },
}

參考

簡書