どうも、HTML手打ちというとマジで<h1></h1>って1文字ずつ打ってるって思ってた民です。笑ってくれ。自戒のために、エディタVSCodeでHTMLとCSSをいじったとき超便利だった機能を紹介します。
Emmetとprettierを知ってたらこの記事は読まなくていいです。
VSCodeじゃないエディタでHTMLとCSSを弄ってる人がいたらVSCode、オススメです。日本語化もできます 。無料かつ時間の効率化を図れるので逆にプラスになると思う。何よりたのしい。
VSCode、拡張機能があるそうな
VSCodeってなんかwordpressのプラグインとかchromeの拡張機能と同じように、拡張機能があるらしく。どんどん便利にできるっぽいです。
おまえ、入力内容に色つけてくれるだけじゃなかったんか――
入力補佐―Emmet
Emmetは便利すぎるのでVSCodeにもとから入ってる機能です。
h1って打つ→returnキーかtabキーで<h1></h1>が一発入ってくれます。詳しいショートカットは以下。
正直「【基本形】要素 + Return or Tab」だけでもだいぶ助かるんだが…という感じです。”<”から打ってたから予測変換に出てくれなかったんですね。泣いた。
他にもCSSでは「h100」で「height: 100px;」になったりします。
自動整形―prettier
prettierは上書き保存するたびに自動的にコードを整形してくれる拡張機能です。ただの神。詳しいインストール方法は以下。
念のため拡張機能を設定できる場所を書いておくと、左端にエクスプローラー、検索、…、拡張機能って感じでボタンがあるかと思います。よくわかんなかったらググってください。
本職の方は気に食わねえ整形だと思う人もいるらしい。でも素人なのでふつうにありがたい。凹んだけど修正面倒だしいいやみたいなやり方やってる筆者みたいな人ならオススメ。
すごく感動する。
追記―その他の拡張機能
ノートアプリにしたりメモアプリにしたりTodoリスト作ったり猫を飼えるらしいぞ！！（エディターの中で）
VSCode、さすがエディタという感じで恐ろしく軽いので色々使ってみても楽しいかもしれません。猫を飼おうか検討しています。
