コーディングが爆速になる「VS Code」と「Emmet記法」

Progateはサービス内でコーディングが出来たので特に考えなかったけれど、実際に自分でサイトを作っていくとなると「コーディング専用エディター」を用意するのが普通らしい。ということで、有名なエディターである「VS Code」を導入してみた。
vscode.jpg

コードに色付けがされていたり、インデントがされていたりして、とても見やすい。そして何と言っても便利なのが、Emmet記法と呼ばれる記述方法。

Emmet記法の一例は以下。
**********
.home-content>h2.page-title.wrapper+p+a.button
**********
と入力すると
**********
      <div class=”home-content”>
        <h2 class=”page-title wrapper”></h2>
        <p></p>
        <a href=”” class=”button”></a>
      </div>
**********
と変換されます。まじかー!!変換された後はデータを入力していくだけ。変換方法は少しコツがあるのですが、ドットインストールで勉強させてもらった。
https://dotinstall.com/lessons/basic_emmet_v3
VS Codeには、入力しているデータがリアルタイムにブラウザで確認できる「LiveServer」という拡張機能もあるので、表示を確認しながらコーディングが出来る。
VS Codeのタグ補完機能とLiveServer拡張、それにEmmet記法を組み合わせると、本当にコーディングにかかる時間が半分とかになりそう。
効率化できるところはしていきたいね!

コメントを残す

メールアドレスが公開されることはありません。 が付いている欄は必須項目です