:::

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

:::

書籍目錄

展開 | 闔起

http%3A%2F%2Fcampus-xoops.tn.edu.tw%2Fmodules%2Ftad_book3%2Fpage.php%3Ftbsn%3D36%26tbdsn%3D1704

計數器

今天: 1232123212321232
昨天: 3438343834383438
總計: 7391561739156173915617391561739156173915617391561