開(kāi)始

點(diǎn)擊左下角的設(shè)置

img

點(diǎn)擊"用戶代碼片段"->新建全局代碼片段

img

創(chuàng)建自己的代碼段

可以定義自己的代碼段，全局代碼段或特定語(yǔ)言的代碼段。

要打開(kāi)片段文件進(jìn)行編輯，請(qǐng)選擇“ 文件” > “首選項(xiàng)” （代碼 > “ macOS上的首選項(xiàng) ”）下的“ 用戶代碼段 ” ，然后選擇要顯示片段的語(yǔ)言（按語(yǔ)言標(biāo)識(shí)符）或創(chuàng)建新的全局片段（新的全局片段文件）。

片段以JSON格式定義。

片段下拉列表

語(yǔ)法

舉例

img

prefix :這個(gè)參數(shù)是使用代碼段的快捷入口，比如這里的log在使用時(shí)輸入log會(huì)有智能感知。

吃碼小妖：就是輸入的關(guān)鍵字。

body:這個(gè)是代碼段的主體。

需要設(shè)置的代碼放在這里，字符串間換行的話使用\r\n換行符隔開(kāi)。

注意如果值里包含特殊字符需要進(jìn)行轉(zhuǎn)義。

多行語(yǔ)句的以，隔開(kāi)。

$1 :這個(gè)為光標(biāo)的所在位置。

$2 :使用這個(gè)參數(shù)后會(huì)光標(biāo)的下一位置將會(huì)另起一行，按tab鍵可進(jìn)行快速切換，還可以有$ 3， $4，$ 5。。。。。

description :代碼段描述，在使用智能感知時(shí)的描述。

img

結(jié)果

img

HTML5模板舉例

    "html5": {
        "prefix": "html5",
        "body": [
            "<!DOCTYPE html>",
            "<html lang=\"zh-CN\">",
            "\t<head>",
            "\t\t<title>測(cè)試頁(yè)</title>",
            "\t\t<meta charset=\"UTF-8\">",
            "\t\t<meta name=\"viewport\" content=\"width=device-width, initial-scale=1\">",
            "\t\t<link href=\"css/style.css\" rel=\"stylesheet\">",
            "\t</head>", 
            "\t<body>", 
            "\t$2", 
            "\t</body>", 
            "</html>"
        ],
        "description": "HTML - Defines a template for a html5 document",
    },

\t代表空格。

“要用斜杠轉(zhuǎn)義。

轉(zhuǎn)義網(wǎng)址（+隨機(jī)搜的）

http://www.bejson.com/

代碼片段設(shè)置評(píng)論

有一些新的代碼段變量可以插入行或塊注釋?zhuān)悦枋霎?dāng)前語(yǔ)言。

使用BLOCK_COMMENT_START和BLOCK_COMMENT_END用于塊注釋等LINE_COMMENT。

下面的代碼段插入/* Hello World */JavaScript文件和``HTML文件中

{
    "hello": {
        "scope": "javascript,html",
        "prefix": "hello",
        "body": "$BLOCK_COMMENT_START Hello World $BLOCK_COMMENT_END"
    }
}

從插件市場(chǎng)添加片段

VS Code Marketplace上的許多擴(kuò)展包括代碼段。

如果您找到了要使用的設(shè)備，請(qǐng)安裝它并重新啟動(dòng)VS Code并使用新的代碼段。

代碼片段文件名

文件類(lèi)型和名稱(chēng)用于定義片段是全局的還是特定于語(yǔ)言的。

存儲(chǔ)在以語(yǔ)言標(biāo)識(shí)符（ <languageId>.json ）命名的JSON文件中的代碼段是特定于語(yǔ)言的。例如，僅限JavaScript的代碼段放在javascript.json文件中。

全局代碼段

編輯時(shí)適用的全局代碼段，并存儲(chǔ)在<name>.code-snippets MyGlobal.code-snippets文件中，例如MyGlobal.code-snippets 。

