snippet,讓你編碼效率翻倍

時間 2019-11-08

原文原文鏈接

爲何談到Snippet

今天下午在用vscode作小程序的時候，發現很不方便，由於商店裏提供的代碼片斷極爲有限，並且平時幾乎天天都須要用到代碼片斷，因此就在思考他們是怎麼作到給別人提供代碼的，我能夠自定義代碼片斷嗎。而後查了下，果真，這在vscode裏自帶的（好像藏得有點深），是能夠自定義的，而後在作完本身的任務後搗鼓了下，基本瞭解了snippet的語法，忽然有種打開新世界大門的感受。作個記錄，上菜了html

如何打開snippet配置

這裏以vscode爲例，其餘編輯器大概也差很少。在vscode中快捷鍵「Ctrl + Shift + P」打開命令窗口，而後輸入snippet,選擇 [配置用戶代碼片斷]，點擊後，就能夠愉快的進行片斷的編寫了小程序

Snippet怎麼用

先上一個Demo

"html template": {
    "prefix": "ht",
    "body": [
      "<!DOCTYPE html>",
      "<html lang=\"en\">",
      "<head>",
      "  <meta charset=\"UTF-8\">",
      "  <title>${1:$CURRENT_DATE}</title>",
      "</head>",
      "<body>",
            " <div class=\"${2|container,wrapper|}\">",
            "   ${3}",
            " </div>",
      "</body>",
      "</html>",
    ],
    "description": "create a html frame"
  }

效果是這樣滴
app

基礎結構

片斷名字
prefix（前綴，輸入的觸發條件，好比上面例子中當我輸入ht後，就能tab出來片斷）
body（主體部分，在裏面根據語法定義本身須要的代碼片斷）
description（說明，片斷的具體描述）

基礎語法

每一個逗號表明一整行的結束，雙引號須要用轉義字符 \
$number表示光標跳轉的順序，好比$1表示光標首次須要跳轉的位置，相同序號的會在一塊兒，另外$0表示最終光標位置
變量，在未賦值的狀況下提供默認值，這裏提供一些變量

TM_SELECTED_TEXT：當前選定的文本或空字符串； 
    TM_CURRENT_LINE：當前行的內容；
    TM_CURRENT_WORD：光標所處單詞或空字符串 
    TM_LINE_INDEX：行號（從零開始）；
    TM_LINE_NUMBER：行號（從一開始）；
    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: 當前秒數。