【HTML】VSCode+Emmetで爆速でHTML,CSSを書こう！！
今回の内容
VSCodeで標準で使うことができるEmmetというプラグインの機能を使ってHTMLを楽に早く書いてみようってものです。知っている方も多いと思いますが個人的に感動したので記事にしようと思います。
VSCodeとは
正式名称Visusl Studio CodeというMicrosoftが開発している無料のエディタです。
クロスプラットフォームである、拡張機能が多数存在するなど詳述はしませんがたくさんの特徴があります。Git機能もあるのでこれだけでコミット、プッシュも行うことができます。
Visual Studio Code - Code Editing. Redefined からダウンロードすることができます。
Emmetとは
EmmetとはHTMLやCSSを効率的に省略して書くためのプラグインです。
記法に則り記述すると本来のHTMLやCSSに展開してくれるとても便利なものです。
使用するための設定
Emmet2.0からTabキーでの展開がデフォルトではオフになっているのでONにします。
- 左下の歯車をクリックし、「設定」をクリック。
- 検索窓に「Emmet」などと入力し「"emmet.triggerExpansionOnTab"」を見つける。
- 左側の鉛筆のマークをクリックし、「true」を選択し、保存する。
これで、Tabキーで展開することができるようになりました。
この設定をしていなくても展開後が補完として表示されるのでそちらで十分な方は行わなくても大丈夫です。
実際に使ってみる！
ファイル→新規ファイルで空のファイルを作成し、右下のプレーンテキストをHTMLに変更してください。
「！」と打ってTabキーを押すと・・・！
たったの一文字がここまで補完され一瞬でひな形を作ることができました！！
その他にもul#hatena>li*5>aと書くと
このように補完してくれたり
など様々な省略記法がありコーディングがとても速くなります。
詳細
https://docs.emmet.io/cheat-sheet/ に公式のCheatSheetがあるので興味を持った方はこちらを見ながら覚えていくといいと思います。
