11. 用 VSCode 自訂 snippet 加速或簡化開發

設定 --> 使用者程式碼片段
選擇語言種類

直接使用範例來修改：

{
    "引入樣板": {
        "prefix": "includeq",
        "body": [
            "<{includeq file=\"\\$xoops_rootpath/modules/$WORKSPACE_NAME/templates/${2:樣板檔}.${3|tpl,html|}\"}>"
        ],
        "description": "引入樣板"
    },
    "foreach 迴圈": {
        "prefix": "foreach",
        "body": [
            "<{foreach from=$${1:來源變數} key=${2:索引} item=${3:內容名稱}}>",
            "    <{$$2}>:<{$$3}>",
            "<{/foreach}>"
        ],
        "description": "foreach 迴圈"
    }
}

其中 ${1:提示文字} 是用來讓游標停留的地方，按 tab鍵 即可按順序切換
${3|tpl,html|} 代表可以做成選項，讓使用者直接選擇
若body語法中有 " 符號，可以用 \" 來顯示之
若body語法中有 $ 符號，可以用 \\$ 來顯示之
如果一次要產生多行內容，每行用""包起來，後面用 , 隔開

若是有一些語法是可以適用多種語言的，那麼可以設成全域程式碼片段檔案，其內容會多一個 scope 設定，只要在裡面指定要套用的語言，並用 , 隔開即可。

{
	"引入樣板": {
		"prefix": "includeq",
		"scope": "html",
		"body": [
			"<{includeq file=\"\\$xoops_rootpath/modules/$WORKSPACE_NAME/templates/${2:樣板檔}.${3|tpl,html|}\"}>"
		],
		"description": "引入樣板"
	},
	"foreach 迴圈": {
		"prefix": "foreach",
		"scope": "html",
		"body": [
			"<{foreach from=$${1:來源變數} key=${2:索引} item=${3:內容名稱} name=$1}>",
			"    $BLOCK_COMMENT_START 從0開始的次數 <{$smarty.foreach.$1.index}> $BLOCK_COMMENT_END",
			"    $BLOCK_COMMENT_START 從1開始的次數 <{$smarty.foreach.$1.iteration}> $BLOCK_COMMENT_END",
			"    <{$$2}>:<{$$3}>",
			"<{/foreach}>"
		],
		"description": "foreach 迴圈"
	},
	"產生word": {
		"prefix": "word",
		"scope": "php",
		"body": [
			"require 'vendor/autoload.php';",
			"\\$phpWord = new \\PhpOffice\\PhpWord\\PhpWord();",
			"\\$filename = \"${1:檔名}\";",
			"\\$filename = iconv(\"UTF-8\", \"Big5\", \\$filename);",
			"\\$objWriter = \\PhpOffice\\PhpWord\\IOFactory::createWriter(\\$phpWord, 'Word2007');",
			"header('Content-Type: application/vnd.ms-word');",
			"header(\"Content-Disposition: attachment;filename={\\$filename}.docx\");",
			"header('Cache-Control: max-age=0');",
			"\\$objWriter->save('php://output');"
		],
		"description": "產生word"
	}
}

也可以利用 https://snippet-generator.app/ 來製作比較複雜的例子，例如：

"B3、4整合表單": {
    "prefix": "form",
    "body": [
        "<form action=\"${1:檔案}.php\" method=\"${2|post,get|}\" id=\"${3:myForm}\" enctype=\"multipart/form-data\" class=\"form-horizontal\">",
        "    <div class=\"form-group row\">",
        "        <label class=\"col-sm-${4:2} control-label col-form-label text-md-right\">",
        "            ${6:標題}",
        "        </label>",
        "        <div class=\"col-sm-${5:4}\">",
        "            <input type=\"text\" name=\"${7:變數名稱}\" id=\"$7\" class=\"form-control validate[required]\" value=\"<{$$7}>\" placeholder=\"$7\">",
        "        </div>",
        "",
        "        <label class=\"col-sm-$4 control-label col-form-label text-md-right\">",
        "            ${8:標題}",
        "        </label>",
        "        <div class=\"col-sm-$5\">",
        "            <input type=\"text\" name=\"${9:變數名稱}\" id=\"$9\" class=\"form-control validate[required]\" value=\"<{$$9}>\" placeholder=\"$9\">",
        "        </div>",
        "    </div>",
        "</form>"
    ],
    "description": "B3、4整合表單"
}

VSCode有預設許多變數（在變數名稱前方使用 $ 就可以使用）供程式片段中使用：

編輯內容、檔案系統

變數名稱	定義
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	剪貼簿的內容
WORKSPACE_NAME	用 vs code 開啟的資料夾名稱

日期、時間

變數名稱	定義
CURRENT_YEAR	西元年
CURRENT_YEAR_SHORT	西元年縮寫
CURRENT_MONTH	目前月份（含0）
CURRENT_MONTH_NAME	完整月份名稱
CURRENT_MONTH_NAME_SHORT	簡易月份名稱
CURRENT_DATE	目前日期
CURRENT_DAY_NAME	完整星期幾
CURRENT_DAY_NAME_SHORT	簡易星期幾
CURRENT_HOUR	目前時
CURRENT_MINUTE	目前分
CURRENT_SECOND	目前秒
CURRENT_SECONDS_UNIX	時間戳記

註解

變數名稱	定義
BLOCK_COMMENT_START	註解起始
BLOCK_COMMENT_END	註解結束
LINE_COMMENT	行註解

可以在設定中，加入以下設定，可以讓自己設定的程式片段移到最上面，第二行是允許用tab鍵來自動完成
```
"editor.snippetSuggestions": "top",
"editor.tabCompletion": "on",
```
這些程式片段檔的位置在 C:\Users\使用者\AppData\Roaming\Code\User\snippets 中，可以將之複製給別人使用
更完整說明可以參考：https://code.visualstudio.com/docs/editor/userdefinedsnippets