【VS CODE】Emmetを使って時短&ミスを減らす方法

コードのケアレスミスに悩むカメ

プログラミングのコードを書いてもなんか反映されないな〜と思って、見返してみたらタグがちゃんと閉じてなかったり、単純にケアレスミスなことが多いな〜
気がついたらあっという間に時間が過ぎてしまうこともよくあるな〜
そういう時は、Emmetという記法を使うとすぐにタグが出てくるから便利で間違えにくくなるよ〜
時短にもなるしコードを書くならよく使うのだけでも覚えおきたいね
VS CODEには元々Emmetが入っているからすぐに使うことができる〜

学び続けるウサギ

コードのケアレスミスに悩むカメ

そんな便利な機能があるんだね〜 Emmetを使って簡単なミスをなくしてサクサクと進めていきたな〜

コードを書いていくエディタのVS CODEには、元々Emmetが入っているのですぐに使うことができます。

それぞれの記号などを打ち込んでから、return(enter)やtabをクリックすると出てきます。

コードを打ち間違えて修正したりして、思ったよりも時間がかかってしまうこともありますよね。

Emmetを使うと楽々コードが出てきて、閉じタグも出てくるので間違えにくくなります。

それでは便利なEmmetを見ていきましょう。

VS CODEでコードを書くときに役に立つEmmet一覧

link:css

cssを読み込むタグを呼び出すことができます。こちらは、head内に記述します。ファイル名と同じCSSに変えます。

!

HTMLのテンプレートを呼び出すことができます。わざわざドックタイプ宣言から記述なくて良いのが楽ですよね。

言語が英語になっているので「en」を「ja」に変えます。

いらないmetaタグがある場合は削除します。

ul>li*3

ulタグの中にliタグを3つほど呼び出すことができます。*は×を意味するので数字を変えればその分が出てきます。

olタグでも同じようにリストを呼び出すことができます。

VS CODEでid名やclass名をつける時の時短法

〜#〜
例:div#one
 ↓
 <div id="one"></div>

〜.〜
例:div.section
 ↓
 <div class="section"></div>

例として、今回はdivで囲みます。oneの名前やクラス名は適した名前ならなんでも良いです。

ここまで説明してきましたが、id名やclass名をつけるだけで、VS CODEでは標準でdivに変換してくれるようになっているので、divで囲みたい時は、上記の例の通りの場合は、#oneか.sectionのみで反映されます。

文章をタグ内に入れる方法

{〜}
例:p{こんにちは}
↓
<p>こんにちは</p>

波カッコ{}を使うと文字がセットで表示されます。

タグと入力したい文字を一気に入力することができるので便利ですよね。

CSSファイルで時短に使えるEmmet

m

↓

margin: ;

マージンをいちいち書かなくて良いので楽ですね。

m10と書けばmargin: 10px;になります。

上下10px、左右20pxにしたい時は、m-10-20と書くと、margin: 10px 20px;になります。

p

↓

padding: ;

マージンと同様にパディングもよく使うので、アルファベット一文字で出てくれるのが楽ですね。

まとめ

VS CODEで役に立つEmmetについて記述してきました。

VS CODEを快適に使う方法については、【エディタ】VS CODEの快適な使い方【Microsoft】の記事を参考にしてみてください。

覚えておくと、時短になりケアレスミスも無くすことができるので徐々に覚えていきましょう。

コメントを残す

メールアドレスが公開されることはありません。