HTML Web制作

【VSCode】HTMLで閉じタグの後ろにコメントアウトを自動挿入する方法

※ 当サイトではアフィリエイト広告を利用しています

VSCodeで閉じタグの後ろにコメントアウト書いているけど、1つ1つ書くの大変・・・

例えばこのようなコードがあったとします。

<section class="sample-section">
  <h2 class="sample-title">
    <div class="sample-inner">
      <div class="sample-cards">
        <div class="sample-card">
          <div class="sample-top">
            <div class="sample-date"></div>
            <!-- /.sample-date -->
            <div class="sample-category"></div>
            <!-- /.sample-category -->
          </div>
          <!-- /.sample-top -->
          <div class="sample-img"></div>
          <!-- /.sample-img -->
          <h3 class="sample-card-title"></h3>
          <!-- /.sample-card-title -->
        </div>
        <!-- /.sample-card -->
      </div>
      <!-- /.sample-cards -->
    </div>
    <!-- /.sample-inner -->
  </h2>
  <!-- /.sample-title -->
</section>
<!-- /.sample-section -->

これは閉じタグの後ろにコメントアウトがある状態です。

これがコメントアウトですね。

</div>
<!-- /.sample-cards --> 

これがあると『この閉じタグは<div class="sample-cards">の閉じタグだな』とすぐ分かります。

しかしそれがないと、このようにdivタグが複数ある箇所などで『この閉じタグはどのタグだ？？』と非常に見にくくなってしまいます。

<section class="sample-section">
  <h2 class="sample-title">
    <div class="sample-inner">
      <div class="sample-cards">
        <div class="sample-card">
          <div class="sample-top">
            <div class="sample-date"></div>
            <div class="sample-category"></div>
          </div>
          <div class="sample-img"></div>
          <h3 class="sample-card-title"></h3>
        </div>
      </div>
    </div>
  </h2>
</section>

上記の場合は最後の方にdivタグが3つ続いているだけなのでまだマシですが、これが5個6個とdivタグが続いているような箇所だとかなり見にくくなると思います。

しかしこれを1つずつ手入力していくのは大変なので、自動で挿入する方法を解説していきます。

 

完全無料のプログラミングスクール『ZeroPlus Gate』
30日間でWeb制作を学べる無料のプログラミングスクールがこちら
  • 30日間でWeb制作を学べる
  • 完全無料
  • 現役エンジニアへの質問無制限
  • オンラインの動画学習なので時間場所を問わず勉強可能
  • 最大4回の学習サポート面談
  • 受付は1日25名までの先着制
無料なのに専属のメンターが付き、現役エンジニアへの質問も無制限という破格のサービスです。
いきなり数十万するプログラミングスクールは厳しい・・・という人のお試しに最適。
現在は無料ですがいつ有料になるか分からないので、気になる方はお早めに👇

＼ 完全無料 ／

ZeroPlus Gate公式サイト

先着1日25名まで！

VSCodeのHTMLで閉じタグの後ろにコメントアウトを自動挿入する方法

今回は閉じタグの後ろにコメントアウトを自動挿入する方法を解説しますが、方法は2つあります。

  1. VSCode標準のEmmetの機能
  2. settings.jsonにコード追記

2つ目の方が簡単に出来るのですが、その違いも含めて両方解説します。

 

VSCode標準のEmmetの機能

この方法は.sampleというclass名の場合は『.sample|c』と入力してEnterキーでOKです。

ちょっと分かりにくいですが、『.sample』『 | 』『c』と3つが組み合わさっています。

VSCode：『.sample|c』と入力してEnterキー

VSCode：『.sample|c』と入力してEnterキー

ただこの『 | 』と『c』を入力するのがちょっと面倒だと思うので、『.sample』とEnterキーだけで閉じタグが出るようにしたいと思います。

 

settings.jsonにコード追記

まずは『settings.json』を開きます。

VSCodeを開いたら左下の歯車アイコンをクリックして『設定』をクリックします。

VSCode：歯車アイコン → 設定をクリック

VSCode：歯車アイコン → 設定をクリック

次に画面右上にある『設定アイコン』をクリックします。

VSCode：画面右上のアイコンをクリック

VSCode：画面右上のアイコンをクリック

すると『settings.json』が開くので、以下のコードを追記します。

"emmet.syntaxProfiles": {
  "html": {
    "filters": "html,c"
  }
},

保存をしたらもう一度HTMLで『.sample + Enterキー』と入力してみましょう。

VSCode：『.sample』と入力してEnterキー

VSCode：『.sample』と入力してEnterキー

もしコメントアウトを横に表示させたい場合は、以下のコードを『settings.json』に追記して下さい。

"emmet.preferences": {
  "filter.commentAfter": "<!-- /[#ID][.CLASS] -->"
},

するとこのようになります。

VSCode：『.sample』と入力してEnterキー

VSCode：『.sample』と入力してEnterキー

以上になります。

Web制作おすすめ教材と案件獲得サービス
当ブログではWeb制作学習におすすめの教材を厳選してご紹介しています。
こちらの記事を参考に教材を購入して成果を出している人もたくさんいるので、自分に必要な教材を探してみて下さい。
【独学・未経験者向け】Web制作で稼ぎたい人におすすめの教材をジャンル別に厳選紹介！
【独学・未経験者向け】Web制作で稼ぎたい人におすすめの教材をジャンル別に厳選紹介！

続きを見る

また、学習面だけでなく営業面である案件獲得サービスもご紹介しています。
スキルが身についても仕事がなければ意味がないので、営業に不安がある人はこちらの記事をぜひ参考にしてみて下さい。
フリーランスWeb系エンジニア・デザイナーの案件獲得・営業におすすめのサービスまとめ
フリーランスWeb系エンジニア・デザイナーの案件獲得・営業におすすめのサービスまとめ

続きを見る

この記事を参考にスキルと営業力を身につけて稼げるようになりましょう！

-HTML, Web制作
-