【コピペ可】VSCodeでよく使うコードをスニペットとして登録する方法

今回は、「VSCodeでよく使うコードをスニペットとして登録する方法」について解説します。

スニペットとは、コードの入力補完機能のことです。

普段よく使うコードをスニペットとして登録しておくことで、コーディングの効率化を図ることができます。

ある程度コーディングに慣れてきて、これからコーディング速度を上げていきたいコーダーの方は是非導入してみてください。

VSCodeでスニペットを登録する方法

それでは、VSCodeでスニペットを登録する方法について見ていきましょう。

①VSCodeをインストールする

もしVSCodeをインストールしていない場合は、VSCodeのサイトからエディタをインストールしましょう。

Windowsなら「VSCode インストール Windows」、Macなら「VSCode インストール Mac」で調べたらインストール方法が出てくるので、是非参考にしてください。

②スニペットを登録する方法

VSCodeがインストール出来たら、次にスニペットを登録していきましょう。

まずはVSCodeを開いた状態で、「Code(WindowはFile)>基本設定>ユーザースニペット」をクリックします。

ファイルを選択することが出来る画面に遷移したら、HTMLのスニペットなら「html.json」、生のCSSなら「css.json」、Scssなら「scss.json」のファイルを選択してください。

今回は例として、html.jsonでスニペットを登録してみます。

html.jsonのメニューをクリックするとhtml.jsonファイルが開くので、後はスニペットのコードを追加したらOKです。

スニペットコードは、VSCodeスニペット用コード作成ツールを使うと便利です。

例えば、iと打ったら以下のコードが表示されるようにスニペットを登録してみます。

 

VSCodeスニペット用コード作成ツールにログインします。

Prefixの箇所には、スニペットに登録したコードを呼び出す際に入力するテキストを入力します。

そして直下のフォームには、テキストを入力したら展開されるコードを入力します。

コードが記入できたら、「スニペットを作成」のボタンを入力し、「クリップボードにコピー」でコードをコピーしましょう。

コピーしたコードを先ほど開いたhtml.jsonに貼り付けます。

これでスニペットの登録は完了です。

試しにHTMLファイル上で「i」と入力してエンターキーを押してみましょう。

先ほどスニペットとして登録したimgコードが表示されたらスニペット登録は完了です。

登録しているスニペット(HTML)

私が仕事で頻繁に使うHTMLスニペットをまとめました。

気に入ったコードがあれば、html.jsonに貼り付けてみてください。

imgタグ

▼スニペット

▼展開後のコード

pictureタグ(ブラウザ幅によって画像を切り替える)

▼スニペット

展開後のコード

aタグの外部リンク

▼スニペット

展開後のコード

ulとliを使ったリスト

▼スニペット

展開後のコード

tableリスト

▼スニペット

展開後のコード

CSS(Scss)

CSSとScssのスニペットです。

どちらにも適応させたい場合は、css.jsonとscss.jsonのそれぞれ書き込む必要があるので注意してください。

Scssが使えない時のメディアクエリ

▼スニペット

展開後のコード

背景画像

▼スニペット

展開後のコード

まとめ

以上が、VSCodeでよく使うコードをスニペットとして登録する方法」でした。

コーディング速度を上げていきましょう。

この記事を書いた人
Yujiro WEBコーダー

大阪のWEB制作会社で働くコーダー。コーディングにハマり、気づいたらWEB制作を仕事にしていました。現在は新規のWEBサイト制作やWordPressカスタマイズしたり、当技術ブログを運営しています。

関連記事