📖

【VSCode】Reactでスニペットを使おう

2021/12/15に公開

React

TypeScript

VS Code

tech

次のようなアロー関数を毎回書くのが面倒だ。。。

const sum = (a:number, b:number) => {
  return a + b;
}

そんなときはスニペット！
使い方は簡単でした。。。
次のキャプチャを参考に"ユーザースニペット"を選択。

すると検索窓が出てくる。
Reactなら「typescriptreact.json」typescriptファイルなら「typescript.json」を選択

はじめて開くとコメントアウトで使い方の例が載っている。
全部いらないので消してから次ののように更新。

{
  "() => {}": {
    "prefix": "afn",
    "body": "const $1 = ($2) => {$3}",
    "description": "アロー関数"
  }
}

それぞれの内容は以下の通り。

"prefix"は入力
"body"は出力
"description"は自分用の説明書き(スニペットに直接関係ない)

また、bodyにある「$1」は初期カーソル位置を表している。タブを押すことで$2、$3と順番に移動することができる。上の例では、まずは関数名を入力してタブを押してから引数名、次に関数内へと移動することができる。

実際に入力すると次のように表示されます。

そして初期位置カーソルは想定通り$1の箇所に当たる！

応用編

複数行のスニペット

複数行の出力も簡単にできる。

  "Component initialization": {
    "prefix": "cinit",
    "body": [
      "import React from 'react';",
      "",
      "export const $TM_FILENAME_BASE = () => {",
      "  return (",
      "    <>",
      "      <div>hello world</div>",
      "    </>",
      "  );",
      "};"
    ],
    "description": "コンポーネントの初期化"
  },

bodyの値を配列にするだけ。空の行は[""]でOK。
App.tsxで"cinit"と入力した際の出力はこんな感じ

スニペット用の変数

vscodeにはスニペット用の変数が準備されている。
" 複数行のスニペット "で実際に利用していて「$TM_FILENAME_BASE」というやつ。
これは、出力時に「拡張子のない現在のドキュメントのファイル名」に置き換わる。
他にもたくさん用意されていて、次のリンクから詳細を確認できます。

おまけ

スニペット用変数の出力を確認するためのスニペットを作ってみました。
コピペしてどんな出力がされるのか確認するのにご利用ください。

  "sample": {
    "prefix": "snivar",
    "body": [
      "$TM_SELECTED_TEXT ",
      "$TM_CURRENT_LINE ",
      "$TM_CURRENT_WORD ",
      "$TM_LINE_INDEX ",
      "$TM_LINE_NUMBER",
      "$TM_FILENAME ",
      "$TM_FILENAME_BASE ",
      "$TM_DIRECTORY ",
      "$TM_FILEPATH ",
      "$RELATIVE_FILEPATH",
      "$CLIPBOARD",
      "$WORKSPACE_NAME",
      "$WORKSPACE_FOLDER",
      "$CURRENT_YEAR",
      "$CURRENT_YEAR_SHORT",
      "$CURRENT_MONTH ",
      "$CURRENT_MONTH_NAME",
      "$CURRENT_MONTH_NAME_SHORT",
      "$CURRENT_DATE",
      "$CURRENT_DAY_NAME",
      "$CURRENT_DAY_NAME_SHORT",
      "$CURRENT_HOUR",
      "$CURRENT_MINUTE ",
      "$CURRENT_SECOND ",
      "$CURRENT_SECONDS_UNIX ",
      "$RANDOM ",
      "$RANDOM_HEX",
      "$UUID",
      "$BLOCK_COMMENT_START",
      "$BLOCK_COMMENT_END",
      "$LINE_COMMENT"
    ],
    "description": [
      "スニペット用変数一覧",
      "公式リンク",
      "https://code.visualstudio.com/docs/editor/userdefinedsnippets",
      [
        "$TM_SELECTED_TEXT 現在選択されているテキストまたは空の文字列",
        "$TM_CURRENT_LINE 現在の行の内容",
        "$TM_CURRENT_WORD カーソルの下の単語または空の文字列の内容",
        "$TM_LINE_INDEX ゼロインデックスベースの行番号",
        "$TM_LINE_NUMBER 1インデックスベースの行番号",
        "$TM_FILENAME 現在のドキュメントのファイル名",
        "$TM_FILENAME_BASE 拡張子のない現在のドキュメントのファイル名",
        "$TM_DIRECTORY 現在のドキュメントのディレクトリ",
        "$TM_FILEPATH 現在のドキュメントの完全なファイルパス",
        "$RELATIVE_FILEPATH 現在のドキュメントの（開いているワークスペースまたはフォルダーに対する）相対ファイルパス",
        "$CLIPBOARD クリップボードの内容",
        "$WORKSPACE_NAME 開いたワークスペースまたはフォルダーの名前",
        "$WORKSPACE_FOLDER 開いたワークスペースまたはフォルダーのパス",
        "$CURRENT_YEAR 今年",
        "$CURRENT_YEAR_SHORT 今年の下2桁",
        "$CURRENT_MONTH 2桁の月（例 '02'）",
        "$CURRENT_MONTH_NAME 月のフルネーム（例「7月」）",
        "$CURRENT_MONTH_NAME_SHORT 月の短縮名（例「7月」）",
        "$CURRENT_DATE 2桁の日（例 '08'）",
        "$CURRENT_DAY_NAME 日の名前（例「月曜日」）",
        "$CURRENT_DAY_NAME_SHORT その日の短い名前（例 'Mon'）",
        "$CURRENT_HOUR 24時間形式の現在の時刻",
        "$CURRENT_MINUTE 2桁の現在の分",
        "$CURRENT_SECOND 2桁の現在の秒",
        "$CURRENT_SECONDS_UNIX Unixエポックからの秒数",
        "$RANDOM 6つのランダムな基数-10桁",
        "$RANDOM_HEX 6つのランダムな基数-16桁",
        "$UUID バージョン4のUUID",
        "$BLOCK_COMMENT_START 出力例：PHP/*またはHTML<!--",
        "$BLOCK_COMMENT_END 出力例：PHP*/またはHTML-->",
        "$LINE_COMMENT 出力例：PHPの場合 //"
      ]
    ]
  }

応用編

複数行のスニペット

スニペット用の変数

おまけ

Discussion