今天就跟大家聊聊有關VSCode中如何定義代碼片段，可能很多人都不太了解，為了讓大家更加了解，小編給大家總結了以下內(nèi)容，希望大家根據(jù)這篇文章可以有所收獲。

讓客戶滿意是我們工作的目標，不斷超越客戶的期望值來自于我們對這個行業(yè)的熱愛。我們立志把好的技術通過有效、簡單的方式提供給客戶，將通過不懈努力成為客戶在信息化領域值得信任、有價值的長期合作伙伴，公司提供的服務項目有：域名注冊、網(wǎng)頁空間、營銷軟件、網(wǎng)站建設、嘉善網(wǎng)站維護、網(wǎng)站推廣。

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

代碼片段可以理解為模板，當我們輸入指定時，按下【tab】或者【enter】即可出現(xiàn)對應的模板。

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

代碼片段的好處與壞處

coder對代碼片段的評價褒貶不一.

何時使用代碼片段

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

• 當你對一個東西足夠熟練，例如console.log()，這個時候可以為其設置代碼片段。

• 有些東西特別繁瑣，每次都需要寫一遍，例如Vue單文件中的初步定義的內(nèi)容。

當然，上面的內(nèi)容僅僅是我的建議。

如何設置代碼片段

首先你準備一個VSCode，然后確定你操作系統(tǒng)，然后開始操作：

• Windows系統(tǒng):【 文件】→【首選項】→【用戶片段】

• Mac系統(tǒng): 【Code】→【首選項】→【用戶片段】

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

代碼片段語法

我們創(chuàng)建完成以后，會出現(xiàn)一個類似于JSON的語法，內(nèi)容如下：

{
  // 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中的代碼片段語法進行學習。

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

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

• scope：表示代碼片段作用于哪種語言。 不同語言之間以,隔開。 常用的有javascript, typescript,html,css,vue等。 如果設置為""就代表所有地方都生效。

• prefix：對應觸發(fā)代碼片段的字符。

• description：代碼片段的描述。

• body：對象代碼片段的內(nèi)容，通常為一個數(shù)組，數(shù)組內(nèi)的一行對應生成代碼片段后的一行。

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

$占位符

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

console.log();

出現(xiàn)這段內(nèi)容后，光標在()內(nèi)，然后按下【tab】鍵，光標即可調(diào)到下一行，也就是$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": "導入模塊"
  }
}

測試如下：

然后按下【tab】后如下圖

常量

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

TM_SELECTED_TEXT       當前選定的文本或空字符串
TM_CURRENT_LINE        當前行的內(nèi)容
TM_CURRENT_WORD        光標下的單詞的內(nèi)容或空字符串
TM_LINE_INDEX          基于零索引的行號
TM_LINE_NUMBER         基于一索引的行號
TM_FILENAME            當前文檔的文件名
TM_FILENAME_BASE       當前文檔的文件名（不含后綴名)
TM_DIRECTORY           當前文檔的目錄
TM_FILEPATH            當前文檔的完整文件路徑
CLIPBOARD              剪切板里的內(nèi)容
WORKSPACE_NAME         已打開的工作空間或文件夾的名稱

CURRENT_YEAR           當前年(四位數(shù))
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 <!-- -->

為項目創(chuàng)建代碼片段

有些時候我們需要為具體的項目創(chuàng)建一些代碼片段，其實也比較簡單，我們只需要在當前項目的根目錄創(chuàng)建一個.vscode文件夾，然后創(chuàng)建以.code-snippets的結尾的文件即可，寫法與上面一致。

看完上述內(nèi)容，你們對VSCode中如何定義代碼片段有進一步的了解嗎？如果還想了解更多知識或者相關內(nèi)容，請關注創(chuàng)新互聯(lián)行業(yè)資訊頻道，感謝大家的支持。

分享名稱：VSCode中如何定義代碼片段
轉(zhuǎn)載源于：http://jinyejixie.com/article24/ghopje.html

成都網(wǎng)站建設公司_創(chuàng)新互聯(lián)，為您提供關鍵詞優(yōu)化、定制開發(fā)、微信公眾號、網(wǎng)站設計、ChatGPT、商城網(wǎng)站

廣告

聲明：本網(wǎng)站發(fā)布的內(nèi)容（圖片、視頻和文字）以用戶投稿、用戶轉(zhuǎn)載內(nèi)容為主，如果涉及侵權請盡快告知，我們將會在第一時間刪除。文章觀點不代表本網(wǎng)站立場，如需處理請聯(lián)系客服。電話：028-86922220；郵箱：631063699@qq.com。內(nèi)容未經(jīng)允許不得轉(zhuǎn)載，或轉(zhuǎn)載時需注明來源： 創(chuàng)新互聯(lián)