Visual Studio Code（略してVSCode）に標準搭載されている便利機能
「Emmet」と「htmlフォーマッター」についてのメモです。
それぞれ、
- できること
- 設定方法
をまとめました。
Emmetとは
Emmetとは、入力の手間を大幅に削減してくれる機能です。
コードを1から全部記述しなくてもよくなるので、コーディングが驚くほど効率的になリます。
学習を始めたばかりの初学者は、いざコードを書き始めようとしても出だしからつまづいてしまうことがよくあります。
え～っと、え～っと、最初は<!DOC…………………
あれ？なんだったっけ？
Emmetを使えば、「!」を入力して「Tab」を押すと、一瞬でhtmlの基本構造が作れます。
すごい！便利～！！
コーディング時間の短縮だけでなく記述誤りも少なくなるので、初心者コーダーにはありがたい機能ですね。
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」にチェック。
これで設定が完了です！
最後に
便利な機能を取り入れたら、あとはガシガシコードを書いて使いこなしていきたいです。
コーディングの作業効率を爆上げしていきませう！
サイトの高速化に関するコスメティック田中さんの動画↓↓↓おもろいだけでなく大変勉強になります。