為了增加 coding 速度在課堂上學了設定快捷指令(Snippet)的方法,回家稍微再研究了一下,做出一些整理。
相信做這個設定的方法有很多,在這分享我覺得稍微比較方便的方法。
以下都是在 Windows 環境下使用 VS Code 對應的方法
- 在編輯器中輸入想建立的快捷指令
- 把指令框起來
- 按
Ctrl + shift + p
叫出指令輸入框,輸入create snippet
- 輸入完選取
create snippet
後會有四個步驟,要依序輸入:
- 適用的語言 (注意在 html 裡的
<style></style>
區塊內的部分要用 css,其他根據所需輸入 html, ruby, erb…等) - Snippet 的名稱 (會在往後輸入指令時顯示在右方<見下圖 1 >)
- 呼叫 Snippet 需輸入的文字 (用來呼叫、同時也會顯示在輸入指令時的左邊 <見下圖 2 >)
- Snippet 的描述 (可以在往後輸入指令時按顯示更多看到 <見下圖 3 >)
- 全部輸入完之後就算建立好了
建立完之後可以用以下方法檢查及修改:
- 到 File > Preferences > User Snippets 中選取相對應的 Snippets file
- 選到相對應的檔案之後會看到一些像是指令的東西,可以在裡面做修改刪除(要記得繼續遵守裡面的格式,不然功能會失效)<見下方範例>
根據剛剛輸入的資訊可以把指令說明為:
"<Snippet 名稱>": {
"prefix": "<Snippet 指令>",
"body": [
<輸入 Snippet 指令後會出現的東西(陣列形式)>
],
"description": "<Snippet 敘述>"
},- 上方 < > 中的文字為要更改的部分
- 在最後一個 Snippet 後面不能放逗號,否則以後直接用指令設定的 Snippet 會無法建立>
- 在 body 中的一些說明:
- 前方的空白會從插入點後的階層開始套用
(如果都沒有空白, 呼叫時 VS Code 會自動幫忙調整成同一個階層) - 制定預設插入點及應修改範圍
- 用
$ + 數字
可以加入插入點(插入順序為從 1 開始往大的跑) ${數字:預設文字}
這樣可以設定呼叫指令時放入的預設文字,在依照數字順序進行修改(例:呼叫上方圖片中的 Snippet "grid” 時會預設顯示<div class=”col col-md-6 col-lg-4 col-xl-4">
然後再從 6 開始進行修改)- 呼叫時可使用
tab
進行插入點切換 $0
(數字 0) 代表最後一個插入點(如果沒有 $1, $2...)則插入點會直接跑過去- 如果沒設定插入點的話會以 body 中的最後位置為插入點
重新設定完後記得存檔
這樣應該就可以設定好自己想要的快捷指令了