VS code 建立代碼片斷

時間 2019-11-07

標籤 code 建立代碼片斷简体版

原文原文鏈接

開始

點擊左下角的設置javascript

點擊"用戶代碼片斷"->新建全局代碼片斷css

建立本身的代碼段

能夠定義本身的代碼段，全局代碼段或特定語言的代碼段。 html

要打開片斷文件進行編輯，請選擇「文件」 > 「首選項」（代碼 > 「 macOS上的首選項」）下的「用戶代碼段」，而後選擇要顯示片斷的語言（按語言標識符）或建立新的全局片斷（新的全局片斷文件）。html5

片斷以JSON格式定義。 java

語法

舉例 git

prefix :這個參數是使用代碼段的快捷入口，好比這裏的log在使用時輸入log會有智能感知。github

zyx456：就是輸入的關鍵字。

body:這個是代碼段的主體。正則表達式

須要設置的代碼放在這裏，字符串間換行的話使用rn換行符隔開。typescript

注意若是值裏包含特殊字符須要進行轉義。json

多行語句的以，隔開。

$1 :這個爲光標的所在位置。

$2 :使用這個參數後會光標的下一位置將會另起一行，按tab鍵可進行快速切換，還能夠有$3，$4，$5。。。。。

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

結果

HTML5模板舉例

"html5": {
        "prefix": "html5",
        "body": [
            "<!DOCTYPE html>",
            "<html lang=\"zh-CN\">",
            "\t<head>",
            "\t\t<title>測試頁</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表明空格。

「要用斜槓轉義。

轉義網址（+隨機搜的）

http://www.bejson.com/

代碼片斷設置評論

有一些新的代碼段變量能夠插入行或塊註釋，以描述當前語言。

使用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"
    }
}

從插件市場添加片斷

VS Code Marketplace上的許多擴展包括代碼段。

若是您找到了要使用的設備，請安裝它並從新啓動VS Code並使用新的代碼段。

代碼片斷文件名

文件類型和名稱用於定義片斷是全局的仍是特定於語言的。

存儲在以語言標識符（ <languageId>.json ）命名的JSON文件中的代碼段是特定於語言的。例如，僅限JavaScript的代碼段放在javascript.json文件中。

全局代碼段

編輯時適用的全局代碼段，並存儲在<name>.code-snippets MyGlobal.code-snippets文件中，例如MyGlobal.code-snippets 。

全局代碼段的JSON模式容許您定義scope屬性，該屬性能夠過濾適用於該代碼段的語言（基於語言標識符）。

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

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

添加新代碼段後，您能夠當即嘗試，無需從新啓動。

片斷語法

代碼段的body可使用特殊構造來控制遊標和插入的文本。

如下是支持的功能及其語法：

製表位

使用tabstops，您可使編輯器光標在代碼段內移動。使用$1 ， $2指定遊標位置。

數字是訪問tabstops的順序，而$0表示最終光標位置。

同一個tabstop的屢次出現被連接並同步更新。

zyx456：就是tab按鍵。

佔位符

佔位符是帶有值的tabstops，例如${1:foo} 。將插入並選擇佔位符文本，以即可以輕鬆更改。佔位符能夠嵌套，例如${1:another ${2:placeholder}} 。

zyx456：就是帶有默認值的插糟。

選擇

佔位符能夠做爲值進行選擇。語法是逗號分隔的值枚舉，用管道字符括起來，例如${1|one,two,three|} 。

插入代碼段並選擇佔位符後，選項將提示用戶選擇其中一個值。

變量

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

未設置變量時，將插入其默認值或空字符串。

當變量未知（即，未定義其名稱）時，將插入變量的名稱並將其轉換爲佔位符。

可使用如下變量：

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剪貼板的內容

用於插入當前日期和時間：

CURRENT_YEAR當前年份
CURRENT_YEAR_SHORT當前年份的最後兩位數字
CURRENT_MONTH兩個數字的月份（例如'02'）
CURRENT_MONTH_NAME月份的全名（例如「七月」）
CURRENT_MONTH_NAME_SHORT月份的簡稱（例如'Jul'）
CURRENT_DATE每個月的某一天
CURRENT_DAY_NAME天的名稱（例如'星期一'）
CURRENT_DAY_NAME_SHORT當天的簡稱（例如'Mon'）
CURRENT_HOUR 24小時制格式的當前小時
CURRENT_MINUTE當前分鐘
CURRENT_SECOND當前秒

變量變換

轉換容許您在插入變量以前修改變量的值。轉型的定義包括三個部分：

與變量值匹配的正則表達式，或沒法解析變量時的空字符串。
「格式字符串」，容許從正則表達式引用匹配組。格式字符串容許條件插入和簡單修改。
傳遞給正則表達式的選項。

下面的示例插入當前文件的名稱而不是其結尾，所以從foo.txt它會生成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

佔位符，變換

與變量轉換同樣，佔位符的轉換容許在移動到下一個製表位時更改佔位符的插入文本。

插入的文本與正則表達式匹配，匹配或匹配 - 取決於選項 - 將替換爲指定的替換格式文本。每次出現佔位符均可以使用第一個佔位符的值獨立定義本身的轉換。

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

轉換例子

這些示例顯示在雙引號內，由於它們會顯示在代碼段內，以說明須要雙重轉義某些字符。

示例轉換以及文件名example-123.456-TEST.js的結果輸出。

例	產量	說明
`"${TM_FILENAME/[\\.]/_/}"`	`example-123_456-TEST.js`	替換第一個`.` 用`_`
`"${TM_FILENAME/[\\.-]/_/g}"`	`example_123_456_TEST_js`	替換每一個`.` 或`-`與`_`
`"${TM_FILENAME/(.*)/${1:/upcase}/}"`	`EXAMPLE-123.456-TEST.JS`	改成所有大寫
`"${TM_FILENAME/[^0-9^az]//gi}"`	`example123456TESTjs`	刪除非字母數字字符

語法

下面是片斷的EBNF（擴展Backus-Naur形式）。使用\ （反斜槓），您能夠轉義$ ， }和\ 。在選擇元素中，反斜槓也會轉義逗號和管道字符。

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        ::= .*

將鍵綁定分配給片斷

您能夠建立自定義鍵綁定以插入特定代碼段。

打開keybindings.json （首選項：打開鍵盤快捷鍵文件），它定義了全部的鍵綁定，並添加了一個鍵盤綁定，將"snippet"做爲額外參數傳遞：

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

鍵綁定將調用Insert Snippet命令，但不會提示您選擇片斷，而是會插入提供的片斷。您能夠像往常同樣使用鍵盤快捷鍵，命令ID和可選的when子句上下文定義自定義鍵綁定，以啓用鍵盤快捷鍵。

此外，您可使用langId和name參數引用現有代碼段，而不是使用snippet參數值來定義內聯代碼段：

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

將本身的代碼片斷轉爲共享擴展

地址：contributes.snippets

使用Preferences: Configure User Snippets命令建立和測試您的片斷。

對代碼段感到滿意後，將整個JSON文件複製到擴展文件夾中，例如 snippets.json
將如下代碼段添加到您的 package.json

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

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

實例

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"
            }
        ]
    }
}

相關標籤/搜索

每日一句

每一个你不满意的现在，都有一个你没有努力的曾经。