⚡

VSCodeスニペットで開発効率を上げる

に公開
VS Code
editor
snippet
Productivity
tech

VSCodeのスニペット機能を使って、よく使うコードを簡単に入力する方法を紹介します。console.logなどの頻繁に入力するコードを、数文字のショートカットで展開できます。

スニペットとは

事前に登録したコードテンプレートをショートカットで展開できる機能です。エイリアス（別名）を入力するだけで、定型文を自動生成できます。

グローバルスニペットの登録

すべてのプロジェクトで使用できるスニペットを登録します。

手順

  1. VSCodeを開く
    • 左下の歯車アイコン >「Configure User Snippet」を選択

  1. 新規スニペットファイルを作成
    • 「New Global Snippets file...」を選択
    • 任意のファイル名を入力

  1. スニペットを定義
{
  "console log": {
    "prefix": "cl",
    "body": [
      "console.log($1)"
    ]
  }
}

使い方: JSファイルでclと入力するとconsole.log()が展開されます。$1の位置にカーソルが自動移動します。

スニペットの構文

  • prefix: 入力するショートカット
  • body: 展開されるコード（配列で複数行対応）
  • $1, $2...: カーソルの移動位置（Tab キーで順次移動）

プロジェクト別スニペットの登録

特定のプロジェクトでのみ使用するスニペットを登録できます。

手順

グローバルスニペットと同じ手順ですが、「New Snippets file for 'project-name'」を選択します。

プロジェクトルートに.vscodeフォルダが自動生成され、その中にスニペットファイルが作成されます。

まとめ

VSCodeのスニペット機能を活用すれば、コーディング効率が大幅に向上します。

おすすめの用途:

  • console.logなどのデバッグコード
  • コンポーネントのテンプレート
  • よく使う型定義
  • テストコードのボイラープレート

頻繁に入力するコードはスニペットに登録して、作業を効率化しましょう。

Discussion