WPホームページ研究所運営サポートチーム監修のオムスビ（@OMUSUVIcom）です。
本日は「Visual Studio Code」の拡張機能をご紹介いたします。ちなみに拡張機能はワードプレスで言う「プラグイン」です。エディターをより使いやすくするためのカスタマイズ機能となります。
目次
Visual Studio Codeに拡張機能を追加する操作手順
以前にインストール手順をまとめているのでぜひ併せてチェックくださいませ。
下記では拡張機能の操作手順について解説させていただきます。
拡張機能とは？
カンタンに言えばVisual Studio CodeやSublime Textはテキストエディターです。
たとえばワードプレスも機能を追加する場合はプラグインが必要ですよね。テキストエディターも同じでメインで開発する言語に合わせて拡張機能を追加していくことで環境を整えていくことができます。
拡張機能は検索ボックスからキーワードを入力してインストールするだけでOKです。
HTMLをより便利にする拡張機能
では参考までにhtmlタグを効率的に使える拡張機能を３つご紹介いたします。
・Auto Rename Tag
・InteliSense for CSS class names in HTML
・HTMLhint
それぞれ説明させていただきますね。
Auto Rename Tag
htmlの開始タグを変更すると閉じタグも連動して自動修正してくれる拡張機能。
InteliSense for CSS class names in HTML
html内のCSS名を自動で候補として表示する拡張機能。コーディング速度の向上。
HTMLhint
html構文をチェックする拡張機能。
拡張機能をインストールする
参考までに「Auto Rename Tag」を追加してみましょう。設定はカンタンです。
インストールが完了したら以下の表示に切り替わります。表示が変わりましたよね。
インストール後は以下の操作が可能です。
・無効にする
・アンインストール
一時的にストップするなら「無効にする」。削除する場合は「アンインストール」。
その他で便利な拡張機能
開発時に便利な拡張機能をいくつかご紹介させていただきます。
PHP Intelephense
PHP記述時のコード補完やコードチェックを行ってくれる拡張機能。
PHP Debug
PHP言語でデバッグ（プログラミングの動作チェック）機能を使うために必要な拡張機能。
CSS peek
CSS記述箇所に素早く移動する拡張機能。
zenkaku
全角スペースを教えてくれる拡張機能。
Live Server
ブラウザでプレビューできる拡張機能。
もしその他にもおすすめの拡張機能が出てきたらあらためて追記いたします。
まとめ
本日は「Visual Studio Code拡張機能の追加手順」をご紹介させていただきました。
ワードプレスのプラグインとよく似た仕組みでVisual Studio Codeにも拡張機能が用意されています。追加するとエディター機能がさらに進化してより使いやすくなるのでぜひお試しくださいませ。
上記に書いた以外にもまだまだ便利な拡張機能がたくさんあるのでまたあらためて記事にいたしますね。
最新式の無料プラグインを事前公開
WordPressは公式サイトに登録済みのプラグインだけで全機能を補足しきれません。当サイトでは使いやすさを追求した魅惑的なプラグインを無料でダウンロードいただけます。運営ホームページのマーケティング力をさらに高めるチャンスです。まずは無料でDLしてお試しくださいませ。
→ 改良されたプラグインを確認する
