今回はそんな疑問にお答えします。
VSCodeもWordRress同様、たくさんプラグインがあって何を入れていいか分からないと思います。
今回はおすすめのプラグインをまとめてご紹介していきます。
VSCodeのプラグインのインストール方法
まずはプラグインのインストール方法について解説します。
知ってる方はスルーしてOKです。
まずVSCodeを開いて左の赤枠のアイコンをクリックします。
すると検索フォームが上に表示されるので、インストールしたいプラグイン名を入力します。
するといくつか候補が表示されるので、インストールしたい物を選んでインストールします。
一覧の方のインストールでも、プラグインをクリックして詳細が表示された所にあるインストールでも大丈夫です。
今回ご紹介するプラグインは細かく設定可能なものもありますが、大半はインストールするだけで大丈夫です。
VSCodeのおすすめプラグインまとめ
こちらが今回ご紹介するプラグインの一覧です。
- Auto Rename Tag（片方のタグを修正するともう片方のタグも同時に修正）
- Bracket Pair Colorizer 2（対応する括弧を色付け）
- Code Spell Checker（スペルのチェック）
- Color Highlight（カラーコードをその色で表示）
- CSScomb（CSSをアルファベット順に並べたり好きなフォーマットで並び替え）
- CSSTree validator（CSSの構文チェック）
- Format HTML in PHP（PHPファイル内のHTMLを自動整形）
- HTMLHint（HTMLの構文チェック）
- htmltagwrap（選択範囲をタグで囲む）
- indent-rainbow（インデントに色付け）
- Japanese Language Pack for Visual Studio Code（日本語化）
- Prettier - Code formatter（保存と同時にコードを自動整形）
- vscode-icons（ファイルのアイコンを分かりやすく表示）
- zenkaku（全角スペースを強調）
それでは1つずつ解説していきます。
Auto Rename Tag
これは片方のタグを修正するともう片方のタグも同時に修正してくれるプラグインです。
これは動画で見ると分かると思います。
こちらがプラグイン適用前。
開始タグを修正しても閉じタグに変化はありません。
そしてこちらがプラグイン適用後。
こちらは開始タグを修正したら閉じタグも自動で修正されているのが分かります。
自動で修正というか同じ動きをしていますね。
これで開始タグを閉じタグにコピペしたり、手入力で間違えたりすることはなくなります。
Bracket Pair Colorizer 2
これは対応する括弧を色付けしてくれるプラグインです。
視認性が高まるのでぜひ入れておきたいプラグインです。
こちらがプラグイン適用前。
括弧が全て白になってますね。
そしてこちらがプラグイン適用後。
色分けされてかなり見やすくなりました。
Code Spell Checker
これは名前の通りですが、スペルのチェックをしてくれるプラグインになります。
英単語のスペルミスは誰もがやってしまうと思いますが、これはそれを見つけてくれる優れものです。
まずは「title」と入力してみます。
これは問題ありません。
次に「titlet」と入力してみます。
波線が表示されましたね。
これがスペルミスの印です。
ちなみに略語はスペルミスと判断されないこともあります。
次に「section」と「title」2つの単語を繋げてみます。
スペルミスとなりましたね。
ただ次の単語の頭を大文字にすれば大丈夫です（キャメルケースという記法です）
Color Highlight
これはカラーコードをその色で表示してくれるプラグインです。
こちらがプラグイン適用前。
こちらがプラグイン適用後。
適用後の方は色が表示されているので、とても分かりやすくなります。
ちなみにrgbaの最後の数字は透過率で0～1となっていて、0に近いほど透過率が上がるのですが、この透過率も反映されます。
少し薄くなっているのが分かります。
CSScomb
これはCSSをアルファベット順に並べたり、好きなフォーマットで並び替えたりすることが出来るプラグインです。
使い方についてはこちらの記事を参照下さい。
【VSCode】CSScombの使い方【CSSをアルファベット順に並べる方法】
CSSTree validator
これはCSSの構文チェックを行ってくれるプラグインです。
こちらがプラグイン適用前。
スペルミスなどしていますが、何もエラー表示はされていません。
そしてこちらがプラグイン適用後。
波線でエラー表示が確認出来ます。
そしてエラーの箇所は表示→問題（ctrl + shift + M）で確認でき、下の方にあるエラーメッセージをクリックするとエラー箇所まで飛んでくれます。
これでコードが大量でもすぐエラー箇所の確認が出来ます。
Format HTML in PHP
これは名前の通りですが、PHPファイル内のHTMLを自動整形してくれるプラグインです。
WordPressのオリジナルテーマ作成をする場合は入れておきたいプラグインです。
改行、テキスト編集、スペースなど、編集作業をするたびにインデントなど自動整形して保存してくれます。
HTMLHint
これはHTMLの構文チェックを行ってくれるプラグインです。
こちらがプラグイン適用前。
おかしい箇所が2つあるのですが、特にエラー表示はされていません。
そしてこちらがプラグイン適用後です。
波線でエラー表示がされました。
ただこの場合は</section>と</body>が変だと思いますが、実際はheaderの閉じタグにスラッシュがないのと、sectionの閉じタグが2つあるのがエラーの原因です。
今回の例で言えば「</section>が余計ですよ」という意味になります。
実際は<section>の隣にある方が余計なのですが、こういった場合はどちらが余計かまでは判断してくれないので「どこかおかしい」という事だけは確実です。
htmltagwrap
タグで囲みたい範囲を選択して「alt + W」を押すとpタグで囲ってくれます。
そのままpを消して他のタグに書き換える事も出来ます。
indent-rainbow
これはインデントに色を付けてくれるプラグインです。
こちらはプラグイン適用前。
こちらがプラグイン適用後。
薄っすらと色が付いたのが分かると思います。
また崩れている箇所については濃く色が付いて強調してくれます。
Japanese Language Pack for Visual Studio Code
これはVSCodeを日本語化してくれるプラグインです。
英語上等の人以外は大人しく入れておいた方が幸せになれます。
このプラグインのインストール方法は以下の記事を参照下さい。
Prettier - Code formatter
これは保存と同時にコードを整えてくれるコードフォーマッターのプラグインです。
例えばこのようにインデントが揃ってなくても、保存をするとキレイに揃えてくれます。
ただし自動保存ではフォーマット（自動整形）してくないので、保存（ctrl + S）で保存する必要があります（恐らく）
vscode-icons
これはファイルのアイコンを分かりやすくしてくれるプラグインです。
デフォルトでも「ファイル → ユーザー設定 → ファイル アイコンのテーマ」を選択すると、このようにアイコンの種類を選択出来ます。
ここにプラグインをインストールすると項目が増えます。
そしてそれぞれこのようになります。
左から「なし・最小・Seti・VSCode Icons」
このプラグインだとフォルダまでアイコンになりますね。
zenkaku
これは全角スペースを強調してくれるプラグインです。
全角スペースがあるとエラーの原因になったりするので、あると非常に便利だと思います。
こちらがプラグイン適用前。
半角スペースと全角スペースがあります。
並んでいれば分かるかも知れませんが、単体だとぱっと見では分からないと思います。
そしてこちらがプラグイン適用後。
全角スペースの箇所が強調され分かりやすくなりました。
以上です。
プラグインはたくさんあるので、色々試してみて下さい。