React用カスタムスニペット【VSCode】

Reactを書いていると、いつも長いエクスポート関数を書かなくてはならなくて面倒です。VSCodeにスニペット（コード補完）を独自に作れるカスタムスニペットの機能があると気づき、設定してみました。

すでにReact用functionスニペットはある

というわけで実際はスニペットはもう用意してあります。
rfceと入力すると以下のようなコードが自動補完されます。

import React from 'react'

function () {
  return (
    <div>
      
    </div>
  )
}

export default 

これでも良いのですが、ここでReactをインポートする一文が入っています。React17以前のバージョンでは必要だったみたいですが、現在ではコンパイラ時に必要がなくなったそうです。この一文を消したスニペットが欲しいので自作することにしました。

ユーザースニペット設定の方法

VSCodeのメニュー
File > Preferences > Configure Snippets
と開いていくとどの言語が選択できるようになるので、自分がカスタムしたいスニペットの言語を選びます。（ReactならJavaScript jsx）

するとスニペットを登録するjsonのページが開くので以下のようにjsonオブジェクトの中にコピペします。

"React Functional Component without Import": {
		"prefix": "refc",
		"body": [
		  "function $1() {",
		  "  return (",
		  "    <div>",
		  "      $2",
		  "    </div>",
		  "  );",
		  "};",
		  "export default $1;"
		],
		"description": "React Functional Component without importing React"
	  }

これで、prefixで設定してある文字を打つとコードが自動補完されとても便利になりました。