全局代碼段的JSON模式允許您定義scope屬性，該屬性可以過(guò)濾適用于該代碼段的語(yǔ)言（基于語(yǔ)言標(biāo)識(shí)符）。

下面的示例再次是For Loop ，但這次它的范圍是JavaScript 和 TypeScript。

{
    "For_Loop": {
        "prefix": "for",
        "scope": "javascript,typescript",
        "body": [
          "for (const ${2:element} of ${1:array}) {",
          "\t$0",
          "}"
        ],
        "description": "For Loop"
    }
}

添加新代碼段后，您可以立即嘗試，無(wú)需重新啟動(dòng)。

片段語(yǔ)法

代碼段的body可以使用特殊構(gòu)造來(lái)控制游標(biāo)和插入的文本。

以下是支持的功能及其語(yǔ)法：

制表位

使用tabstops，您可以使編輯器光標(biāo)在代碼段內(nèi)移動(dòng)。使用$1 ， $2指定游標(biāo)位置。

數(shù)字是訪問(wèn)tabstops的順序，而$0表示最終光標(biāo)位置。

同一個(gè)tabstop的多次出現(xiàn)被鏈接并同步更新。

吃碼小妖：就是tab按鍵。

占位符

占位符是帶有值的tabstops，例如${1:foo} 。將插入并選擇占位符文本，以便可以輕松更改。占位符可以嵌套，例如${1:another ${2:placeholder}} 。

吃碼小妖：就是帶有默認(rèn)值的插糟。

選擇

占位符可以作為值進(jìn)行選擇。語(yǔ)法是逗號(hào)分隔的值枚舉，用管道字符括起來(lái)，例如${1|one,two,three|} 。

插入代碼段并選擇占位符后，選項(xiàng)將提示用戶選擇其中一個(gè)值。

變量

使用$name或${name:default}，您可以插入變量的值。

未設(shè)置變量時(shí)，將插入其默認(rèn)值或空字符串。

當(dāng)變量未知（即，未定義其名稱(chēng)）時(shí)，將插入變量的名稱(chēng)并將其轉(zhuǎn)換為占位符。

可以使用以下變量：

TM_SELECTED_TEXT當(dāng)前選定的文本或空字符串
TM_CURRENT_LINE當(dāng)前行的內(nèi)容
TM_CURRENT_WORD光標(biāo)下的單詞或空字符串的內(nèi)容
TM_LINE_INDEX基于零索引的行號(hào)
TM_LINE_NUMBER基于單索引的行號(hào)
TM_FILENAME當(dāng)前文檔的文件名
TM_FILENAME_BASE沒(méi)有擴(kuò)展名的當(dāng)前文檔的文件名
TM_DIRECTORY當(dāng)前文檔的目錄
TM_FILEPATH當(dāng)前文檔的完整文件路徑
CLIPBOARD剪貼板的內(nèi)容

用于插入當(dāng)前日期和時(shí)間：

CURRENT_YEAR當(dāng)前年份
CURRENT_YEAR_SHORT當(dāng)前年份的最后兩位數(shù)字
CURRENT_MONTH兩個(gè)數(shù)字的月份（例如'02'）
CURRENT_MONTH_NAME月份的全名（例如“七月”）
CURRENT_MONTH_NAME_SHORT月份的簡(jiǎn)稱(chēng)（例如'Jul'）
CURRENT_DATE每月的某一天
CURRENT_DAY_NAME天的名稱(chēng)（例如'星期一'）
CURRENT_DAY_NAME_SHORT當(dāng)天的簡(jiǎn)稱(chēng)（例如'Mon'）
CURRENT_HOUR 24小時(shí)制格式的當(dāng)前小時(shí)
CURRENT_MINUTE當(dāng)前分鐘
CURRENT_SECOND當(dāng)前秒

變量變換

轉(zhuǎn)換允許您在插入變量之前修改變量的值。轉(zhuǎn)型的定義包括三個(gè)部分：

與變量值匹配的正則表達(dá)式，或無(wú)法解析變量時(shí)的空字符串。
“格式字符串”，允許從正則表達(dá)式引用匹配組。格式字符串允許條件插入和簡(jiǎn)單修改。
傳遞給正則表達(dá)式的選項(xiàng)。

