【VSCode】言語別、おすすめ拡張機能１９選！拡張機能でストレスフリーなエディターを作ろう！

VScodeは今のままでも十分使いやすいですが、拡張機能を入れると更に使いやすくなります。言語別にご紹介しますので、気になる拡張機能があったら入れてみてくださいね！拡張機能の追加は、サイドバーに「EXTENSIONS」（左のアイコンの一番下）を表示させて検索してください。有効、推奨、無効になっている拡張機能も見れるので、定期的に整理しましょう。

• 基本設定・ビジュアル変更の拡張機能
• HTMLの拡張機能
• CSSの拡張機能
• JavaScripの拡張機能
• WordPressの拡張機能
• （おまけ）ライティング・TODOリストの拡張機能

基本設定・ビジュアル変更の拡張機能

VSCodeの基本設定やビジュアルを変更する拡張機能をご紹介します。ちょっとした事ですが、見た目が変わるだけで作業のしやすさが変わります。拡張機能を使わないでテーマを変更したいだけでしたら、パレットコマンド（Mac : Cmd + Shift + P、Win : Ctrl + Shift + P）から、「テーマ」と入力して「基本設定：配色テーマ」を選んでください。色々なテーマがありますので、気分転換に変えてもいいですね。

vscodeicons

ファイル名の横に表示されるアイコンが変更できます。初期状態でも拡張子ごとのアイコンは表示されていますが少し見づらいです。ファイルの種類が一目で分かりやすくなりますので、直感的に移動箇所が分かって作業効率が上がります。

EvilInspector

うっかり全角のスペースが1つ入ってだけで、エラーが発生します。拡張機能で全角スペースが見やすくなりますので、うっかりエラーが防げます。全角スペースを見やすくする拡張機能は、他にも「zenkaku」が有名です。

Bracket Pair Colorizer

子要素、孫要素と増えてくると、括弧の数が多くなります。閉じ括弧がどこにあるか、迷子になりますよね。「Bracket Pair Colorizer」は、対となる括弧で色が変えてくれるので、すごくコードが見やすくなります。ちなみにショートカットの「対となる括弧にジャンプ」（Mac : Shift + Cmd + \、Win : Ctrl + Shift + \）も覚えておくと便利ですよ。

indentrainbow

インデントの深さが色分けで表示されます。初期状態では、線でインデントの深さが表示されていますが、色が付く事で見やすくなります。「Bracket Pair Colorizer」と「indentrainbow」で入れ子が多くなっても、分かりやすくなります。

まずは無料の7講座から受講してみましょう。わかりやすくて目からウロコですよ。
» 今すぐ無料講座をチェックする

HTMLの拡張機能

HTMLの編集に役立つ拡張機能をご紹介します。コーディングのスピードを上げる拡張機能とエラーチェック、ライブプレビューの拡張機能があれば、HTMLの編集がグッと楽になりますよ。

Bookmarks

ブックマークが付けられる拡張機能です。ブックマークにジャンプしたり、リスト化する事も出来ます。コードが長くなればなるほど、お目当ての場所までスクロールするのが面倒ですよね。一発でジャンプできるだけでなく、ファイルを跨いでのジャンプもできます。

Live Server

リアルタイムでプレビューが見れます。ライブプレビューの拡張機能は、「Live Server」の他にも「Browser Preview」や「HTML Preview」「Live HTML Previewer」などもありますので、使いやすい物を選んでください。

Auto Rename Tag

タグを編集する時は、通常開始タグと閉じタグ両方を書き換えなければいけません。「Auto Rename Tag」の拡張機能は、どちらか一つのタグを書き換えると、残ったタグも同時に編集してくれます。作業が減るのでとても便利ですよ。

HTMLHint

HTMLのエラーを検出します。画面したにあるステータスバーの左側に警告、エラーの件数が表示されます。クリックするとパネルの画面が開き、エラー内容が確認できます。

Code Spell Checker

スペルミスを教えてくれます。波線で表示されますので、間違えている箇所が分かりやすいです。「HTMLHint」と同じくこちらもステータスバーの左側に件数が表示されます。

Path Autocomplete

