Go to Qiita Advent Calendar 2024 Top
LoginSignup
2
1

Delete article

Deleted articles cannot be recovered.

Draft of this article would be also deleted.

Are you sure you want to delete this article?

More than 1 year has passed since last update.

@ygsiro(シロ)

VSCodeでスニペットを作成する

Posted at

VSCodeでよく使う文があるならスニペットを使用するのが便利です。
標準で用意されていたり拡張機能をインストールすることで使用できますがどうせなら自分用に作りたいですよね？

ここではユーザー定義のスニペット作成に関する情報をまとめます。

スニペットとは

javascriptファイルなどでforと入力したあとにtabキーをおすとforループのテンプレートが展開されます。
image.png

※Πのようなアイコンのforがスニペットです。一番上のforでは展開されないので注意

image.png

このテンプレートを短いキーワードから展開できるのがスニペットです。

スニペットファイルを用意する。

ユーザー定義のスニペットファイルは大きくわけて二つありそれぞれ拡張子が異なります。

  1. $(language).json - 特定の言語限定のスニペットファイル。
  2. ***.code-snippets - デフォルトでは言語を限定しないスニペットファイル。

どちらもファイル→ユーザー設定→ユーザースニペットの構成から選択して作成します。

image.png

新しいグローバルスニペットファイル...

これを選んだ場合はVSCodeのフォルダのスニペット格納フォルダに***.code-snippetsファイルが作成されます。
複数のプロジェクトで使い、特定の言語によらないスニペットを作成したい場合はこちらを選択します。

'フォルダ名'の新しいスニペットファイル...

これを選んだ場合は現在開いているフォルダの直下の.vscodeフォルダ内に***.code-snippetsファイルが作成されます。現在のプロジェクトでしか使わないスニペットはこちらを使用するのが便利。

'プログラム言語'

これを選んだ場合はVSCodeのフォルダのスニペット格納フォルダに'プログラム言語'.jsonファイルが作成されます。
複数のプロジェクトで使うスニペットはこちらに追加していきましょう。

json構文

どちらも中身はjsonファイルです。違いは***.code-snippetsファイルのほうはscopeという項目がある点です。

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

スニペット名

上のsampleでの"Print to console"の部分です。ここは一意の名前にしてください。

scope

***.code-snippetsファイル限定の項目です。

スニペットを有効化するプログラム言語を複数記載します。
この項目がない場合はどのファイルでも使用可能なスニペットと判断されます。
プログラム言語は,区切りで羅列していってください。

prefix

スニペットを呼び出すキーワードです。
複数登録したい場合は["a", "b"]のように配列形式で記載してください。
スニペット名は重複可能ですがわかりづらいのでお勧めしません。

body

スニペットの中身です。
複数行ある場合は配列で記載します。
bodyについては複数の構文があるので後述します。

body部分の複数行サンプル
"body": [
			"console.log('$1');",
			"$2"
		],

body内で展開後の文に"や$を使用したい場合は\"や\\$のようにエスケープする必要があります。

description

スニペットの簡易な説明を記載します。必須ではないですがあると便利。

image.png

body内構文

ようやく本題に入ります。
タブストップとプレースホルダーだけ覚えてしまえば９割のスニペットは作成可能だとおもいます。

タブストップ

$1～$N,$0

スニペットを展開した後body内に記載されたタブストップの$1から数字の小さい順にタブキーを押すとカーソルが移動します。
$0だけ特殊で一番最後に移動する場所となります。
タブストップは同じ$Nを複数記載することも可能です。

sample
{
	"Print to console": {
		"prefix": "log",
		"body": [
			"console.log('$1');",
			"console.log('$1');",
			"$0"
		]
	}
}

プレースホルダー

タブストップだとカーソルが移動するだけで入力しないといけないのが面倒。
せめて初期値でも入っていれば・・・というときに使用するのがプレースホルダーです。

${1:default}

他はタブストップの内容に準じます。

sample
{
   "for loop":{
      "prefix": "for",
      "body": [
         "for(let ${1:index} = 0; $1 < ${2:length}; $1++){"
         "    $0",
         "}"
      ]
   }
}

上記sampleですが${1:index}はひとつだけでその後は$1としか記述されていませんが、
展開すれば以下のような形に展開してくれます。

for(let index = 0; index < length; index++){
    
}

これは後述する正規表現に関しても同じなので覚えてください。

選択肢

プレースホルダーのようにタブで移動したときに選択肢から選ぶことができます。

${N|abc,def,ghi,...|}

image.png

後述する変数や正規表現などを選択肢として使用できないので注意。

変数

ファイル名や現在の日付を入力したい場合変数を使用することも可能です。
$変数名のように記載します。

