Web制作 HTML

【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つずつ手入力していくのは大変なので、自動で挿入する方法を解説していきます。

今だけ!5大無料特典あり🎁

コーディングの時給アップにはこちら!


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キー

以上になります。

 

コーディングの時給と作業効率を上げる!
2年間の実務で実際に使ったコードをまとめた『コーディング&WordPressメモまとめ集』をBrainで公開しています。
  • コピペで使えるWordPressの各テンプレート
  • 実務でよく使う見出し一覧
  • 実務でよく使うテキストのhoverアニメーション
  • 実務でよく使うボタン内の矢印9種類
  • Contact Form 7の色々・・・
などなど、他にもコピペで使えるコードがたくさん載せてあるので、時短=時給アップに繋がります。
さらに『コードのまとめ方が参考になった』というレビューも多数頂いているので、これを元に自分なりの"メモまとめ集"を作るという使い方も出来ます。
レビューは390件以上あるので、気になる方は以下のボタンからチェックしてみて下さい👇

今だけ!5大無料特典あり🎁

販売ページとレビューを見てみる


ブログランキング・にほんブログ村へ
  • この記事を書いた人

じゅんぺい

タイ・バンコク在住のWeb制作フリーランス兼ブロガー▶︎37歳からWeb制作を開始▶︎コーディングとWordPressのオリジナルテーマ制作でこれまで80件以上納品▶︎Web制作中心の当ブログは月間最高8.4万PV▶︎Twitterのフォロワーは6100人▶︎コーディングとWordPressのコンテンツを販売し、3日で500部突破&250万円&人気1位獲得 → 累計700部&420万円突破

-Web制作, HTML
-