snippet,讓你編碼效率翻倍

VSCode · 發表 2018-09-17 11:37:24

摘要：今天下午在用vscode做小程式的時候，發現很不方便，因為商店裡提供的程式碼片段極為有限，而且平時幾乎每天都需要用到程式碼片段，所以就在思考他們是怎麼做到給別人提供程式碼的，我可以自定義程式碼片段嗎。然後查了下，果然，這在vscode裡自帶的（好像藏得有點深），是可以自定義的，然後在做完自己的...

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

如何開啟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"
}
複製程式碼

效果是這樣滴

基礎結構

片段名字
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: 當前秒數。

複製程式碼

可選項，當游標到該處的時候彈出一些可選擇項，使用 | ，| 後面是自己提供的可選項我這裡是提供了兩個值，值之間使用逗號進行分隔

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

最後附上把自己的snippet放到market上的教程，使勁戳