こんにちは。福岡のホームページ制作会社、シンス株式会社です。

Webサイトのコーディングする際に「VSCode（Visual Studio Code）」というエディターを使用している方も多いのではないでしょうか。

「VSCode」には自作のスニペットを登録することができる機能があります。詳細としては、登録したキーワードを打ち込むだけで一気に何行ものコードを一括で書くことができるという機能になります。この機能を使えば、普段のコーディング作業を何倍にも早くすることができますので、是非使って見てください！

今回はその、自作のスニペットをVSCodeに登録する方法を説明していきます。

スニペットを登録するとはどんな機能なのか？

コーディングにおける「スニペット」とは、繰り返し書く機会のあるコードを蓄えておくことを指します。

スニペットは日本語で「断片」「端切れ」というような意味の言葉らしいです。
繰り返し使うコードをスニペットとして登録しておくことで、コーディングをより効率的に短縮して行うことができるのです。

まずは今回紹介する機能を分かりやすいように画像で説明します。

ある単語を入力し「tab」キーを押します。すると…

このように何行ものコードを一度に呼び出すことができます。
コーディングする上でこの機能はとても便利ですよね。この機能を使うのと使わないのとでは何倍もスピードに差が出てきますので、意識的に使うようにしていきましょう。

自作したスニペットの登録する手順

続いては自作したスニペットを登録し、呼び出す方法について解説していきます。

スニペットを書く場所

VSCodeを開き、画面左上の「Code」→「基本設定」→「ユーザースニペット」を開きます。

スニペットファイルの選択画面が出てくるので、自作スニペットを登録したい拡張子を選択しましょう。

すると、このような画面が現れます。
この「〇〇.json」ファイルに自分で登録したいスニペットを記述していきます。
最初にコメントアウトされているコードは、スニペットの書き方を意味しています。
ただし英語表記で分かりにくい為、わかりやすく解説していきます。

スニペットの書き方

基本の書き方は下記の通りになります。

これで複数のスニペットが登録できますので、コピー＆ペーストで貼り付けてみて下さい。
この日本語で書かれた場所にコードを記述し、スニペットを登録することができます。

例えばこのように書いてみます。

簡単なものから少し行数の多いものまで書いてみました。これを保存します。

保存した拡張子と同じファイルを開き、先程書いた「”入力するコード”」の部分を入力します。
今回は「btn-arrow」の記述を呼び出してみます。

この状態でtabキーを押すと…

このように一気にコードを呼び出すことができました。

ちなみに上画像の「$1」「$2」「$3」と書いてある部分には、個別に入力したい数値を記入するためにわざと空欄にしておき、コードを書く際にtabキーで移動することができます。

スニペットを書く際の注意点

スニペットを書く際の注意点があります。
それは、ダブルクオーテーション「””」が使えないことです。
例えば「content:””;」という文字を呼び出したい時に、このまま書くと反映されません。

この場合はダブルクオーテーションの代わりにシングルクオーテーション「”」を使用する必要があります。

まとめ

いかがでしたか。

コーディング作業を行う上で頻出するコードをスニペットとして登録しておけば、かなり効率化することができます。

作業の時間短縮を極めるためにも、今回紹介した方法を是非使ってみて下さい。

私たち「シンス株式会社」は福岡でホームページ制作を行なっております。ご興味のある方は下記リンクから是非覗いてみて下さい。

https://since-inc.jp

ここまで読んで下さってありがとうございました！