時短コーディング！Visual Studio Codeのスニペット機能のご紹介

この記事は公開から1年以上経過しています。

先日、鹿と並走しました。HANAです。
山道をドライブしていたのですが、鹿と並走しました。はい。

今回は、普段使っているVisual Studio Codeのスニペットについてご紹介します！

スニペットとはコードをあらかじめ用意する機能といったイメージでしょうか？
『そんなの使わなくてもコード打ったほうが早いでしょ～』という方、まぁそう言わずに、ちょっと覗いていってください。

・入力の時短になる。
・入力ミスが減る。
・わざわざコードやタグを思い出さなくてもいい笑

などなどメリットがあります。
では早速見ていきましょう(*‘∀‘)！
(※本編はWindowsを使用し、HTMLのスニペットを作成します)
 

スニペットの作成

では、Visual Studio Codを開いて左下＜赤枠＞の歯車をクリックします。

ユーザースニペットの構成をクリックします。

検索窓が出てくるので【html】と入力してhtml.jsonをクリックします。

下のような画面が表示されます。＜赤枠＞で囲ってある部分がスニペットを記述するためのひな型です。

最初はコメントアウトされているので、コメントアウトを解除すると下図のようになります。(拡張機能によっては色が異なります)
ひな型を取っておきたいという方はコピー＆ペーストをしましょう。

ひな形は下図のような考え方で記述します。
①作成するスニペットの名前を記述します。
②スニペットを出すための文字列を記述します。
③ここにコードを記述していきます。
④このスニペットの説明を記述します。(省略可)

実際に記述すると下図のようになります。

最初から黄色い波括弧が記述されているので、その中に、先ほどの説明のように記述します。
(下図は見やすいようにコメントアウトを削除しています。)

＜body＞内のコードは、一行ごとにダブルクォーテーションで囲み、最後にカンマをつけます。
すべて記述出来たら保存します。

注意点は、ダブルクォーテーションやカンマなどが抜けていても気づきにくいことです。
うまく動作しないときはなにか抜けていないかチェックしてください。

htmlファイルを開きます。"短縮文字" は【na】としたので、そちらを入力するとスニペットが出ました。

選択すると登録したタグがちゃんと出ました。

VScodeの機能で【Shift + Alt + F】を押すと自動でインデントがつきます。

最初からインデントつけときたい！！という方、もちろん大丈夫です！
ついでに、他の使えそうなものも説明しますね。(下図参照)

①ダブルクォーテーションの中にダブルクォーテーションがあるとうまく認識されません。例えばclass名をスニペットで登録したいときは、ダブルクォーテーションの前に半角のバックスラッシュ【\】を記述します。そうするとダブルクォーテーションがエスケープされ文字列と認識されます。

②スニペットが出た段階で、任意のカーソル位置にしたいときは【$1】を使用します。
例えば＜li＞＜/li＞の間にカーソルが来てほしいときは＜li＞$1＜/li＞と記述します。

③最初からインデントを空けたいときは半角でバックスラッシュ【\t】を記述します。
記述した分だけインデントが入ります。記述位置はダブルクォーテーションの内側です。

(※フォントによって半角のバックスラッシュか、半角の\マークになりますが機能としては同じです)

以上の記述を追加すると最初から下図のように表示されます。
①ダブルクォーテーションがある。
②＜li＞＜/li＞の間からカーソルが始まっている。
③インデントが空いている。

 

余談

さらにスニペットを追加しようとしたとき下図の＜赤枠＞ようにエラーが出ます。

『は～～ん、なるほど。黄色の波括弧を追加したらええんやな？』と思い、括弧を追加してみてもうまくいかず。。。

『まさかカンマか？？』と考え＜赤枠＞のようにカンマを追加してみます。

上手くいきました。

このカンマになかなか気づかなかったのには理由がありまして、、、、
最初のひな型にカンマ入ってないんですよ！！

ないんだからいけると思うじゃないですか！！
思いますよね？思いません？思いますよね？
ちゃんと調べろよって？まぁ解決したからいいんですよ(*‘∀‘)！

あ、【css】の場合はこっちに記述してください。やり方は一緒です。

 

まとめ

今回はVisual Studio Codeのスニペットについてでした。
最初、登録していくのは面倒な作業かもしれませんが、後々とても楽になると思います。

最近色々と忘れっぽくて、友人に『ニワトリやん』と言われてしまう僕がお勧めする使い方は、普段使わないような、思い出すのに時間のかかるコードを登録してしまうことですね。

つまり、よく使うものも、使わないものも、とりあえず登録しときましょ。いらなければ後から消せばOKです。
以上HANAがお届けしました！
 

• 前の記事へ

  「優良WEB」にて『松阪市の優良ホームページ制作会社』として掲載されました

• 次の記事へ

  初心者向け！電子決済サービス Apple Pay（アップルペイ）の使い方