初学者コーダーのマストアイテム「Emmet」&「htmlフォーマッター」設定メモ

HTML/CSS

Visual Studio Code(略してVSCode)に標準搭載されている便利機能
「Emmet」と「htmlフォーマッター」についてのメモです。

この二つの機能を知ったとき、コーディング初学者の私は目から鱗が落ちるほど感動しました!

それぞれ、

  • できること
  • 設定方法

をまとめました。

Emmetとは

Emmetとは、入力の手間を大幅に削減してくれる機能です。

コードを1から全部記述しなくてもよくなるので、コーディングが驚くほど効率的になリます。

学習を始めたばかりの初学者は、いざコードを書き始めようとしても出だしからつまづいてしまうことがよくあります。

ネジータ
ネジータ

え~っと、え~っと、最初は<!DOC…………………

ネジータ
ネジータ

あれ?なんだったっけ?

 

Emmetを使えば、「!」を入力して「Tab」を押すと、一瞬でhtmlの基本構造が作れます。

 

ネコヲ
ネコヲ

すごい!便利~!!

コーディング時間の短縮だけでなく記述誤りも少なくなるので、初心者コーダーにはありがたい機能ですね。

Emmetの記法のことをショートハンドといいます。

VSCodeエディタでのEmmet設定方法

VSCodeでEmmetを使う設定方法は簡単!

VSCode左下の歯車アイコンをクリック→「設定」をクリックします。

 

検索窓に「Emmet」と入力したら、「Emmet:Trigger Expansion On Tab」にチェックを入れます。

一旦VSCodeを閉じて、もう一度立ち上げると設定が反映されます。

htmlのフォーマッターとは

htmlのフォーマッターは、htmlのコードを整形してくれるツールです。

こちらもVSCodeには標準搭載されています。

ネコヲ
ネコヲ

VSCodeすげえな。

コーディング初学者は色々なサイトのソースコードを確認すると思います。

なかには、サイトの高速化のためにあえて改行とインデントを除いてあるソースコードを発見することがあるかもしれません。

例えばこんなコードとか

引用ソースコード:https://shitamachi.u-room.org/

改行もインデントも全くない極端な例ですが、こんなコードでもhtmlフォーマッターを使えば一瞬で改行やインデントを入れた状態にコードを整形してくれます!

百聞は一見に如かずなので、動画でご確認ください!

ネコヲ
ネコヲ

めちゃくちゃ便利だね!

VSCodeエディタでのhtmlフォーマッター設定方法

VSCode左下の歯車アイコンをクリック→「設定」をクリックします。

①検索窓に、html.formatと入力。
②「HTML>Format:Enable」にチェック。
③「HTML>Format:Indent Inner HTML」にチェック。

これで設定が完了です!

最後に

便利な機能を取り入れたら、あとはガシガシコードを書いて使いこなしていきたいです。

ネコヲ
ネコヲ

コーディングの作業効率を爆上げしていきませう!

サイトの高速化に関するコスメティック田中さんの動画↓↓↓おもろいだけでなく大変勉強になります。

 

タイトルとURLをコピーしました