VSCodeで言語ごとに独自スニペットを登録する

背景

Vue.jsのプロジェクトを作成する時、Vueの基本的な構文を入力するのが手間でした。

調べては見たものの、表示方法がわからなかったのでオリジナルのスニペットをVSCodeに登録することにしました。

本記事ではテンプレートとして再利用するために、VSCodeのスニペット機能を使って好みのテンプレートを登録する方法紹介します。

やりたかったことは、VSCode内でHTMLファイルを開いて!と入力するとテンプレートの構文が入力されるようにすることです。

以下動作例:

VSCodeにオリジナルのスニペットを登録する

VSCodeにはユーザが独自のスニペットを登録し、特定のキー入力を行ったタイミングでコードを展開できる機能があります。

今回はこの機能を利用し、独自のスニペットを登録する方法についてお話しします。

手順は簡単で以下の4ステップです。

1. VSCodeでCommand + Shift + Pを押しコマンドパレットを表示
2. 検索バーにConfigure User Snippetsと入力しクリック
3. 言語のリストが表示されるのでvue(vue.json)を選択
4. 表示されるJSONにスニペットを貼り付け

貼り付けるスニペット:

{
  "Vue 3 Setup Template": {
    "prefix": "v3s",
    "body": [
      "<script setup>",
      "</script>",
      "",
      "<template>",
      "  <div>",
      "    $0",
      "  </div>",
      "</template>",
      "",
      "<style scoped>",
      "</style>"
    ],
    "description": "Vue 3 Composition API setup template"
  }
}

スニペットの説明

上のコードブロックで表示しているスニペットには

• prefix:入力するキー(今回はv3sにしている)
• body:prefixを入力した時に表示されるテンプレート
• description:スニペットの説明

が入っています。

変更結果

以下のようにprefixを入力すると登録したテンプレートが補完候補として表示され、選択するとテンプレートが展開できれば成功です。

おまけ

言語(拡張子)ごとにテンプレートの登録を行うことができるため、!等に設定して使用することもできます。

複数テンプレートの登録もできるので使いやすい形のテンプレートを何個か登録しておくと開発が楽にになるのでおすすめです。