変数名一覧は以下のようになります。

  • TM_SELECTED_TEXT 現在選択しているテキスト
  • TM_CURRENT_LINE 現在の行の内容
  • TM_CURRENT_WORD 現在のカーソル位置の単語（もしくは空白）
  • TM_LINE_INDEX 最初の行を０行目としたときの現在の行番号
  • TM_LINE_NUMBER 最初の行を１行目としたときの現在の行番号
  • TM_FILENAME 現在のドキュメントのファイル名
  • TM_FILENAME_BASE 現在のドキュメントのファイル名（拡張子なし）
  • TM_DIRECTORY 現在のドキュメントのディレクトリ
  • TM_FILEPATH 現在のドキュメントのフルのファイルパス
  • RELATIVE_FILEPATH 現在のドキュメントの相対（開いているワークスペースやフォルダに対する）ファイルパス
  • CLIPBOARD クリップボードの内容
  • WORKSPACE_NAME 開いているワークスペースまたはフォルダーの名前
  • WORKSPACE_FOLDER 開いているワークスペースまたはフォルダーのパス
  • CURRENT_YEAR 現在の年
  • CURRENT_YEAR_SHORT 現在の年の下2桁
  • CURRENT_MONTH 2桁の月 (例 '02')
  • CURRENT_MONTH_NAME 月の正式名称（例：'July')
  • CURRENT_MONTH_NAME_SHORT 月の略称（例：'Jul'）。
  • CURRENT_DATE 2桁の日付(例：'08')
  • CURRENT_DAY_NAME 曜日名 (例: 'Monday')
  • CURRENT_DAY_NAME_SHORT 曜日の略称（例：'Mon')
  • CURRENT_HOUR 24時間表示での現在時刻
  • CURRENT_MINUTE 現在の分を2桁で表示
  • CURRENT_SECOND 現在の秒を2桁で表示
  • CURRENT_SECONDS_UNIX Unixエポックからの秒数
  • RANDOM 10進数6桁の乱数
  • RANDOM_HEX 16進数6桁の乱数
  • UUID バージョン4のUUID
  • BLOCK_COMMENT_START 出力例：C++の場合 /* またはHTMLの場合 <!--
  • BLOCK_COMMENT_END 出力例：C++の場合 */ またはHTMLの場合 -->
  • LINE_COMMENT 出力例：C++の場合 //
  • CURSOR_INDEX マルチカーソルの最初の選択を0とした番号
  • CURSOR_NUMBER マルチカーソルの最初の選択を1とした番号
  • 1～N タブストップ$1～$Nの内容。

月や曜日に関しては日本語環境だと３月や木曜日などと変換されるので環境依存に注意です。

body内
body: "$CURRENT_YEAR/$CURRENT_MONTH/$CURRENT_DATE($CURRENT_DAY_NAME)"
展開後
2022/08/28(日曜日)

正規表現

変数に対して正規表現で加工することが可能です。

${変数/正規表現/置換/正規表現オプション}

正規表現はjavascriptの正規表現に倣いますので、正規表現に関してはMDNなどの正規表現のページを参照してください。

sample
"#name": {
  "prefix": "#name",
  "body": "${TM_FILENAME/(?:(\\w+)(\\.)?)/${1:/upcase}${2:+_}/gi}"
}
header.sample.hpp
//header.sample.hppのファイルで上記スニペットを展開した場合
HEADER_SAMPLE_HPP

正規表現及び正規表現オプションはjavascriptの正規表現を確認してください。
スニペット独自の機能として置換後の$1...などに大文字化などのオプションがあります。

上記サンプルで${1: /upcase}としている部分の/upcaseがオプションです。

置換項目のオプション一覧

  • /upcase 大文字にする
  • /downcase 小文字にする
  • /capitalize 文字の先頭を大文字にする
  • /camelcase キャメルケースにする
  • /pascalcase パスカルケースにする
  • + string 正規表現でキャプチャした部分が空白でなければstring
  • ? A: B 正規表現でキャプチャした部分が空白でなければA,空白ならB
  • - string 正規表現でキャプチャした部分が空白であればstring
  • string 正規表現でキャプチャした部分が空白であればstring

呼び出し手段

変数一覧に現在選択しているテキスト($TM_SELECTED_TEXT)があるのを確認したでしょうか？
キーワードを入力して展開だとこの変数は使えないはず。

ということはキーワード以外から呼び出す手段があるのです。

キーワードから呼び出し

まずは基本のキーワードから呼び出し。スニペットファイルの"prefix"に記載したキーワードを入力すると展開できます。

コマンドパレットから呼び出し

コマンドパレットのスニペットの挿入を選択する方法。

image.png

ショートカットキーから呼び出し

もうひとつはショートカットキーに割り当ててしまう方法です。

こちらは先程のjsonファイルとは異なるjsonファイルに記載します。

ファイル→ユーザー設定→キーボードショートカット→右上のキーボードショートカットを開くのアイコンをクリック
image.png

すると以下のようなjsonファイルが開くきます。

keybindings.json
// 既定値を上書きするには、このファイル内にキー バインドを挿入します
[]

そこにショートカットキーとして追加していきます。

keybindings.json
[{
  "key": "cmd+k 1",
  "command": "editor.action.insertSnippet",
  "when": "editorTextFocus",
  "args": {
    "snippet": "`$TM_SELECTED_TEXT`"
  }
}]

すでに言語のjsonファイルでスニペットを登録しており、それを呼び出すだけの場合以下のようにします。

keybindings.json
[{
  "key": "cmd+k 1",
  "command": "editor.action.insertSnippet",
  "when": "editorTextFocus",
  "args": {
    "langId": "cpp",
    "name": "template class"
  }
}]

cpp.jsonで定義されたtemplate classという名前のスニペットをショートカットキーcmd+k、1で挿入します。

邪魔なスニペットを隠す方法

コマンドパレットからスニペットを挿入を押してでてくるスニペットの一覧で、
邪魔なスニペットの横の目のアイコンをクリックすればスニペットを隠ぺいすることが可能です。

image.png

2
1
0

Register as a new user and use Qiita more conveniently

  1. You get articles that match your needs
  2. You can efficiently read back useful information
  3. You can use dark theme
What you can do with signing up
Sign upLogin
2
1

Delete article

Deleted articles cannot be recovered.

Draft of this article would be also deleted.

Are you sure you want to delete this article?