本篇文章給大家介紹一下如何在vscode中設置自定義代碼片段，如何用代碼片段大幅提升編碼效率，希望對大家有所幫助！
vscode是前端開發人員非常喜歡的開發工具，它功能強大，支持豐富的定制功能。所謂“工欲善其事，必先利其器”，把自己使用的開發工具用活用好是非常有必要的。【推薦學習：《vscode》】
1簡介
本文介紹了如何在vscode中設置自定義代碼片段，以提升代碼輸入效率。
這是一個基礎功能，與你寫什么語言的代碼無關。所有使用vscode的人都可以閱讀。
2主要內容
?如何定義代碼段?如何使用代碼段?代碼段中的高級用法
3如何定義代碼段
代碼片斷之所能加快代碼錄入，其基本思路是預先編輯好一段代碼，這段代碼使用的頻率非常高，字符內容也很長。通過在編輯器輸入某個特定的，較短的字符就直接得到這段長代碼。
所以最重要的步驟就是定義這個映射關系。
3.1確定語言，創建對應的json文件
在vscode中 ,打開命令:
文件>首選項>用戶代碼片段
此時，會彈出一個對話框，如下：
如果你已經創建過針對某個語言類型的代碼片段則會出現在“已有代碼片段”中，如果你之前沒有創建過，則會出現在“新代碼片段”。創建過的代碼片段會保存你的電腦中的C:Users你的用戶名AppDataRoamingCodeUsersnippets目錄下(win10操作系統，其它可自行查找)，你可以去打開看看。這個里面就保存著自定義的代碼片斷的內容。
其中：
javascript.json表示這個文件中的代碼片段只有當你編輯.js文件時才能使用。
html.json表示在編輯.html文件時才能使用。其它類似。
我們假設你之前沒有定義過css.json這個代碼片段，所以你可以選中css.json 這個欄目，會進入對這個文件的編輯狀態。
3.2編輯代碼片段-json文件
代碼片段對應的是一個json文件。默認情況下它的內容是注釋了的，注釋的內容就是對代碼片段用法的說明。如下：
{??? //?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":?"此片段觸發關鍵字",???? //?????"body":?[???? //?????????"代碼段中第一行",???? //?????????"代碼段中第二行"???? //?????],???? //?????"description":?"對此代碼段的說明"???? //?} }
說明：
prefix :呼出代碼片段的關鍵字，輸入此內容就可以調出代碼片段。
body:代碼段的主體.需要編寫的代碼放在這里,
description :代碼段描述。輸入prefix后編輯器顯示的提示信息。
下面是一個簡單的示例。編輯css.json的內容如下：
{ ???"文本居中":?{ ?????????"prefix":?"tc",??????? ?????????"body":?[? ?????????"text-align:center;" ????????],??????? ?????????"description":?"文本居中"???? } }
它的功能是在編輯.css文件時，輸入tc這兩個字符快速生成text-align:center;這句代碼。
如果你還想定義第二個片段就繼續在后面補充。例如:
{??? "文本居中":?{ ????????"prefix":?"tc", ?????????"body":?[ ?????????"text-align:center;" ??????????],??????? ?????????"description":?"文本居中"???? ???},???? "文本居右":?{ ?????????"prefix":?"tr", ?????????"body":?[ ?????????????"text-align:right;"???????? ??????????],??????? ??????????"description":?"文本居右"???? ???} }
4如何使用代碼片段
當你完成上述css.json的編輯后：
1.保存css.json文件。
2.打開或者創建一個css文件。
3.在css文件中輸入tc就可以看到效果了。
注意，編輯其它類型的文件時，這個代碼片段并不會觸發。
5代碼片段中的高級用法
5.1?光標控制
生成代碼片段之后，默認情況下鼠標的光標在代碼段結束的最后位置，如果你希望定制光標的行為可以采用如下的設置:
?
// 省略其它 "注釋": { "prefix": "zs", "body": [ "/*-----------$1開始-------------*/", "$2", "/*-----------$1結束-------------*/", ], "description": "注釋" },復制代碼
