VSCodeにスニペットを登録する方法

はじめに

VSCodeにスニペットを登録する手順です。
サンプルも紹介します。
スニペットを利用する言語を特定して設定できるのですごく便利です。
もちろん、言語関係なく、すべてのファイルに対して適用することも可能です。
（自分で作ったスニペットのprefixが覚えられないのは私だけでしょうか…）

手順

ファイル > ユーザー設定 > ユーザ スニペットの作成
とクリックし進みます。

以下の表示になると思います。

スニペットを適用する言語（拡張子）が決まっている場合は対象のものを選択。
決まっていない。またはグローバルに設定したい場合は「新しいグローバル スニペット ファイル」を選択

「all-language」など適宜ファイル名を入力し、Enter。

今回は「all-language」としてEnter押下し、「all-language.code-snipets」ファイルを生成しました。
ファイルの中身を以下のように編集。

all-language.code-snipets

{
	"SampleSnipets": {
		"prefix": "aaa",
		"body": [
			"サンプルスニペットです。"
		],
		"description": "スニペットの説明を記載"
	}
}

動作確認してみましょう。
prefixに設定した「aaa」を入力。
「Enter」または「Tab」キーを押下すると、bodyに設定した内容が入力されます。

先頭に入力したSampleSnipets（キー名）はprefixを入力した際に候補として表示されます。
descriptionに設定した内容は、候補の右側、「>」を押下すると表示、非表示の制御が可能です。

終わりに

スニペットの登録は簡単ですね。

サンプルとして、GIF、コードの順に二つ紹介。

1: 「logcp」と入力すると、console.log('CheckPoint $1');
が入力され「$1」の箇所にカーソルが設定される。

  "LogCheckpoint": {
    "prefix": "logcp",
    "body": [
      "console.log('CheckPoint $1');"
    ],
    "description": "Log a checkpoint message"
  }

2: 「newfc」と入力すると、関数コンポーネントのひな形をファイル名から補完して作成する。

		"NewFC": {
    "prefix": "newfc",
    "body": [
      "import { FC } from 'react';",
      "",
      "const $TM_FILENAME_BASE: FC = () => {",
      "  console.log('$TM_FILENAME_BASE');",
      "  return (",
      "    <>",
      "      <div>$TM_FILENAME_BASE</div>",
      "    </>",
      "  );",
      "};",
      "",
      "export default $TM_FILENAME_BASE;"
    ],
    "description": "Create a new React functional component"
  }