snippet,讓你編碼效率翻倍

Kerinlin發表於2018-09-13

為什麼談到Snippet

今天下午在用vscode做小程式的時候,發現很不方便,因為商店裡提供的程式碼片段極為有限,而且平時幾乎每天都需要用到程式碼片段,所以就在思考他們是怎麼做到給別人提供程式碼的,我可以自定義程式碼片段嗎。然後查了下,果然,這在vscode裡自帶的(好像藏得有點深),是可以自定義的,然後在做完自己的任務後搗鼓了下,基本瞭解了snippet的語法,突然有種開啟新世界大門的感覺。做個記錄,上菜了


如何開啟snippet配置

這裡以vscode為例,其他編輯器大概也差不多。在vscode中快捷鍵「Ctrl + Shift + P」開啟命令視窗,然後輸入snippet,選擇**[配置使用者程式碼片段]**,點選後,就可以愉快的進行片段的編寫了

snippet,讓你編碼效率翻倍
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"
  }
複製程式碼

效果是這樣滴

snippet,讓你編碼效率翻倍

基礎結構

snippet,讓你編碼效率翻倍

  • 片段名字
  • 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: 當前秒數。
    
複製程式碼
  • 可選項,當游標到該處的時候彈出一些可選擇項,使用 | ,| 後面是自己提供的可選項 我這裡是提供了兩個值,值之間使用逗號進行分隔

snippet,讓你編碼效率翻倍

  • body的高階語法,可以參考這裡,寫的很詳細

最後

效果

snippet,讓你編碼效率翻倍
最後附上把自己的snippet放到market上的教程,使勁戳這裡

相關文章