2021/10/2

【VS code】スニペットの登録と使い方！HTMLなどの入力速度を数倍にして効率を高めよう！

この記事からわかること

VS codeのスニペット機能とは
スニペットの登録方法と使い方
使えるスニペット紹介

index

[open]

＼アプリをリリースしました／

友達や家族の誕生日をメモ！通知も届く-みんなの誕生日-

posted withアプリーチ

コーディングをするときにいつも同じようなコードを書いているなと思うことありますよね。

使いまわせるコードを何度も書くのは面倒ですし、非効率的です。

そこで役立つのがスニペット機能です！今回はスニペット機能の使い方とメリットを解説していきます。

スニペットとは

まずスニペット(snippet)とは日本語で「断片」という意味の英単語になります。

プログラミング言語ではコードの断片という意味のがしっくりくるかもしれません。

よく使うコードをあらかじめ保存して簡単に呼び出せるようにしておくことで、コーディング時の速度を抜群に早めることができます。

テキストエディタである「Visual Studio code(VS code)」でもスニペット機能が常備されています。

VS codeのスニペット機能はVS code内にJSONファイルをとしてスニペットデータを格納しておくことで予測変換にコードを出現させることができます。

では実際に登録方法を解説していきます。

VS codeのスニペット登録方法

登録方法はまずVS codeの1番左下の「歯車マーク」をクリックします。

するとこのような項目が出てくるのでその中の「ユーザースニペット」をクリックします。

スニペットファイルの選択画面に切り替わるのでそこからスニペットを登録したい言語のファイルを選択もしくは作成します。下にスクロールすればいろいろな言語が出てくるのでHTMLやCSS、javascriptなどを探し、クリックします。

クリックすると「言語名.json」というファイルが開き、英語で色々と書かれた画面に切り替わります。

この「言語名.json」というファイルにスニペットを登録(記述)していきます。

別のルート

macであれば上のメニュータブの「code」→「基本設定」→「ユーザースニペット」でもアクセス可能です。

JSONファイルとは

VS codeのスニペットはJSONというファイル形式のテキストファイルに記述していきます。JSONファイルとはjavascriptのオブジェクト形式を使用したテキストファイルのことです。

ファイルの構造は連想配列(オブジェクト)で格納していきます。連想配列とは配列のキー値に文字列を使用できる配列のことです。

連想配列

{"キー値":"データ"}

スニペットも基本的にこの形式でデータを格納していきます。

JSONファイルのより細かいルールや使い方はこちらをご覧ください。

スニペットの構文

JSONファイルの中に記述するスニペットのフォーマットは以下の通りです。

{
  "スニペット名": {
    "prefix": "接頭辞",
    "body": [
      "コード",
      "コード",
      "コード"
      ],
      "description": "スニペットの説明"
  }
}

この日本語の部分のところを変えていくことでスニペットを登録することができます。

スニペット名

スニペット名はスニペットの名前です。作成したスニペットに名前をつけることができます。名前は特に参照することもないのでスニペットJSONファイルを開いた時にどのようなスニペットか分かるような名前にしておきましょう。

接頭辞

接頭辞の部分に省略した単語を記述します。ここに記述した単語を入力するとスニペットを呼び出すことができます。なるべく短めにしておくと記述も少なくなり、速度向上につながります。とはいえどのようなスニペットか関連のある文字にしておくと良いです。

コード

コード部分に接頭辞を打ち込んだ後に展開したいコードを記述していきます。
1行ごとに「,(コンマ)」で区切り、1番最後のコードは「,(コンマ)」をつけないことに注意してください。

スニペットの説明

スニペットの説明部分に説明を記述することができます。長くなっても良いので後から見たときに内容が分かる説明文を記述しておくことをおすすめします。

スニペットの記述例

例えばよく使うHTMLのtable要素をスニペットにするとこのような感じになります。

html.json
{
  "tableformat": {
        "prefix": "table",
        "body": [
            "<table>",
            "   <tr>",
            "    <th></th>",
            "    <th></th>",
            "   </tr>",
            "   <tr>",
            "    <td></td>",
            "    <td></td>",
            "   </tr>",
            "</table>"
        ],
        "description": "テーブルフォーマット"
  }
}

あとはHTML記述中に接頭辞であるtableと打つだけで一発でコード部分のように変換することができます。

スニペット変換後

<table>
   <tr>
    <th></th>
    <th></th>
   </tr>
   <tr>
    <td></td>
    <td></td>
   </tr>
</table>

コード部分に記述したスペースも反映してくれるのでインデント(字下げ)したい場合は適切な空白を入れ込んでおきましょう。

スニペットを記述する時の注意点

スニペットを記述するときはJSONのルールや記法に注意しなければなりません。

スニペット登録の注意点

JSONファイルの大枠は{}で囲む
コードの囲みにシングルクォーテーションは使えない
コード内にダブルクォーテーションを記述するときはエスケープする
複数のスニペットを記述するときは「,(コンマ)」で区切る

JSONファイルの大枠は{}で囲む

まずスニペットを登録するJSONファイルの大枠は{}で囲みます。JSONファイルは連想配列(オブジェクト)なので{}の中に記載していくのがルールとなります。

コードの囲みにシングルクォーテーションは使えない

コードを囲む文字に「''(シングルシングルクォーテーション)」は使えません。

囲み文字は「""(ダブルクォーテーション)」しか使えないので注意が必要です。

エスケープシーケンスを使用する

コード内にダブルクォーテーションを記述するときはエスケープする

囲み文字に「""(ダブルクォーテーション)」を使っているのでコードの中に使うときには注意が必要です。例えばHTMLのclass属性を指定するときは「""(ダブルクォーテーション)」を使います。

"<div class="wrapper"></div>"

これをこのままコードに入れてしまうと崩れてしまうのでエスケープシーケンスを使用して特殊文字を組み込むことができます。

"<div class=\"wrapper\"></div>"

エスケープシーケンスとはダブルクォーテーションなどを文字列として表す方法の1つです。

バックスラッシュ(ブラウザによっては￥マーク)を文字の前に入れることで特殊文字ではなく普通の文字列として認識させることができます。

よく使うエスケープシーケンス

エスケープシーケンス	意味
\n	改行(ラインフィード)
\r	復帰(キャリッジリターン)
\t	タブ
\$	ドル記号
\\	バックスラッシュ
\"	二重引用符(ダブルクォーテーション)

展開するコードの中に特殊文字を含ませたい場合は変換するのを忘れないようにしましょう！

"" ⇨  \"\"

複数のスニペットの登録方法

複数のスニペットを記述するときは「,(コンマ)」で区切る

スニペットファイルの中に複数のスニペットを登録することもできます。

複数記述する場合は、スニペット終わりに「,(コンマ)」を入れて次のスニペットを記述していきます。

html.json
{
  "1つ目のスニペット名": {
    "prefix": "接頭辞",
    "body": [
      "コード",
      "コード",
      "コード"
      ],
      "description": "スニペットの説明"
  }, ⇦ここにコンマを入れる
  "2つ目のスニペット名": {
    "prefix": "接頭辞",
    "body": [
      "コード",
      "コード",
      "コード"
      ],
      "description": "スニペットの説明"
  }
}

複数登録するときは接頭辞が被らないように注意しましょう。

まだまだ勉強中ですので間違っている点や至らぬ点がありましたら教えていただけると助かります。

ご覧いただきありがとうございました。

Web制作