VSCodeで独自スニペット設定

コマンドパレットを開く

Windows/Linux: Ctrl + Shift + P
Mac: Cmd + Shift + P

「スニペットファイルのユーザー設定」を開く

コマンドパレットで「Configure Snippets」を選択。
「JavaScript (TypeScript)」などのスニペットを選択します。
自分は「react」と検索し「typescriptreact.json」を選択しました。

新しいスニペットを作成

useEffect のスニペットを追加します。
以下のように JSON ファイルにスニペットを追加してください。

typescriptreact.json

{
	"useEffect Snippet": {
		"prefix": "useE",
		"body": [
			"useEffect(() => {",
			"  $1",
			"}, [$2]);"
		],
		"description": "React useEffect hook"
	},
	"useState Snippet": {
		"prefix": "useS",
		"body": "const [$1] = useState($2);",
		"description": "React useState hook"
	}
}

• prefix: "useE" と指定することで、useE と入力したときにこのスニペットが候補に表示されます。大文字小文字は区別されませんので、"usee"でもOK。
• body: 挿入するコードの内容を定義しています。改行したい場合は、配列で値を渡します。

body内で使える変数

$0, $1, $2 ... という変数が用意されています。
これらは"tab"を押した時にカーソルが変数を指定した箇所に移動します。
$1 → $2 → ... → $0 の順で移動します。

プレースフォルダー

${1:label}と書くことで、プレースフォルダーを入れることができます。
$1も併用していた場合、$1にも同じプレースフォルダーが表示されます。

マルチカーソルにも対応

一つのbody内に$1を複数配置した場合はマルチカーソルで表示されます。

ファイルを保存

編集したスニペットファイルのユーザー設定を保存します。
VSCodeの再起動は不要で、すぐに反映されて使うことが出来ます。