Visual Studio Code(略してVSCode)に標準搭載されている便利機能
「Emmet」と「htmlフォーマッター」についてのメモです。
それぞれ、
- できること
- 設定方法
をまとめました。
Emmetとは
Emmetとは、入力の手間を大幅に削減してくれる機能です。
コードを1から全部記述しなくてもよくなるので、コーディングが驚くほど効率的になリます。
学習を始めたばかりの初学者は、いざコードを書き始めようとしても出だしからつまづいてしまうことがよくあります。
![猫雄](https://u-room.org/wp-content/uploads/2021/04/猫雄@中小企業勤務のおっさん.png)
え~っと、え~っと、最初は<!DOC…………………
![猫雄](https://u-room.org/wp-content/uploads/2021/04/猫雄@中小企業勤務のおっさん.png)
あれ?なんだったっけ?
Emmetを使えば、「!」を入力して「Tab」を押すと、一瞬でhtmlの基本構造が作れます。
![猫雄](https://u-room.org/wp-content/uploads/2021/04/猫雄@中小企業勤務のおっさん.png)
すごい!便利~!!
コーディング時間の短縮だけでなく記述誤りも少なくなるので、初心者コーダーにはありがたい機能ですね。
VSCodeエディタでのEmmet設定方法
VSCodeでEmmetを使う設定方法は簡単!
VSCode左下の歯車アイコンをクリック→「設定」をクリックします。
検索窓に「Emmet」と入力したら、「Emmet:Trigger Expansion On Tab」にチェックを入れます。
一旦VSCodeを閉じて、もう一度立ち上げると設定が反映されます。
htmlのフォーマッターとは
htmlのフォーマッターは、htmlのコードを整形してくれるツールです。
こちらもVSCodeには標準搭載されています。
![猫雄](https://u-room.org/wp-content/uploads/2021/04/猫雄@中小企業勤務のおっさん.png)
VSCodeすげえな。
コーディング初学者は色々なサイトのソースコードを確認すると思います。
なかには、サイトの高速化のためにあえて改行とインデントを除いてあるソースコードを発見することがあるかもしれません。
例えばこんなコードとか
↓
![](https://u-room.org/wp-content/uploads/2022/07/810a5c0382b4dc04202c820d31ccc323.png)
改行もインデントも全くない極端な例ですが、こんなコードでもhtmlフォーマッターを使えば一瞬で改行やインデントを入れた状態にコードを整形してくれます!
百聞は一見に如かずなので、動画でご確認ください!
![猫雄](https://u-room.org/wp-content/uploads/2021/04/猫雄@中小企業勤務のおっさん.png)
めちゃくちゃ便利だね!
VSCodeエディタでのhtmlフォーマッター設定方法
VSCode左下の歯車アイコンをクリック→「設定」をクリックします。
①検索窓に、html.formatと入力。
②「HTML>Format:Enable」にチェック。
③「HTML>Format:Indent Inner HTML」にチェック。
これで設定が完了です!
最後に
便利な機能を取り入れたら、あとはガシガシコードを書いて使いこなしていきたいです。
![猫雄](https://u-room.org/wp-content/uploads/2021/04/猫雄@中小企業勤務のおっさん.png)
コーディングの作業効率を爆上げしていきませう!
サイトの高速化に関するコスメティック田中さんの動画↓↓↓おもろいだけでなく大変勉強になります。