HTMLを書いたり、修正する時に役立つVS Codeの機能拡張のまとめ
Post on:2021年6月11日
sponsors
VS Codeには便利な機能拡張がたくさんありますが、その中から特にHTMLを書いたり、修正する時に役立つ機能拡張を紹介します。
VS Code Extensions for HTML
by Chris Coyier
下記は各ポイントを意訳したものです。
※当ブログでの翻訳記事は、元サイト様にライセンスを得て翻訳しています。
はじめに
HTMLを書いたり、修正する時に役立つVS Codeの機能拡張を紹介します。すべてを気に入るとは思いませんが、自分が抱えていない問題を解決したり、必要以上の機能を備えているかもしれません。それでも構いません。ここで紹介するのは、私が実際に使用し、気に入っている機能拡張です。
VS Codeの機能拡張を紹介する前に、Emmetから始めたいと思います。これは機能拡張ではありませんが、VS Codeに組み込まれており、HTMLを書く時に非常に便利です。私はほぼ毎日のように使用しています。
参考: Emmet in Visual Studio Code
HTMLを書いたり、修正する時に役立つVS Codeの機能拡張
この機能拡張は、Stefan Judisがブログで紹介していたのをきっかけに知りました。アイデアの全体像は、どのHTML要素を閉じているかを示すコメントをHTML内に示すのではなく（同じドキュメントで開かない可能性のある要素を閉じるパーシャルの場合は一般的な方法です)、どのHTMLが閉じられているかをUIで表示します。
<div>の最後の括弧のように、HTML要素の中で>を入力すると、その閉じタグがすぐに自動作成されます。
Sublime Text 3にある</の入力でのみ自動で閉じるようにも設定できます。そういえば、Sublime Text Keymapをインストールすれば、自動的にこの機能が使えるようになりますし、他にもたくさんのおしゃれなキーコマンドがあります。
Close HTML/XML tagという機能拡張もありますが、こちらはキーコマンドでしか使えません。Auto Close Tagはどちらでも設定できますし、なぜかインストール数も圧倒的に多いです。
動画を作成した時に、この拡張機能をオフにしても、VS Codeの他の何かが一致するタグをハイライトしていることが分かりました。それが何なのかはよく分かりませんが、ビルトインの機能である可能性があると思っています。この機能拡張は、開始タグと終了タグの組み合わせをハイライト表示します。
Highlight Matching Tagを使用しない場合は、一致するタグの周りにボーダーが表示されます。
HTMLに限ったことではありませんが、このようなマッチングの手助けが好きな方にはBracket Pair Colorizer 2もお勧めで、CSSとJavaScriptで非常に便利です。
この機能拡張はかなり便利だと思います！
この機能は正規版のEmmetに組み込まれていると思いますが、VS Codeでは正規版のEmmetを使用していないため、この機能は存在しません。そのため、この機能拡張が必要になります。
私は、特に新しいものを開発するときには、コードのコメントが多くなります。私が気に入っているやり方は、コメントの最初にキーワード（例えばTODO）を付けることで、特に重要で注意が必要であることを示します。Better Commentsは、こういったコメントを視覚的に異なる形で表示することができます。
VS Codeにはスペルチェック機能がありません。私は不便だと感じます。というのも、HTMLには通常、正しいスペルで書かれたコンテンツが含まれているからです。linterのように、この機能拡張は何かが間違っているときには波線を表示し、修正候補を表示してくれます。
HTMLを書いていて大事なのは、自分が今どのレベルを見ていて、作業しているのかを視覚的に知ることができるということです。その意味では、Highlight Matching Tagに似ていますが、正直どちらも好きです。一致するタグがどこにあるか見つけるために上下にスクロールする必要がある場合に最も便利です。
PrettierはHTMLにも対応していますが、これはちょっとした論争の的になっています。例えば、PrettierはHTMLの属性を一行に分割しますが、これはJSXによく似ていますが、生のHTMLではあまり一般的ではありません。しかし、時には文字通りの副作用があります。例えば、リストのアイテムをインラインで設定するために意図的に<ul><li></li><li></li></ul>と入力した場合（スペースはなし）、Prettierはそれらを独自の行に分割し、スペースを挿入して、意図したレイアウトを変更します。Prettierのコメント（例: {/* prettier-ignore */}）でいつでも修正できますが、それが人々の心を逆なですることも考えられます。HTML Whitespace Sensitivityにはそのための設定もありますが、完璧にはできません。
実は、この記事のためだけにPrettier for HTMLを動作させたので、しばらく使ってみて、気に入るかどうかを確認しようと思います。JSX用のPrettierが好きなことはすでに分かっています。私は一般的に、可能な限り自動フォーマットをしたいと思っています。
スニペットの機能拡張はたくさんありますが、私が試した中ではこの機能拡張が唯一、問題なく動作しています。既存のファイルからすぐにスニペットを作成できるのもいいですね。
この機能拡張は、HTMLでもAIを使ったオートコンプリートの提案をしてくれることです。記述したHTML要素に使用できるいくつかの属性を推測して表示します。
Tabnineは有料の機能拡張で、チーム向けの有料プランに向けた機能も備えています。このようなツールがHTMLに対応しているのは興味深いことです。
この機能拡張は、エディタ上でHTMLのアクセシビリティ問題をチェックします。チェックに使用されるルールはたくさんあります。
sponsors
