こぴぺったり

VSCodeユーザースニペットのテンプレ8選 ― 即作業効率を上げる定型コード

VSCodeのuser-snippetsで使えるテンプレを8パターン収録。Reactコンポーネント、console.log、PR説明、コメントテンプレなどコピペで設定できます。

VSCodeのユーザースニペット、知ってる人と知らない人で開発スピードが体感倍違うぐらい大事な機能だと思ってます。

自分も最初は使ってなかったんですが、いざ設定し始めたら「あ、これ毎日打ってたやつ全部スニペット化できるじゃん」となって（^^!

設定方法は超簡単。

  1. コマンドパレットで「Configure User Snippets」と入力
  2. 言語別（typescript.json など）か Global を選択
  3. 下記テンプレをコピペ

これだけ。
prefix（呼び出し文字）を入力して Tab すると展開されます。
下記をマージして自分専用の組み合わせを育てていくのがおすすめです！

1. React関数コンポーネント

用途: TypeScript React のコンポーネントをサクッと生成

"React Functional Component": {
  "prefix": "rfc",
  "scope": "typescriptreact",
  "body": [
    "import React from 'react';",
    "",
    "type Props = {",
    "  $1",
    "};",
    "",
    "export const ${TM_FILENAME_BASE}: React.FC<Props> = ({ $2 }) => {",
    "  return (",
    "    <div>",
    "      $3",
    "    </div>",
    "  );",
    "};",
    ""
  ],
  "description": "React 関数コンポーネントの雛形"
}

${TM_FILENAME_BASE} で ファイル名がそのままコンポーネント名になります。

MyButton.tsx で rfc → Tab すると、MyButton という名前のコンポーネントが自動生成。地味だけど超便利（^^b

2. console.logにラベル付き

用途: デバッグ用ログをラベル付きで出力

"Console log with label": {
  "prefix": "cl",
  "scope": "javascript,typescript,javascriptreact,typescriptreact",
  "body": [
    "console.log('${TM_FILENAME_BASE} → $1:', $1);"
  ],
  "description": "ラベル付き console.log"
}

ラベル付きログは **「どのファイルのどの変数か」**が一目でわかるので、デバッグが激速になります。

cl → Tab → 変数名 で console.log('Button → userId:', userId); のように出力されます（^^!

3. useState ワンライン

用途: React の useState をサクッと書く

"useState hook": {
  "prefix": "us",
  "scope": "typescriptreact,javascriptreact",
  "body": [
    "const [${1:state}, set${1/(.*)/${1:/capitalize}/}] = useState${2:<$3>}($4);"
  ],
  "description": "useState のショートカット"
}

us → Tab → count と打つと const [count, setCount] = useState<型>(初期値); の形に展開され、ジェネリクスと初期値の位置にカーソルが移ります。

set の後の文字を自動でキャピタライズしてくれるのが、これの一番のポイントです（^^b

4. try-catch ブロック

用途: 非同期処理のエラーハンドリング

"Try-catch block": {
  "prefix": "tc",
  "scope": "javascript,typescript",
  "body": [
    "try {",
    "  $1",
    "} catch (error) {",
    "  console.error('${TM_FILENAME_BASE}:', error);",
    "  $2",
    "}"
  ],
  "description": "try-catch ブロックの雛形"
}

try-catch は地味に毎回書くやつなので、スニペット化しておくと入力ストレスがかなり減ります。

エラーログにファイル名が自動で入るのもポイント高いです（^^!

5. JSDocコメント（関数用）

用途: 関数の上にJSDocコメントを書きたいとき

"JSDoc for function": {
  "prefix": "jsd",
  "scope": "javascript,typescript",
  "body": [
    "/**",
    " * $1",
    " * @param ${2:param} - $3",
    " * @returns $4",
    " */"
  ],
  "description": "関数用JSDocテンプレ"
}

jsd → Tab でJSDoc枠が即出てきます。

VSCodeはJSDocを認識してくれるので、書いておけばホバーで型情報やパラメータの説明が出るようになります（^^b

6. Pull Requestテンプレ

用途: GitHub PR の説明文を素早く埋めたいとき

"PR Template": {
  "prefix": "prtmpl",
  "scope": "markdown",
  "body": [
    "## 概要",
    "$1",
    "",
    "## 変更内容",
    "- $2",
    "",
    "## テスト",
    "- [ ] $3",
    "",
    "## スクリーンショット",
    "$4",
    "",
    "## 関連Issue",
    "Closes #$5"
  ],
  "description": "Pull Request の説明テンプレ"
}

PRの説明欄は テンプレ化しておくと毎回書くストレスが消えます。

prtmpl → Tab で穴埋め式の構成が出てくるので、必要箇所だけ埋めれば完了です（^^!

7. TypeScriptの型定義

用途: 関数引数やレスポンス用の型をサクッと作る

"TypeScript type definition": {
  "prefix": "tdef",
  "scope": "typescript,typescriptreact",
  "body": [
    "export type ${1:TypeName} = {",
    "  $2",
    "};"
  ],
  "description": "TypeScriptのtype定義"
}

tdef → Tab で export type TypeName = { } が即出ます。

プロパティを追加していくスピードが上がるので、API レスポンスの型定義などに重宝します（^^b

8. React import 一式

用途: Reactコンポーネントの先頭でよく書くimport一式

"Import React + hooks": {
  "prefix": "ir",
  "scope": "typescriptreact,javascriptreact",
  "body": [
    "import React, { useState, useEffect, useCallback, useMemo } from 'react';"
  ],
  "description": "Reactとよく使うhookをまとめてimport"
}

フックは使わないやつもありますが、ir → Tab で 全部入りimportにしておくと、後で「あれ、useEffect importしたっけ」が消えます。

ただし React 17 以降の new JSX Transform 環境では import React 自体が不要なケースが多いので、自分のプロジェクト設定に合わせて削るのを忘れずに（^^!

関連する例文集