初心者にもわかる「VSCode」おすすめ拡張機能で効率UP！

はじめに

Visual Studio Codeは、多くの開発者に愛用されている高機能なエディタです。普段使用している中で、次のように感じている方もいるのではないでしょうか。

• 基本的な操作しか知らず、もっと便利に使いたい

• 効率的な設定や拡張機能の活用方法を知りたい

• VSCodeを自分好みにカスタムして、開発を楽しくしたい

Visual Studio Codeはカスタマイズ性が高く、簡単な設定変更や拡張機能の導入だけで作業効率が格段に向上します。

本記事では、Visual Studio Codeをより快適に使うための拡張機能を紹介し、日々の開発を効率化するヒントをお届けします。

Visual Studio Codeとは

Visual Studio CodeとはMicrosoft社が提供を行うコードエディターで、通称「VSCode」と呼ばれています。

VSCodeはオープンソースのソフトウェアで、誰でも無料で利用できます。多言語対応、OSを問わず使用可能、多彩な拡張機能といった特徴を持ち、多くの現役エンジニアから支持されています。日本語対応もしているため、初心者でも扱いやすいエディターです。

VSCodeは以下のサイトからダウンロードでき、Mac、Windows、Linuxに対応しています。

Visual Studio Code 公式サイト

https://code.visualstudio.com/download

導入方法や基本操作については、以下の記事で詳しく解説しているので、ぜひ参考にしてください。

初心者にもわかる「VSCode」の導入から基本操作まで解説

https://envader.plus/article/118

VSCodeの拡張機能とは

VSCodeの拡張機能（エクステンション）とは、エディターの機能を追加・強化するツールです。

例えば、プログラムの自動補完、コードの整形、エラーのチェック、テーマの変更などが可能になります。PythonやJavaScriptを使う場合も、専用の拡張機能を導入すれば、より快適にコーディングできます。

拡張機能のインストール方法

拡張機能は、以下の手順で簡単にインストールできます。

1.拡張機能パネルを開く

VSCodeの左側にある「拡張機能アイコン（四角が4つ並んだマーク）」をクリックするか、以下のショートカットを押します。

2.拡張機能を検索

拡張機能パネルの検索バーに、インストールしたい拡張機能の名前を入力します。

例：「Python」など

3.拡張機能をインストール

検索結果の一覧から目的の拡張機能を選び、「インストール」ボタンをクリックします。

4.VSCodeを再起動

一部の拡張機能は、インストール後にVSCodeを再起動しないと有効にならない場合があります。必要に応じて、VSCodeを一度終了して再起動するか、メニューから「再起動して更新」を選択します。

5.インストールした拡張機能を確認・管理

インストールした拡張機能は、拡張機能パネルの「インストール済み」タブで確認できます。このタブから、拡張機能の有効/無効の切り替えやアンインストールも行えます。

おすすめ拡張機能10選

プログラミング初心者でも使いやすい、VSCodeのおすすめ拡張機能を一つずつ紹介します。

1.Japanese Language Pack for Visual Studio Code

https://marketplace.visualstudio.com/items?itemName=MS-CEINTL.vscode-language-pack-ja

メニューや設定画面を日本語化

VSCodeのメニューや設定画面を日本語化する拡張機能です。英語表示が苦手な方でも、画面が日本語になることで操作方法を理解しやすくなります。

インストール後、VSCodeの右下にポップアップが表示されるので、「Change…」ボタンを選択すれば、すぐに日本語へ変更できます。

2.Prettier - Code formatter

https://marketplace.visualstudio.com/items?itemName=esbenp.prettier-vscode

コードのフォーマットを自動整形

JavaScript、HTML、CSSなどのコードを保存時に自動整形します。特にチーム開発では、コードのフォーマットを統一するのに便利です。

コード整形の具体例

以下のようにコードを見やすく整形します。

// Before
const example=()=>{return<div><h1>Hello World</h1></div>}

// After（保存時に自動変換）
const example = () => {
  return <div><h1>Hello World</h1></div>;
};

3.Code Spell Checker

https://marketplace.visualstudio.com/items?itemName=streetsidesoftware.code-spell-checker

コード内のスペルミスを自動検出

コード内に誤字（スペルミス）がある場合、自動で波線が表示され、カーソルを合わせると修正候補が表示されます。クリックすると、候補を確認しながら修正できます。

コード内の誤字（スペルミス）がある場合、自動で波線が表示されます。波線の上にカーソルを合わせると黄色いアイコンが表示（修正候補）され、クリックして修正候補を確認できます。

4.indent-rainbow

https://marketplace.visualstudio.com/items?itemName=oderwat.indent-rainbow

インデントを色分けして表示

この拡張機能をインストールすると、インデントが自動で色分けされます。特にPythonなど、インデントが重要な言語で役立ちます。

拡張機能をインストールすると、以下のようにインデントが自動で色分け表示されます。

5.IntelliCode

https://marketplace.visualstudio.com/items?itemName=VisualStudioExptTeam.vscodeintellicode

AIによるスマートなコード補完

Microsoft公式のAIコード補完拡張機能です。入力中のコードに最適な候補を優先的に提案したり、GitHubに登録されている同じコードの事例を確認できます。

以下のようにGitHubに登録されている事例を確認できます。

6.Tabnine: AI Chat & Autocomplete

https://marketplace.visualstudio.com/items?itemName=TabNine.tabnine-vscode

AIを活用したコードの自動補完

