Web制作

VSCodeで自作したスニペットを登録する方法【作業効率アップにおすすめ!】

VSCodeでスニペットを自作したいけどどうやるの?

まずスニペットとは何かというと『短いキーで長いコードや良く使うコードを表示させることが出来るもの』です。

自分が良く使うコードを登録しておけば、最短1つのキーだけで長いコードを表示させることが出来るので、コピペより早くコードが書けるようになります。

今回はそのスニペットを自作する方法について書いていきます。

今だけ!5大無料特典あり🎁

コーディングの時給アップにはこちら!


VSCodeで自作したスニペットを登録する方法

VSCodeでスニペットを自作する方法ですが、特にプラグインをインストールしたり何かをダウンロードする必要はありません。

全てVSCode上で完結し、拡張子ごとに設定していきます。

 

スニペットを登録したい拡張子のjsonファイルを作成

まずWindowsの場合はVSCode画面左上の『ファイル → ユーザー設定 → ユーザースニペット』を選択します。

Windows:VSCode画面左上のファイル→ユーザー設定→ユーザースニペット

Windows:VSCode画面左上のファイル→ユーザー設定→ユーザースニペット

Macの場合はVSCode画面左上の『Code → 基本設定 → ユーザースニペット』を選択します。

Mac:VSCode画面左上のCode → 基本設定 → ユーザースニペット

Mac:VSCode画面左上のCode → 基本設定 → ユーザースニペット

すると次の画像が表示されます。

VSCode:スニペットファイルの選択もしくはスニペットの作成

VSCode:スニペットファイルの選択もしくはスニペットの作成

検索画面のようですが、書いてある通りファイルの選択か作成となります。

ここでは『css.json、html.json、scss.json』と3つ表示されていますが、これは私が検索した事がある物が表示されているだけで、初めての人は何も表示されません。

そしてここで『css、html、scss』など入力すると、スニペットを登録する前に即座にファイルが生成されます(特に知る必要はない情報ですが一応)

VSCode:jsonファイル生成

VSCode:jsonファイル生成

そして登録したい拡張子を検索すると以下のような画面が表示されます(下の画像はscssです)

VSCode:scss.jsonファイル

VSCode:scss.jsonファイル

何やらコメントアウトされていますが、これを参考にしてスニペットを自作していきます。

 

スニペットを自作する

自作する方法は次のようになります(先ほどのコメントアウトは消してあります)

{
  "スニペットの名前": {
    "prefix": "入力するキー",
    "body": [
        "出力したいコード1行目",
        "出力したいコード2行目",
    ],
    "description": "スニペットの説明"
  }
}

例えば上下左右中央にする時に使う以下のコードを登録してみます。

{
  "center": {
    "prefix": "c",
    "body": [
       "bottom: 0;",
       "left: 0;",
       "margin: auto;",
       "position: absolute;",
       "right: 0;",
       "top: 0;",
    ],
    "description": "上下左右中央"
  }
}

これは『c』と入力するだけで以下のコードが表示されるというスニペットになります。

スニペットの名前と説明は自分が分かるように書けばOKです。また書かなくても大丈夫です。

bottom: 0;
left: 0;
margin: auto;
position: absolute;
right: 0;
top: 0;

通常『c』とだけ打つと以下の候補が表示されます(Emmetの機能です)

VSCodeで『c』と入力(スニペット登録前)

VSCodeで『c』と入力(スニペット登録前)

そしてスニペットを登録した後は次のようになります。

VSCodeで『c』と入力(スニペット登録後)

VSCodeで『c』と入力(スニペット登録後)

先ほどは無かった『c』という項目が先頭にありますね。

これをそのままEnterを押すと・・・

VSCodeで『c』と入力しenter(スニペット登録後)

VSCodeで『c』と入力しenter(スニペット登録後)

このようになります!

『c』とたった1文字打つだけでズラッと表示されました。

実際の動きはこんな感じになります。

VSCodeで『c』と入力しenterの動き(スニペット登録後)

VSCodeで『c』と入力しenterの動き(スニペット登録後)

 

VSCodeでスニペットを自作する時の注意点

スニペットを自作する時の注意点を2つご紹介します。

 

スニペットを2つ以上作る時

先ほどは1つしか登録しませんでしたが、複数登録する場合は以下のようにします。

{
  "スニペット1の名前": {
    "prefix": "入力するキー",
    "body": [
        "出力したいコード1行目",
        "出力したいコード2行目",
    ],
    "description": "スニペット1の説明"
  }, // ここのカンマを忘れない!
  "スニペット2の名前": {
    "prefix": "入力するキー",
    "body": [
        "出力したいコード1行目",
        "出力したいコード2行目",
    ],
    "description": "スニペット2の説明"
  }
}

コメントアウトで書きましたが、スニペットとスニペットの間にカンマを忘れないようにしましょう。

 

ダブルクォーテーションに注意

例えばHTMLで『i』とだけ入力したら<img src="" alt="">が表示されるようにしたいと思い、以下のように登録します。

{
  "img": {
    "prefix": "i",
    "body": [
      "<img src="" alt="">",
    ],
    "description": ""
  }
}

そしてHTMLで『i』と入力するとこうなります。

<img src= alt=>

" "(ダブルクォーテーション)が無くなってしまいました。。。

これはスニペットを書くところが " " で囲まれている為で、これを解決するには ' '(シングルクォーテーション)にすればOKです。

つまりこうなります。

{
  "img": {
    "prefix": "i",
    "body": [
      "<img src='' alt=''>",
    ],
    "description": ""
  }
}

これでHTMLで『i』と入力するとこうなります。

<img src='' alt=''>

ただしHTMLで通常ダブルクォーテーションが表示されるように設定されていれば、保存をすれば自動でダブルクォーテーションに変わります。

以上になります。

VSCodeはプラグインを入れたりスニペットを自作する事により、どんどん使いやすくなります。

特にスニペットは自分に合わせてカスタマイズ出来るから便利ですね。

 

コーディングの時給と作業効率を上げる!
2年間の実務で実際に使ったコードをまとめた『コーディング&WordPressメモまとめ集』をBrainで公開しています。
  • コピペで使えるWordPressの各テンプレート
  • 実務でよく使う見出し一覧
  • 実務でよく使うテキストのhoverアニメーション
  • 実務でよく使うボタン内の矢印9種類
  • Contact Form 7の色々・・・
などなど、他にもコピペで使えるコードがたくさん載せてあるので、時短=時給アップに繋がります。
さらに『コードのまとめ方が参考になった』というレビューも多数頂いているので、これを元に自分なりの"メモまとめ集"を作るという使い方も出来ます。
レビューは390件以上あるので、気になる方は以下のボタンからチェックしてみて下さい👇

今だけ!5大無料特典あり🎁

販売ページとレビューを見てみる


ブログランキング・にほんブログ村へ
  • この記事を書いた人

じゅんぺい

タイ・バンコク在住のWeb制作フリーランス兼ブロガー▶︎37歳からWeb制作を開始▶︎コーディングとWordPressのオリジナルテーマ制作でこれまで80件以上納品▶︎Web制作中心の当ブログは月間最高8.4万PV▶︎Twitterのフォロワーは6100人▶︎コーディングとWordPressのコンテンツを販売し、3日で500部突破&250万円&人気1位獲得 → 累計700部&420万円突破

-Web制作
-