下面的示例插入當(dāng)前文件的名稱(chēng)而不是其結(jié)尾，因此從foo.txt它會(huì)生成foo 。

${TM_FILENAME/(.*)\\..+$/$1/}
  |           |         |  |
  |           |         |  |-> no options
  |           |         |
  |           |         |-> references the contents of the first
  |           |             capture group
  |           |
  |           |-> regex to capture everything before
  |               the final `.suffix`
  |
  |-> resolves to the filename

占位符，變換

與變量轉(zhuǎn)換一樣，占位符的轉(zhuǎn)換允許在移動(dòng)到下一個(gè)制表位時(shí)更改占位符的插入文本。

插入的文本與正則表達(dá)式匹配，匹配或匹配 - 取決于選項(xiàng) - 將替換為指定的替換格式文本。每次出現(xiàn)占位符都可以使用第一個(gè)占位符的值獨(dú)立定義自己的轉(zhuǎn)換。

Placeholder-Transforms的格式與Variable-Transforms的格式相同。

轉(zhuǎn)換例子

這些示例顯示在雙引號(hào)內(nèi)，因?yàn)樗鼈儠?huì)顯示在代碼段內(nèi)，以說(shuō)明需要雙重轉(zhuǎn)義某些字符。

示例轉(zhuǎn)換以及文件名example-123.456-TEST.js的結(jié)果輸出。

例	產(chǎn)量	說(shuō)明
`"${TM_FILENAME/[\\.]/_/}"`	`example-123_456-TEST.js`	替換第一個(gè)`.` 用`_`
`"${TM_FILENAME/[\\.-]/_/g}"`	`example_123_456_TEST_js`	替換每個(gè)`.` 或`-`與`_`
`"${TM_FILENAME/(.*)/${1:/upcase}/}"`	`EXAMPLE-123.456-TEST.JS`	改為全部大寫(xiě)
`"${TM_FILENAME/[^0-9^az]//gi}"`	`example123456TESTjs`	刪除非字母數(shù)字字符

語(yǔ)法

下面是片段的EBNF（擴(kuò)展Backus-Naur形式）。使用\ （反斜杠），您可以轉(zhuǎn)義$ ， }和\ 。在選擇元素中，反斜杠也會(huì)轉(zhuǎn)義逗號(hào)和管道字符。

any         ::= tabstop | placeholder | choice | variable | text
tabstop     ::= '$' int
                | '${' int '}'
                | '${' int  transform '}'
placeholder ::= '${' int ':' any '}'
choice      ::= '${' int '|' text (',' text)* '|}'
variable    ::= '$' var | '${' var '}'
                | '${' var ':' any '}'
                | '${' var transform '}'
transform   ::= '/' regex '/' (format | text)+ '/' options
format      ::= '$' int | '${' int '}'
                | '${' int ':' '/upcase' | '/downcase' | '/capitalize' '}'
                | '${' int ':+' if '}'
                | '${' int ':?' if ':' else '}'
                | '${' int ':-' else '}' | '${' int ':' else '}'
regex       ::= JavaScript Regular Expression value (ctor-string)
options     ::= JavaScript Regular Expression option (ctor-options)
var         ::= [_a-zA-Z] [_a-zA-Z0-9]*
int         ::= [0-9]+
text        ::= .*

將鍵綁定分配給片段

您可以創(chuàng)建自定義鍵綁定以插入特定代碼段。

打開(kāi)keybindings.json （首選項(xiàng)：打開(kāi)鍵盤(pán)快捷鍵文件），它定義了所有的鍵綁定，并添加了一個(gè)鍵盤(pán)綁定，將"snippet"作為額外參數(shù)傳遞：

{
  "key": "cmd+k 1",
  "command": "editor.action.insertSnippet",
  "when": "editorTextFocus",
  "args": {
    "snippet": "console.log($1)$0"
  }
}