AIを利用したコード補完ツールで、複数のプログラミング言語に対応しています。Chat機能もあり、コードレビューや疑問解決にも役立ちます。

以下はVSCode上でチャット形式で質問している様子です。

7.Error Lens

https://marketplace.visualstudio.com/items?itemName=formulahendry.auto-rename-tag

エラーや警告を視覚的に強調表示

VSCode上で発生したエラーや警告を、より見やすく表示する拡張機能です。通常、エラーや警告はエディタ下部の「問題」タブに表示されますが、この拡張機能を導入すると、コード内に直接メッセージが表示されるため、すぐに問題を把握できます。

以下のように、エラー内容が表示されます。

8.ESLint

https://marketplace.visualstudio.com/items?itemName=dbaeumer.vscode-eslint

JavaScript/TypeScriptの文法チェック

JavaScriptやTypeScriptのコードをLint（文法チェック）し、間違いや警告を表示してくれる拡張機能です。エラーや警告がある箇所に波線が表示され、クリックすると修正案が確認できます。

9.Python

https://marketplace.visualstudio.com/items?itemName=ms-python.python

Python開発を強化する拡張機能

VSCodeでPythonを開発するなら必須の拡張機能です。文法チェック、コード補完、デバッグ機能が強化されます。

10.Pylance

https://marketplace.visualstudio.com/items?itemName=ms-python.vscode-pylance

Pythonのコード補完とエラーチェック

Python拡張機能とPylanceを組み合わせて使うと、補完機能やエラー検出が強化されます。Pythonを書く際の強力なサポートツールです。

これらの拡張機能を導入すると、さまざまな形で作業効率が向上します。初心者のうちは、一度に全部を導入せず、まずはコード記述の基本がわかりやすくなる「Code Spell Checker」や「indent-rainbow」から試すのがおすすめです。

慣れてきたら次のセクションで紹介する、VSCodeのsettings.json（設定ファイル）を編集して、自分に合った開発環境を作ってみてください。

settings.jsonを編集して開発環境を最適化

VSCodeでは「settings.json」というファイルを編集することで、エディタの動作を細かくカスタマイズできます。ここでは、はじめてsettings.jsonを編集する方に向けて、おすすめの設定例を紹介します。

settings.jsonの表示方法

Windowsでの表示

Ctrl + P でコマンドパレットを開き、以下のパスを入力すると、settings.jsonを開けます。

C:\Users\ユーザー名\AppData\Roaming\Code\User\settings.json

Macでの表示

Windowsと同様に Cmd + P でコマンドパレットを開き、以下のパスを入力すると開けます。

~/Library/Application Support/Code/User/settings.json

ファイルを自動保存する設定

ファイルを自動保存する設定です。以下の例はファイルの変更から1秒後に自動保存します。

{
    "files.autoSave": "afterDelay",
    "files.autoSaveDelay": 1000,
}

お好みのテーマやフォントサイズの設定

VSCodeのテーマやフォントサイズをカスタマイズする設定です。フォントサイズや行の高さなど、見た目のカスタマイズも可能です。

{
    "workbench.colorTheme": "テーマ名",
    "editor.fontFamily": "フォント名",
    "editor.fontSize": 文字のサイズ,
    "editor.lineHeight": 行のアキ幅,
}

エディタの表示設定

エディタの使い勝手を向上させるための設定です。以下のような設定ができ、エディタを自分好みにカスタマイズできます。

{
    "editor.minimap.enabled": false,
    "editor.renderWhitespace": "boundary",
    "editor.guides.bracketPairs": true,
}

• Minimap（ミニマップ）の表示/非表示

  editor.minimap.enabled

  エディタの右側にあるミニマップの表示を切り替える設定です。

  • true：表示（デフォルト）
  • false：非表示

  

• 空白文字の表示設定

  editor.renderWhitespace

  コード内の空白（スペースやタブ）をどのように表示するかを設定できます。

  • "none"：空白文字を表示しない（デフォルト設定）
  • "boundary"：行末のスペースやタブのみ表示
  • "all"：すべての空白文字を表示

  例：none と boundary の違い

  boundary の場合、タブ部分に「・」が表示されます。

  

• 括弧のペアガイド

  editor.guides.bracketPairs

  コード内で対応する括弧（{}, [], ()）をわかりやすく視覚化するためのガイドラインを表示する設定です。

  • true：すべての括弧ペアにガイドを表示
  • "active"：現在カーソルがある括弧のペアだけを強調表示
  • false：ガイドを非表示

  

settings.jsonのこれらの設定をカスタマイズすることで、VSCodeの見た目や使いやすさを大きく向上させることができます。必要に応じて調整し、自分に合った最適なコーディング環境を整えてみてください。

まとめ

VSCodeは、拡張機能や設定を活用することで、より快適な開発環境を構築できます。本記事では、初心者にもおすすめの拡張機能や、「settings.json」を編集してカスタマイズする方法を紹介しました。

特に、「Code Spell Checker」や「indent-rainbow」などの拡張機能は、コードの可読性向上に役立ちます。また、settings.jsonを編集することで、エディタの動作を細かく調整し、自分に合った開発環境を作ることが可能です。

最初は必要最低限のカスタマイズから始め、慣れてきたら自分にとって使いやすい設定を追加してみてください。今回紹介した拡張機能以外にも、便利なものがたくさんあります。VSCodeを自分好みにカスタマイズし、楽しく効率的なコーディング環境を整えましょう。

参照資料

• Extensions for Visual Studio Code

  https://marketplace.visualstudio.com/