vscode是前端開發(fā)人員非常喜歡的開發(fā)工具墩虹，它功能強大斥废，支持豐富的定制功能趟畏。所謂“工欲善其事蕉扮，必先利其器”，把自己使用的開發(fā)工具用活用好是非常有必要的角溃。
簡介
本文介紹了如何在vscode中設置自定義代碼片段拷获，以提升代碼輸入效率。
這是一個基礎功能减细，與你寫什么語言的代碼無關匆瓜。所有使用vscode的人都可以閱讀。
主要內(nèi)容
- 如何定義代碼段
- 如何使用代碼段
- 代碼段中的高級用法
如何定義代碼段
代碼片斷之所能提加快代碼錄入未蝌，其基本思路是預先編輯好一段代碼驮吱，這段代碼使用的頻率非常高，字符內(nèi)容也很長萧吠。通過在編輯器輸入某個特定的左冬，較短的字符就直接得到這段長代碼。
所以最重要的步驟就是定義這個映射關系纸型。
確定語言拇砰，創(chuàng)建對應的json文件
在vscode中 ,打開命令:
文件>首選項>用戶代碼片段
此時，會彈出一個對話框狰腌，如下：
如果你已經(jīng)創(chuàng)建過針對某個語言類型的代碼片段則會出現(xiàn)在“已有代碼片段”中除破，如果你之前沒有創(chuàng)建過，則會出現(xiàn)在“新代碼片段”琼腔。創(chuàng)建過的代碼片段會保存你的電腦中的C:\Users\你的用戶名\AppData\Roaming\Code\User\snippets目錄下(win10操作系統(tǒng)瑰枫，其它可自行查找)，你可以去打開看看丹莲。這個里面就保存著自定義的代碼片斷的內(nèi)容躁垛。
其中：
javascript.json表示這個文件中的代碼片段只有當你編輯.js文件時才能使用。
html.json表示在編輯.html文件時才能使用圾笨。其它類似教馆。
我們假設你之前沒有定義過css.json這個代碼片段，所以你可以選中css.json 這個欄目擂达，會進入對這個文件的編輯狀態(tài)土铺。
編輯代碼片段-json文件
代碼片段對應的是一個json文件。默認情況下它的內(nèi)容是注釋了的，注釋的內(nèi)容就是對代碼片段用法的說明悲敷。
如下：
{
// Place your snippets for css here. Each snippet is defined under a snippet name and has a prefix, body and
// description. The prefix is what is used to trigger the snippet and the body will be expanded and inserted. Possible variables are:
// $1, $2 for tab stops, $0 for the final cursor position, and ${1:label}, ${2:another} for placeholders. Placeholders with the
// same ids are connected.
// 示例:
// "片段名": {
// "prefix": "此片段觸發(fā)關鍵字",
// "body": [
// "代碼段中第一行",
// "代碼段中第二行"
// ],
// "description": "對此代碼段的說明"
// }
}
說明：
- prefix :呼出代碼片段的關鍵字究恤，輸入此內(nèi)容就可以調(diào)出代碼片段。
- body :代碼段的主體.需要編寫的代碼放在這里,
- description :代碼段描述后德。輸入prefix后編輯器顯示的提示信息部宿。
下面是一個簡單的示例。
編輯css.json的內(nèi)容如下：
{
"文本居中": {
"prefix": "tc",
"body": [
"text-align:center;"
],
"description": "文本居中"
}
}
它的功能是在編輯.css文件時瓢湃，輸入tc這兩個字符快速生成text-align:center;這句代碼理张。
如果你還想定義第二個片段就繼續(xù)在后面補充。例如:
{
"文本居中": {
"prefix": "tc",
"body": [
"text-align:center;"
],
"description": "文本居中"
},
"文本居右": {
"prefix": "tr",
"body": [
"text-align:right;"
],
"description": "文本居右"
}
}
如何使用代碼片段
當你完成上述css.json的編輯后：
- 保存css.json文件绵患。
- 打開或者創(chuàng)建一個css文件雾叭。
- 在css文件中輸入
tc就可以看到效果了。
注意落蝙，編輯其它類型的文件時织狐，這個代碼片段并不會觸發(fā)。
代碼片段中的高級用法
光標控制
生成代碼片段之后筏勒，默認情況下鼠標的光標在代碼段結束的最后位置移迫，如果你希望定制光標的行為可以采用如下的設置:
- $1:生成代碼片段后鼠標所在的初始位置。
-
3,
5.....
- $0:通過tab鍵切換光標時起意，光標最終的位置。
- 有多個$n: 表示光標同時定位在多處病瞳，你可以多處同時編輯揽咕。
- ${1:字符} ：生成代碼段后光標的初始位置(其中1表示光標開始的序號，字符表示生成代碼后光標會直接選中字符套菜。)
下面是一個示例：
// 省略其它
"注釋": {
"prefix": "zs",
"body": [
"/*-----------$1開始-------------*/",
"$2",
"/*-----------$1結束-------------*/",
],
"description": "注釋"
},
當你編輯css文件時亲善，輸入zs后，按下回車：
- 光標會處在$1處逗柴，注意這里會有兩個光標蛹头，意味著你可以同時編輯兩處
- 按下一次tab，光標會定位在$2處戏溺。
效果圖如下：
特殊字符
代碼片段中如果包含特殊字符需要 \ 進行轉(zhuǎn)義渣蜗。
換行效果：\r或者\n
縮進效果：\t。表示一個tab鍵的縮進旷祸。
小結
要點：
- 自定義代碼段可以大大提升工作效率：用較少的代碼生成一段較長的代碼耕拷。
- 本文的例子是針對css代碼來設置的，所修改的文件 是css.json文件托享，同理你可去設置其它的語言中用到的代碼段骚烧。
- 代碼段的表現(xiàn)結果是json文件浸赫，把這個文件放出來，你就可以把你的代碼段分享給其他人了赃绊。
版權信息：凡人進階既峡。轉(zhuǎn)載請標明出處。
如果對您有幫助碧查，您可以：
- 轉(zhuǎn)發(fā)他人运敢。
- 小額打賞。