鍵綁定將調(diào)用Insert Snippet命令，但不會(huì)提示您選擇片段，而是會(huì)插入提供的片段。您可以像往常一樣使用鍵盤(pán)快捷鍵，命令I(lǐng)D和可選的when子句上下文定義自定義鍵綁定，以啟用鍵盤(pán)快捷鍵。

此外，您可以使用langId和name參數(shù)引用現(xiàn)有代碼段，而不是使用snippet參數(shù)值來(lái)定義內(nèi)聯(lián)代碼段：

{
  "key": "cmd+k 1",
  "command": "editor.action.insertSnippet",
  "when": "editorTextFocus",
  "args": {
    "langId": "csharp",
    "name": "myFavSnippet"
  }
}

將自己的代碼片段轉(zhuǎn)為共享擴(kuò)展

地址：contributes.snippets

使用Preferences: Configure User Snippets命令創(chuàng)建和測(cè)試您的片段。

img

對(duì)代碼段感到滿意后，將整個(gè)JSON文件復(fù)制到擴(kuò)展文件夾中，例如 snippets.json
將以下代碼段添加到您的 package.json

{
  "contributes": {
    "snippets": [
      {
        "language": "javascript",
        "path": "./snippets.json"
      }
    ]
  }
}

您可以在以下位置找到完整的源代碼：https://github.com/Microsoft/vscode-extension-samples/tree/master/snippet-sample

實(shí)例

snippets.json

{
    "Print to console": {
        "prefix": "log",
        "body": [
            "console.log('$1');",
            "$2"
        ],
        "description": "Log output to console"
    }
}

package.json

{
    "name": "snippet-sample",
    "displayName": "Snippet Sample",
    "description": "Snippet Sample",
    "version": "0.0.1",
    "publisher": "vscode-samples",
    "engines": {
        "vscode": "^1.28.0"
    },
    "categories": [
        "Snippets"
    ],
    "contributes": {
        "snippets": [
            {
                "language": "javascript",
                "path": "./snippets.json"
            }
        ]
    }
}

色偷偷精品伊人,欧洲久久精品,欧美综合婷婷骚逼,国产AV主播,国产最新探花在线,九色在线视频一区,伊人大交九欧美,1769亚洲,黄色成人av

VS code 創(chuàng)建代碼片段

VS code 創(chuàng)建代碼片段

開(kāi)始

創(chuàng)建自己的代碼段

語(yǔ)法

轉(zhuǎn)義網(wǎng)址（+隨機(jī)搜的）

代碼片段設(shè)置評(píng)論

從插件市場(chǎng)添加片段

代碼片段文件名

全局代碼段

片段語(yǔ)法

制表位

占位符

選擇

變量

變量變換

占位符，變換

轉(zhuǎn)換例子

語(yǔ)法

將鍵綁定分配給片段

將自己的代碼片段轉(zhuǎn)為共享擴(kuò)展

相關(guān)閱讀更多精彩內(nèi)容

友情鏈接更多精彩內(nèi)容

色偷偷精品伊人,欧洲久久精品,欧美综合婷婷骚逼,国产AV主播,国产最新探花在线,九色在线视频一区,伊人大交九 欧美,1769亚洲,黄色成人av

VS code 創(chuàng)建代碼片段

開(kāi)始

創(chuàng)建自己的代碼段

語(yǔ)法

轉(zhuǎn)義網(wǎng)址（+隨機(jī)搜的）

代碼片段設(shè)置評(píng)論

從插件市場(chǎng)添加片段

代碼片段文件名

全局代碼段

片段語(yǔ)法

制表位

占位符

選擇

變量

變量變換

占位符，變換

轉(zhuǎn)換例子

語(yǔ)法

將鍵綁定分配給片段

將自己的代碼片段轉(zhuǎn)為共享擴(kuò)展

相關(guān)閱讀更多精彩內(nèi)容

友情鏈接更多精彩內(nèi)容

色偷偷精品伊人,欧洲久久精品,欧美综合婷婷骚逼,国产AV主播,国产最新探花在线,九色在线视频一区,伊人大交九欧美,1769亚洲,黄色成人av