VS Codeでemmet、スニペット登録してコーディングを効率的にする

こんにちは、mokoichiです。

悩んでる人

VS Code(Visual Studio Code)を使って、プログラミング、コーディングを学習し始めると、短いキーでコードが選択できるから、便利だな。他にも、便利な使い方、登録の方法を知りたいな。

ライブコーディングを見ていると、短いキーで、素早くコードが呼び出されて、コーディングが効率的に、素早く仕上がるのを目にすることがあります。

本記事では、VS Codeで短いキーを入力して、効率的にコーディングできる機能、[Emmet]や[スニペット]などの使い方や、登録方法を初心者の方向けにお答えしたいと思います。

動作環境
・Mac Os
・ブラウザ：Google Chrome
・テキストエディタ：Visual Studio Code

⭐️Emmet機能の使い方
1. emmetって何？
2. emmetの使い方、よく使う機能
⭐️スニペットの使い方
⭐️まとめ

⭐️Emmet機能の使い方

◉VS Code(Visual Studio Code)のemmetという拡張機能は、初期の段階で使えるようになっています。

emmetって何？

Vs Code(Visual Studio Code)というエディタを使って、コードを入力する際（コーディング)、短いキーを入力するだけで、HTMLのタグやCSSのプロパティーなどを自動生成して選択できる機能があります。これがemmet機能です。

例えば<div>というタグを入力する際、1つ1つ記号やアルファベットを入力していると時間がかかります。これを、短いキーで簡単に入力できます。

emmetの使い方、よく使う機能

divタグを入力する際、最初のdiと入力すると、diに付随したタグ(dirとdiv)が選択できるようになります。

divを選んでクリックするか、↓でdivを選んでENTERすると<div></div>入力してくれます。

Vs Code(Visual Studio Code)では、コーディングを行う際に効率的に入力できる機能が設定されていて、これをどううまく使うかで、コーディンのスピードがアップします。

よく使うemmet機能をあげてみます。

<HTML編>

⚫️『！』エスクラメーションマークでHTMLの雛形を作成/

『！』を入力して、！選択してENTER(もしくはクリック）でHTMLの雛形が一瞬で入力
できます。

HTMLのlang属性がデフォルトではenになっているので、ja(日本語)に変更します。

左下の歯車をクリックして、設定をクリックします。

検索窓が出るので、emmet.vという入力します。

langのところをenからjaに変更すると、デフォルトでjaになります。

その他

入れ子構造で繰り返し表示　ul>li*5で下記表示が瞬時にできます。

他にも、dl>dt*3>dで下記表示となります。

<CSS編>
⚫️CSSでもemmet機能を使う。

CSSでもemmet機能を使えます。例えば、よく使う、marginやpaddingでも色々選択できる　ようになるので、とても便利です。

CSSも短いキーで選択画面が出てきますので、うまく有効的に使用すると、コーディングスピードが早くなります。

emmet機能は、Vs Code(Visual Studio Code)で最初から導入されていて、とても便利な機能なので、上手い使い方でコーディングの幅が広がるかと思います。（新しい使い方があったら、アップしていきます）

GTRacing(ジーティーレーシング) ゲーミングチェアスピーカー付きオットマンゲーミングスピーカー付きサラウンド効果オフィスチェアフットレストデスクチェアゲーム用チェアリクライニングパソコンチェアハイバックヘッドレストランバーサポートひじ掛け付き PUレザー PC/PS4/PS5/XBOX/SWITCH等対応(専用USBアダプタ使用) GT890MF-RED

GTRACING ゲーミングチェアスピーカー付きオットマン付きサラウンド効果オフィスチェアフットレストデスクチェアゲーム用チェアリクライニングパソコンチェアハイバックヘッドレストランバーサポートひじ掛け付き PUレReadMore...

⭐️スニペットの使い方

スニペットって何？

スニペットとは、簡単にいうと、よく使用するコードなどを短いキーワードで呼び出せる機能です。

（調べると下記のような説明です）
スニペットとは、コーディングを行うときに、コードの書き換えを繰り返さなくても簡単なキーワードで再利用可能なコード片を呼びさせるようにする機能です。スニペットには、ループ、条件分岐、オブジェクト、変数などコードから、HTML、CSS、Javascriptなどのマークアップ言語まで、さまざまな種類があり、スニペットの利用によりコードを簡単に再利用し、コーディングの時間を短縮でき、品質を向上させることができます。

スニペットの登録方法

今回はMac bookでの登録方法を説明します。

Vs Code(Visual Studio Code)を開いて、Code⇨基本設定⇨ユーザースニペット構成をクリックします。（表示が日本語設定になっていない場合は、Code⇨Preferences⇨User Snippetsをクリックします。）

スニペットを登録するファイルが開きます。HTML、CSS、PHP用などのファイルが元々作成されています。自分でファイルを作成して、そこに登録しても良いです。今回は、html.json(HTML))に登録します。

html.jsonを開くと下記のように表示されます。コメントアウトで、説明文とサンプルのスニペットは表示されますが、消してもいいですし、そのままでもよろしいです。スニペットの登録は、基本{ }(黄色)内に記述していきます。

⚫️スニペットを登録するときの基本構造です。

“スニペット名”: {
“prefix”: “短縮語”,
“body”: [
“展開するコード”,
“展開するコード”,
“展開するコード”
],
“description”: “スニペットの説明”
}

下記のサンプルコード（CSS.json)を例に説明します。
要素を中央寄せにするCSSのコードになります。

”スニペット名”　⇨　”center”　 ” ” ダブルクォーテーションの中にスニペット名を入力します。短縮語（短いキーワード）を入力したとき表示されます。

“prefix”: “短縮語”,　⇨　”c”　” ” ダブルクォーテーションの中に短縮語（短いキーワード）を入力します。cと入力すると cに関するスニペットが選択できるようになります。

“body”: [　　　　　　　　　　
“bottom: 0;”,
“left: 0;”,
“margin: auto;”,
“position: absolute;”,
“right: 0;”,
“top: 0;”,
],　
[””]　[]角かっこ、” “ダブルクォーテーションの中に展開するコードを入力します。, カンマで改行
されます。

“description”: “”　⇨　””　ダブルクォーテーションの中にスニペットの説明を入力します。
（これはあってもなくてもいいです)

CSS記述において、例えば、Pというセレクタにcというスニペットで呼び出すと下記のようになります。

スニペットの登録ツール

スニペットを作成して登録する便利なツールがあるので、下記にご紹介します。

VSCodeスニペット用コード作成ツール

Visual Studio Codeのコードスニペットのコピペ用のコードを作成するツールです。ボタン一つでフォーマットに合わせた変換を行い、$マークなどのエスケープ処理も行います。

⭐️まとめ

スニペットの登録は、初心者の方にとっては慣れないので、登録したつもりでも、登録されていない、呼び出せないなどの問題が発生したりすることがあります。実際、私も、登録したけど登録されてなかったり、呼びだせないなどで、悩んだことがありました。
初心者は、基本構造に慣れていないため、スニペットを作成する際、『 } 』波カッコが１つ多かったり、『 , 』カンマが足りなかったりで、登録できないことがあるので、慣れて注意して作成してみてください。
自分で使いやすいスニペットを登録して、コーディングをよりよく効率的に行っていってください。

今回は以上となります。ありがとうございました。