VSCodeでのスニペットの書き方

きっかけ

Next.jsで毎回SSRとかコンポート書くのめんどくさくないですか...？拡張機能見つかんなかったから、スニペット作るかぁって感じです。

やり方

二種類ある。

• VSCode全体
• プロジェクト単位。.vscodeディレクトリに*.code-snippetsファイルをおくことで可能

今回はVSCode全体でやります。

1. .code-snippetssnipetsファイルを作成する

ctrl + shift + P で検索窓をだして、
「ユーザースニペットの作成」＞「新しいグローバルスニペットの作成」

2. 書き方

  "new getServerSideProps": {
    "scope": "javascriptreact,typescriptreact",
    "prefix": "SSR",
    "body": [
      "export async function getServerSideProps() {",
        "const res = await fetch(`https://.../data`)",
        "const data = await res.json()",

        "return { props: { data } }",
      "}"
    ],
    "description": "Template of new SSR"
  }

• scope : どの拡張子のファイルで使うか設定。以下の公式サイトから言語を選ぶ。

• prefix : 呼び出し方
• body : 挿入される文字列。配列にすると複数行を入力できる。
• description: 説明文。

参考

(青い記事入れてすみませんqiitaさん)