VSCodeでコーディングの効率アップ！スニペットの登録で手軽に速度向上！

editor 2024/01/29

1 スニペットとは？
2 スニペットの登録手順
3 スニペットの書き方
- 3.1 メディアクエリ（SCSS.json）
- 3.2 コメント（SCSS.json）
4 スニペットの活用

ウェブ開発者にとって、コーディングの速度向上は重要です。VSCodeではスニペットと呼ばれる機能を活用することで、手軽に効率的なコーディングが可能です。今回はVSCodeのスニペットの登録方法と使い方について解説します。

スニペットとは？

スニペットは、コードの断片や定型文を予め登録しておき、効率的に挿入できる機能です。VSCodeではこれを利用してコーディングをスピーディに進めることができます。

スニペットの登録手順

VSCodeでスニペットを登録するには、File → Preferences → User Snippetsから言語別にスニペットを追加できます。各言語ごとに適したスニペットを登録しましょう。

スニペットの書き方

スニペットはJSON形式で書かれます。トリガーワードや挿入するコードを指定します。

"スニペット名": {
  "prefix": "トリガーワード",
  "body": [
      "挿入するコード",
      ...
  ],
  "description": "スニペットの説明""
}

以下は、VSCodeのスニペットでよく使用されるコード補完や特殊な表記の説明です。

記号・表記	説明
`\n`	改行を意味します。スニペット内でこの表記を使うと、新しい行に移動します。
`$1`, `$2`, …	タブストップを表します。これはスニペット挿入後にタブキーで順番に移動できます。
`$0`	最終のタブストップです。スニペットの最後の部分で、ここにカーソルが戻ります。
`$SELECTION`	選択範囲を表します。スニペットが挿入されると、選択していた部分がここに置き換えられます。
`${TM_FILENAME_BASE}`	ファイル名（拡張子なし）を意味します。
`${TM_SELECTED_TEXT}`	選択されたテキストを表します。スニペットが挿入されると、選択していたテキストがここに置き換えられます。

以下サンプルをご紹介します。

メディアクエリ（SCSS.json）

"mediaQuery": {
	"prefix": "@mq",
	"body": [
		"@include mq(pc) {",
		"\t$1",
		"}"
	],
	"description": "Log output to console"
},

コメント（SCSS.json）

"comment": {
	"prefix": "cmt",
	"body": [
		"/* =============================================",
		"\t$1",
		"============================================= */"
	],
	"description": "Log output to console"
},