Pathの補完をしてくれます。画像のファイル名も候補が出てきますので、入力が捗ります。タイプミスもなくなるので、とても重宝しますよ。

CSSの拡張機能

次はCSSに関する拡張機能をご紹介します。今まで紹介した拡張機能で、かなり編集は楽になるかと思います。CSSに関する拡張機能は、補完の拡張機能と文法チェックの拡張機能をご紹介します。

IntelliSense for CSS class names in HTML

HTMLでclassの名前を付ける時に、CSSファイル内にあるclassを読み取って入力補完してくれます。新しいclassを付ける時に、名前に悩む事はありませんか？名前のかぶりが無くなりますし、ある程度class名を付ける時のルールを決めておけば、新しいclassを付ける時もスムーズに付ける事が出来ます。

CSSTree validator

CSSの文法チェックする拡張機能です。ここでは、CSSの補完機能と文法チェックをご紹介します。コーディングする時は、正しい文法で書く必要があります。HTMLとCSSの文法チェックの拡張機能を入れておけば安心ですね。

JavaScripの拡張機能

JavaScriptの拡張機能です。JavaScriptになると、入力するコードが長くなります。ここでも補完の拡張機能を入れて編集を楽にしましょう。

IntelliCode

Microsoftの公式プラグインです。AI支援のインテリセンスが利用できるようになります。アルファベット順ではなく、AIが使用する可能性が高いコードを予測して上位に表示します。

JavaScript code snippets

JavaScriptのスニペットです。公式サイトのSnippetsに一覧があります。「Trigger」の入力してTABで展開できます。「Trigger」に書いてある「→」は、TABの意味だそうですので、お気をつけください。

公式サイト

WordPressの拡張機能

WordPressはPHPで作成されています。PHPの補完機能を入れたい所ですが、WordPressは独自のPHP表記で書かなくてはいけません。ここはWordPressの補完機能を入れましょう。PHPのインテリセンスも入れたい場合は「PHP Intelephense」をインストールしてください。

WordPress Snippet

WordPressのコードを補完してくれます。WordPressは、バージョンアップの時に推奨コードが変わる事があります。WordPressの補完機能を入れる場合は拡張機能の詳細を見て、自分が使っているバージョンに合っているか確認しましょう。

WordPress Codex 日本語版

（おまけ）ライティング・TODOリストの拡張機能

VSCodeは色々な使い方が出来ます。ライティングも出来ますし、TODOリストで利用している人もいるようですね。VSCodeでライティングするメリットは、コピペで表示が崩れない点にあります。ネットで調べながら記事を書いている時に、単語などコピペする時がありますよね。ワードですと装飾がそのまま貼り付けられますが、VSCodeで貼り付けると文字だけがペーストされます。拡張子を「md」にすればMarkdownも使えますので、おすすめですよ。

テキスト校正くん

文章の校正をしてくれます。ら抜き言葉や、一つの文章に「、」が多すぎないかなど、日本語の文章のチェックをしてくれます。後は、プログラミング用語の固有名詞の書き方などもチェックや、「漢字の開き」（「出来ます」→「できます」など）などもチェックしてくれます。設定でチェック内容が簡単に変更できるのも嬉しいですね。

CharacterCount

文字数をリアルタイムでカウントしてくれます。一番大事なのは記事の内容ですよね。しかし、お仕事でのライティングや、ブログ作成で何文字以上は欲しいと文字数を気にしながらライティングしないといけない時もあります。左下に文字数がリアルタイムで表示されますので、計算しながらのライティングが可能になります。

Todo +

VSCodeでToDoリストが作れます。あれやこれやアプリを入れたくない人や、基本VSCodeをずっと開いている人には最高の拡張機能だと思います。時間の記録も出来て、至れり尽くせりな拡張機能ですよ。使い方はこちらのサイトが詳しいです。興味のある方はぜひ使ってみてください。

VSCodeでタスク管理

HTML、CSS、JavaScript、WordPressとおまけの拡張機能をご紹介しました。VSCodeには、沢山の拡張機能があります。ご紹介した拡張機能以外でも、Bootstrapの補完機能やSASSをコンパイルする拡張機能などもあります。自分の使い方によって、必要な拡張機能が変わりますので色々探してくださいね！