国产精品美女久久久久网,久久婷婷国产麻豆91天堂,国产免费久久精品99re丫y

vscode中怎么定義代碼片段？下面本篇文章給大家介紹一下給vscode定義代碼片段的方法，讓coding速度快到飛起，希望對大家有所幫助！

VSCode中怎么定義代碼片段，讓編碼快到飛起！

代碼片段可以理解為模板，當我們輸入指定時，按下【tab】或者【enter】即可出現對應的模板。【推薦學習：《vscode》】

只要代碼片段寫的好，升職加薪少不了~

代碼片段的好處與壞處

coder對代碼片段的評價褒貶不一，下面這張圖解釋了代碼片段的好處與壞處：

VSCode中怎么定義代碼片段，讓編碼快到飛起！

何時使用代碼片段

關于什么時候使用代碼片段，我的建議是：

當你對一個東西足夠熟練，例如console.log()，這個時候可以為其設置代碼片段。
有些東西特別繁瑣，每次都需要寫一遍，例如Vue單文件中的初步定義的內容。

當然，上面的內容僅僅是我的建議。

如何設置代碼片段

首先你準備一個vscode，然后確定你操作系統，然后開始操作：

windows系統:【文件】→【首選項】→【用戶片段】
Mac系統: 【Code】→【首選項】→【用戶片段】

然后你就可以看到下面這個內容

VSCode中怎么定義代碼片段，讓編碼快到飛起！

然后你就可以對現有的代碼片段進行修改，或者創建一個新的代碼片段，這里我們創建一個名為test-snippets的全局代碼片段，來進行演示。

代碼片段語法

我們創建完成以后，會出現一個類似于json的語法，內容如下：

{ ??//?Place?your?全局?snippets?here.?Each?snippet?is?defined?under?a?snippet?name?and?has?a?scope,?prefix,?body?and? ??//?description.?Add?comma?separated?ids?of?the?languages?where?the?snippet?is?applicable?in?the?scope?field.?If?scope? ??//?is?left?empty?or?omitted,?the?snippet?gets?applied?to?all?languages.?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. ??//?Example: ??//?"print?to?console":?{ ??//???"scope":?"JavaScript,typescript", ??//???"prefix":?"log", ??//???"body":?[ ??//?????"console.log('$1');", ??//?????"$2" ??//???], ??//???"description":?"Log?output?to?console" ??//?} }

接下來我們對VSCode中的代碼片段語法進行學習。

首先中的內容是被一個對象進行包裹，對象中的每一個屬性表示一個代碼片段，屬性名為代碼片段的名稱，在觸發代碼片段的時候會展示匹配到的代碼片段名稱，例子中的屬性名稱為Print to console。

接下來我們學習代碼片段內每個屬性是干什么的。

scope：表示代碼片段作用于哪種語言。不同語言之間以,隔開。常用的有javascript, typescript,html,css,vue等。如果設置為””就代表所有地方都生效。
prefix：對應觸發代碼片段的字符。
description：代碼片段的描述。
body：對象代碼片段的內容，通常為一個數組，數組內的一行對應生成代碼片段后的一行。

推薦一個用于生成代碼片段的網站，鏈接如下：https://snippet-generator.app/

$占位符

上面的例子中，我們輸入log按下【tab】鍵即可出現如下代碼：

console.log();

出現這段內容后，光標在()內，然后按下【tab】鍵，光標即可調到下一行，也就是$2的位置，同樣的道理，我們還可以設置$3、$4 等等

值得注意的是：$0用于設置最終光標的位置。

默認與可選項

如果想讓占位符中具有一個默認值，可以通過${1:defalt}的形式來編寫。

如果行提供一些選項，可以通過${1|one,two,three|}的形式來編寫，例如：

{ ??"import":?{ ????"scope":?"javascript,typescript", ????"prefix":?"import", ????"body":?[ ??????"import?{?$2?}?from?"${1|axios,lodash,day|}"", ??????"$3" ????], ????"description":?"導入模塊" ??} }

測試如下：

VSCode中怎么定義代碼片段，讓編碼快到飛起！

然后按下【tab】后如下圖

VSCode中怎么定義代碼片段，讓編碼快到飛起！

常量

在代碼片段中，VSCode為我們提供了一些常量，使用方式也比較簡單，例如$TM_FILENAME。

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??????????????剪切板里的內容 WORKSPACE_NAME?????????已打開的工作空間或文件夾的名稱  CURRENT_YEAR???????????當前年(四位數) CURRENT_MONTH??????????當前月 CURRENT_DATE???????????當前日 CURRENT_DAY_NAME_SHORT?當天的短名稱（’Mon’） CURRENT_HOUR???????????當前小時 CURRENT_MINUTE?????????當前分鐘 CURRENT_SECOND?????????當前秒  BLOCK_COMMENT_START???塊注釋開始標識,如?PHP?/*?或?HTML?<!-- BLOCK_COMMENT_END     塊注釋結束標識,如 PHP */ 或 HTML --> LINE_COMMENT??????????行注釋，如：?PHP?//?或?HTML?<!-- -->