【コーディングが爆速に！】ユーザースニペットとは？【Visual Studio Code】

• 最近、Visual Studio Code を使い始めた
• Visual Studio Code のユーザースニペットって何？
• Visual Studio Code を便利にしたい

そんな方の参考になれるよう記事を書きました。

ユーザースニペットは使えるようになると、1 行書いただけで 100 行のコードを出せるようになったり、非常にコーディングの効率化が図れるようになリます。

そんな Visual Studio Code のユーザースニペットについて、解説していきます。

Visual Studio Code（VS Code）とは？

Visual Studio Code（VS Code）とは、「テキストエディタ」と呼ばれるもので、多数の「テキストエディタ」の中でも現在、フロントエンジニア、バックエンドエンジニア問わず、エンジニア間で最も多く利用されていると言われているのが「Visual Studio Code」です。

Microsoft 社が提供しており有料級の機能が無料で使えるため、SublimeText や Atom を使っていた方が Visual Studio Code に乗り換えることも少なくありません。

ユーザースニペットとは？

ユーザースニペットとは、コードを予めスニペットに登録することで短いコードで簡単に呼び出せる機能です。

普段からよく使うコードや、結構使うけど長いコードを毎回 1 からコードを入力するのは時間の無駄と言えます。

そういったコードを短いコードで出せるようになると、コーディングの効率化に繋がります。

メールとかでよく使う言葉を単語登録するみたいな感じだと思ってもらえれば大丈夫です。

ユーザースニペットの登録方法

それではユーザースニペットの登録方法を見ていきましょう。

1.「Code」→「基本設定」→「ユーザー スニペット」を選択する。

2.検索欄で登録したいスニペットの言語を入力し、選択する。

3.「html.json」にスニペットを登録する。

初期状態だと、ここに説明とコードサンプルが入っていますが、削除して大丈夫です。

ここまでで、ユーザースニペットを入力できる段階になりました。

では、実際に何を入力すれば良いか見ていきましょう。

ユーザースニペットを登録する

ユーザースニペットは基本的に以下のようなフォーマットで記述していきます。

html.json

{
  //ここから
  "スニペット名": {
    "prefix": "呼び出すためのショートカット",
    "body": [
      "出力コードの1行目",
      "出力コードの2行目",
      "..."
    ],
    "description": "スニペットの説明文" //任意
  }
  //ここまでが1つのスニペット
}

各項目	内容
スニペット名	スニペットの名前(自分が分かりやすい名前で OK)
prefix	スニペットを呼び出すためのショートカット
body	設定した prefix を入力したら展開されるコード
description	スニペットの説明文(任意)

このフォーマットで記述することによってユーザースニペットを登録することができます。

また、以下のようにカンマで区切ることで、ユーザースニペットを複数登録することができます。

html.json

{
  "[スニペット1]": {
    "prefix": "[呼び出すためのショートカット]",
    "body": [
      "[出力コードの1行目]",
      "[出力コードの2行目]",
      "[...]"
    ],
    "description": "[スニペットの説明文]" //任意
  }, //カンマを追加
  "[スニペット2]": {
    "prefix": "[呼び出すためのショートカット]",
    "body": [
      "[出力コードの1行目]",
      "[出力コードの2行目]",
      "[...]"
    ],
    "description": "[スニペットの説明文]" //任意
  } //最後のカンマは要らない
}

覚えておきたい「$」や「\t」

「$」とは

「$1」 や**「$2」** といった記号を使うと、展開したコードを入力できる箇所を指定することができます。

例えば、以下のように設定すると

html.json

{
  "Test": {
    "prefix": "te",
    "body": [
      "<div class=\"$1\">",
      "\t<h2>",
      "\t\t$2",
      "\t</h2>",
      "\t<p>",
      "\t\t$3",
      "\t</p>",
      "</div>"
    ]
  }
}

展開された後のコードでは

index.html

<div class="[ここに最初からカーソルが当たっている]">
  <h2>
    [「tab」キーを押すとここに移動する]
  </h2>
  <p>
    [また、「tab」キーを押すとここに移動する]
  </p>
</div>

のように、「tab」キーを押すだけで入力できる箇所に飛べるようになります。
スムーズに作業を進める事ができるようになります。

また、「${1:テキスト}」のように初期値を設定することもできます。

基本的には同じだけど、たまに変更する可能性があるものに対しては、予め初期値を設定しておくと良いでしょう。

「\t」とは

「\t」 という記号を使うと、展開したコードにタブを挿入することができます。

先程のスニペットで、もし「\t」がなかった場合は

index.html

<div class="[ここに最初からカーソルが当たっている]">
<h2>
[「tab」キーを押すとここに移動する]
</h2>
<p>
[また、「tab」キーを押すとここに移動する]
</p>
</div>

のようになって、見づらいコードになってしまいます。

普段のコーディングでタブを使って整形しているように、予め「\t」を使って展開されるコードが整形されたコードになるようにしておきましょう。

最後に

ユーザースニペットは最初、登録するのが少し手間かもしれません。

しかし、1 回登録してしまえば今後のコーディング効率化には欠かせなくなりますので、少し手間がかかりますがユーザースニペットを登録してコーディングを爆速にしていきましょう！

参考記事

https://code.visualstudio.com/docs/editor/userdefinedsnippets