【VSCode】1/8diary【楽に制作】

 おはろん。最近インプットが多くてちょっとした刺激であふれた生活してます。案外楽しいです、しらすです。

 今日も最後まで見てやってくださいね。

 今日は最近始めた、デイトラのこと。WebコーダーになるためのWeb制作コースに最近加入してビギナーとして体系的に学ぶことにしたのだ。

 その中で、Emmetについて紹介されており、そのすごさを共有したいのでここで話しておきたい。

 例えば、VSCodeにおいて、HTMLやCSSを書きたい。そうした時、以下のコードはほぼ毎回のように書く。

〇HTML
 ・<div class="name"></div>
 ・<ul>
    <li></li>
    <li></li>
    <li></li>
  </ul>
〇CSS
 ・background: #000;
 ・padding: 8px;
 ・border: 1px solid #000;


  これらをEmmetの機能(Tabを使ったショートカットのようなもの)を使えば、以下のように書いてTabを押すだけでよくなる。

〇HTML
 ・div.name
 ・ul>li*3
〇CSS
 ・bg#000
 ・p8
 ・bd

 これは、私にとっては衝撃的だった(特にborderをbdだけで済ませられるところとか)。文字を打つ時間、タイプミスするロスを考えると圧倒的作業時間の短縮になるのだ。

 試しに色々タイプしてみたところ、普通にHTMLやCSSで打つと2分半かかる分量を、Emmet機能を使えばマニュアルを見ながらでも1分半に短縮できる。これがもっと大量の文章を書くならば、どれだけ短縮できるか、想像に難くない。

 調べてみると、VSCodeには便利なプラグインが大量に存在するそうだ。色々これからも調べてみようと思う。

P.S

 今日は投稿遅れちゃいました。バイトで自分の時間が奪われています。やはり時間の切り売りはよくないかもしれないですね。

いつも最後までお読みいただきありがとうございます。少しのサポートがブログなどクリエイト活動の励みになります。