なぜこの記事を書こうと思ったのか

Vueの学習を始めたのですが、Reactと比べて script, template, style の3つのタグを書くのが少し面倒だなと感じました。
拡張機能を導入すれば「vueinit」の入力で自動生成できるのですが、タグの順番やインデントなど、細かい部分が自分の好みに合わず…。(reactではtsxを表示する際に「rafceやrafc」をよく使っていました。)

何度か手動で直しながら書いてみたものの、3回目あたりで「やっぱり毎回これは面倒だな」と感じ、
「じゃあもうスニペット作ってみるか」と初めて手を出してみました。

いざ作ってみると、思ったよりずっと簡単で、もっと早くやっておけばよかった…と。
こう言った経緯で今回記事にまとめてみました。

実例とやりたいこと、結果。

<template lang="">
  <div>

  </div>
</template>
<script>
export default {

}
</script>
<style lang="">

</style>

これはvueでの拡張機能インストール後に「vueinit」を用いて出力されるテンプレートになります。これに対して以下の問題がありましたので改善していきます。

どういった構成にしたいのか？

表示される順番についてはscript -> template -> styleとしたい
scriptには setup と lang="ts"をあらかじめに持たせたい
templateにはindex.htmlでデフォルトのlangを設定するため何も持たせたくない
styleについてもlangは特に指定しない

ということを実際にスニペットで書いてみたいと思います。

スニペットファイルの置き場所と構成について

今回は「チームでも共有できるようにしたい」という前提があったため、
プロジェクトディレクトリ内の .vscode にスニペットファイルを設置し、Git管理することにしました。

なお、.vscode/snippets/ のようなディレクトリ分けはできないため、
prefix に s- を付けてソートしやすいように分類しています。
（ファイル名は .code-snippets 拡張子、命名はケバブケースが主流とのことなのでそれに倣いました）

.vscode
├── extensions.json
├── s-function-snipets.code-snippets ✅
├── s-vue-snipets.code-snippets ✅
└── settings.json

スニペットファイルの中身

.vscode/s-vue-snippets.code-snippets に記載している内容は以下のとおりです：

{
  "Vue Script Setup": {             //スニペットのタイトル
    "prefix": "vvv",                //呼び出し時に使われる文字列
    "body": [                       //出力される内容(文字列配列で管理する)
      "<script lang=\"ts\" setup>",
      "",                           //改行時は空文字を入れる
      "</script>",
      "<template>",
      " <div>",
      "",
      " </div>",
      "</template>",
      "",
      "<style></style>",
    ],
    "description": "このプロジェクト独自のvueファイル構成",   //説明欄
  },
}

基本的に以下の４段階構成でした。全然難しくなかったですね。

タイトル
呼び出し用の文字列(prefix)
出力される内容(body)
補足の説明(description(任意))

実際に作成したスニペットを使ってみる

App.vueファイル内で prefixとして設定した「 vvv 」を入力すると以下のように選択候補が出力されました。

入力補完に出力された内容を出力してみると以下のようになります。ばっちり狙ったものができました。

小技について

$1 → 展開直後にカーソルが当たる  
$2 → Tabキーで次の場所へ移動

さらに、文字列変換にも対応しています

Capitalize ${1:/capitalize} ->先頭だけ大文字に
Lowercase ${1:/downcase} -> 全部小文字に
Uppercase ${1:/upcase} -> 全部大文字に
Regex Replace ${1/(.*)/prefix$1/} -> 正規表現で置換

ReactのuseState用snipets(setの後の最初の文字列を大文字に)

{
  "useState": {
    "prefix": "usc",
    "body": [
      "const [$1, set${1/(.*)/${1:/capitalize}/}] = useState<$2>($3)"
    ],
    "description": "useState with auto-cap setter"
  }
}

最後に

Reactで毎回 :FC を書いていた頃から、
「スニペットでもっと早くできたんじゃ？」と思っていた部分が、
今回のVue学習を通してようやく解消できました。

今後もこうした小ネタを活用して、少しでも開発効率を上げていければと思います。