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

1. 設定 --> 使用者程式碼片段
2. 選擇語言種類
3. 直接使用範例來修改：

   {
       "引入樣板": {
           "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 迴圈"
       }
   }

    

4. 其中 ${1:提示文字} 是用來讓游標停留的地方，按 tab鍵 即可按順序切換
5. ${3|tpl,html|} 代表可以做成選項，讓使用者直接選擇
6. 若body語法中有 " 符號，可以用 \" 來顯示之
7. 若body語法中有 $ 符號，可以用 \\$ 來顯示之
8. 如果一次要產生多行內容，每行用""包起來，後面用 , 隔開
9. 若是有一些語法是可以適用多種語言的，那麼可以設成全域程式碼片段檔案，其內容會多一個 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"
   	}
   }

    

10. 也可以利用 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整合表單"
    }

     

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

    1. 編輯內容、檔案系統

       變數名稱	定義
       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	行註解

12. 可以在設定中，加入以下設定，可以讓自己設定的程式片段移到最上面，第二行是允許用tab鍵來自動完成

    "editor.snippetSuggestions": "top",
    "editor.tabCompletion": "on",

     

13. 這些程式片段檔 的位置在 C:\Users\使用者\AppData\Roaming\Code\User\snippets 中，可以將之複製給別人使用
14. 更完整說明可以參考：https://code.visualstudio.com/docs/editor/userdefinedsnippets