Zenn
✂️

Visual Studio Codeのスニペット(snippet)について

2023/04/02に公開
VS Code
snippets
tech

公式情報

Create your own snippets
https://code.visualstudio.com/docs/editor/userdefinedsnippets#_create-your-own-snippets

入力例

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

表示例

内容

項目名 内容
(title) 辞書のキー。項目の右側に表示される。
prefix 入力の先頭部分。この文字列との一致で表示。
body 各行。型はstring[]
description このスニペットの説明。メニューの近くのウインドウで表示される。

タブストップなど

カーソルの停止位置として$1などが使用可能。最終的なカーソル位置は$0が使用可能。

$1, $2
$0

また、プレースホルダも使用可能。

${1:label}, ${2:another}

選択肢も使用可能。

${1|おはようございます！,こんにちは！,こんばんは！|}

変数

各変数も利用可能。変数内容は公式情報を参照。

{
  "File Header": {
    "prefix": "header",
    "body": [
      "$LINE_COMMENT File:$TM_FILENAME ",
      "$LINE_COMMENT UUID:$UUID"
    ],
    "description": "File Header"
  }
}

便利なWebアプリ

http://snippet-generator.app/

Discussion