Visual Studio Code – HTML のタグ編集が簡単になる Auto Rename Tag

HTML を書いているとulタグからolタグに変えたくなったりすることがあると思います。

そのとき、開始と終了の両方のタグを変えないといけないので、少し面倒ですよね。

Visual Studio Code の Auto Rename Tag を使うと素早くタグを変えることができます。

1. Auto Rename Tag とは

Auto Rename Tag は Visual Studio Codeの拡張機能で、HTMLの開始タグと終了タグを同時に編集することができます。

百聞は一見にしかず、ということで以下の動画をご覧ください。

2. インストール方法

Visual Studio Code の拡張機能でAuto Reanme Tagと検索しましょう。

以下の画面が出てきたらインストールをクリック。

3. 使い方とサンプル

使いかたはいたって簡単で、htmlファイルをいつもどおり編集します。

タグを書き換えるタイミングで、対応する終了タグも同時に修正します。

また、終了タグを変更すると開始タグも書き換えられます。

Visual Studio Codeは機能ありすぎ!

Visual Studio Codeはオープンソースのコードエディタです。

コードエディタと言いつつも、デバッグもできますし簡易Webサーバも立てられますし、ソースコード中のTODOを検索してツリー表示することもできます。

インストール可能な拡張機能の数は30,000以上と言われており、とても便利な機能が数多くあります。

そのため、Visual Studio Codeを使いこなすには、それなりの情報収集が必要です。

「Visual Studio Code実践ガイド」は、

  • Visual Studio Codeの基本的な使い方
  • TypeScriptやPythonなど、実際の開発を通した Visual Studio Code機能の紹介
  • Visual Studio Code拡張機能の開発方法の紹介

などが収録されており、Visual Studio Codeの機能を体系的に理解するのに最適な書籍です。

電子書籍化されていますので、まずは kindleなどで試し読みしてみてはいかがでしょうか。

コメントを残す

メールアドレスが公開されることはありません。