vscode如何自定義代碼片段,以提升編碼效率

本篇文章給大家介紹一下如何在vscode中設置自定義代碼片段,如何用代碼片段大幅提升編碼效率,希望對大家有所幫助!

vscode如何自定義代碼片段,以提升編碼效率

vscode是前端開發人員非常喜歡的開發工具,它功能強大,支持豐富的定制功能。所謂“工欲善其事,必先利其器”,把自己使用的開發工具用活用好是非常有必要的。【推薦學習:《vscode》】

1簡介

本文介紹了如何在vscode中設置自定義代碼片段,以提升代碼輸入效率。

這是一個基礎功能,與你寫什么語言的代碼無關。所有使用vscode的人都可以閱讀。

2主要內容

?如何定義代碼段?如何使用代碼段?代碼段中的高級用法

3如何定義代碼段

代碼片斷之所能加快代碼錄入,其基本思路是預先編輯好一段代碼,這段代碼使用的頻率非常高,字符內容也很長。通過在編輯器輸入某個特定的,較短的字符就直接得到這段長代碼。

所以最重要的步驟就是定義這個映射關系。

3.1確定語言,創建對應的json文件

在vscode中 ,打開命令:

文件>首選項>用戶代碼片段

此時,會彈出一個對話框,如下:

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就可以看到效果了。

vscode如何自定義代碼片段,以提升編碼效率

注意,編輯其它類型的文件時,這個代碼片段并不會觸發。

5代碼片段中的高級用法

5.1?光標控制

生成代碼片段之后,默認情況下鼠標的光標在代碼段結束的最后位置,如果你希望定制光標的行為可以采用如下的設置:

?1:生成代碼片段后鼠標所在的初始位置。?vscode!!

vscode如何自定義代碼片段,以提升編碼效率

 // 省略其它     "注釋": {        "prefix": "zs",                 "body": [                         "/*-----------$1開始-------------*/",                         "$2",                          "/*-----------$1結束-------------*/",                  ],                "description": "注釋"    },復制代碼

以上就是

? 版權聲明
THE END
喜歡就支持一下吧
點贊13 分享