最初にVSCodeのスニペットは作っておこう

Next.jsで開発をしていてコンポーネントを新しく作るとき、今まではrafceコマンドしていました。

SampleComp.ts

import React from 'react'

const sample = () => {
  return (
    <div>
      
    </div>
  )
}

export default sample

##でもなんか気に食わない
でも色々気に食わないところがありした。例えば...

・型がついていない
・最初っからdivタグなのは嫌だ
・そもそもrafceってコマンドが気に食わない

##理想
Reactの関数コンポーネントを作るのであればReact Functional Componentってことで頭文字取ってrfc で呼び出したい。
（完成イメージ）

SampleComponent.ts

import React, { FC } from 'react'

export const SampleComp: FC = () => {
  return (
    <>
      <p>this is sample</p>
    </>
  )
}

##そんな時は自作しよう
VSCodeを開いて、設定のUserSnippetsを選択します。

そうすると検索バーが出てくるので、そこで言語を選択します。
（今回はNext.jsでTypeScriptを使いたいのでtypescriptreact.jsonを選択）

するとTypeScriptでReactを書くときのスニペットを設定するjsonファイルが出てくるので、ここに色々書いていきます。

何やらExampleがあるので、それを見てみると

説明すると

　prefix:　トリガーとなるコマンドを書く。これを打つとbodyに設定したスニペットが展開される。
　body:　ここにスニペットを書いていく。配列にすれば複数行のスニペットが作れる。$1と書いたところに最初カーソルが当たっている。$2, $3としておくと、Tabで移動できる。
　description:　説明文。なくても発動するけど未来の自分のためになるべく書いておこう。

と言うことです。なのでこれを自分好みに書き変えます。

typescriptreact.json

{
  "console.log": {
    "prefix": "cl",
    "body": "console.log($1)",
    "description": "console.log"
  },
  "React Functional Component": {
    "prefix": "rfc",
    "body": [
      "import React, { FC } from 'react'",
      "",
      "export const $TM_FILENAME_BASE: FC = () => {",
      "  return (",
      "    <>",
      "      $1<p>this is sample</p>",
      "    </>",
      "  )",
      "}",
      ""
    ],
    "description": "create React Functional Component"
  }
}

コンポーネント名をファイル名と同期させたい時はVSCode公式が用意してくれるTM_FILENAME_BASE定数を使います。

他にも色々あります。（VSCode公式）
　TM_FILENAME　拡張子つきのファイル名
　WORKSPACE_NAME　今のワークスペース名
　CURRENT_MONTH_NAME Julyとかで今月が出てくる

#完成品
いい感じだ

#まとめ
・prefixでコマンド登録！
・bodyにスニペットを書く！
・保存！
・色々変数が使える！

#参考リンク
VSCode公式
https://code.visualstudio.com/docs/editor/userdefinedsnippets

分かりやすかったYouTube動画
https://www.youtube.com/watch?v=KhaQw923268&ab_channel=Code2020