2022年のStack Overflow Developer Surveyによれば、アンケート回答者7万1,010人のうち、74.48%がコードエディター「Visual Studio Code(VS Code)」を使用していると答えています。その豊富な機能と優れたカスタマイズ性から、VS Codeは世界中の開発者に愛用されています。

Stack Overflow Developer Survey
Stack Overflow Developer Survey

VSCodeの真の魅力は、拡張機能の膨大なエコシステムにあります。拡張機能を活用することで、VSCodeの本領が発揮され、機能性と生産性をまったく新たなレベルに引き上げることができます。

JavaScriptのプロ、Pythonの第一人者、一般的な技術スタックを扱う開発者、あらゆるユーザーに便利な拡張機能が揃っています。

今回は、生産性を高めてくれるVSCodeの拡張機能を厳選してご紹介していきます。

VS Codeの基本拡張機能9選

まずは、生産性を向上し、VS Codeでより良いユーザー体験を得るための基本拡張機能から見ていきましょう。

1. Prettier

Prettierは、広く使用されているコードフォーマッターで、コードスタイルをプロジェクト全体で整形することができます。あらゆるプログラミング言語をサポートし、あらかじめ定義された一定のルールに従ってコードを自動整形することで、可読性を高め、スタイルに関連する問題を軽減することができます。

Prettier
Prettier

特徴

  • JavaScript、TypeScriptCSSHTMLなど、さまざまなプログラミング言語をサポート
  • 定義したルールに従ってコードを自動整形
  • プロジェクト全体でコードスタイルを一貫
  • VS Codeの書式設定が統合されており、保存時やキーボードショートカットでトリガー可能

2. Remote – SSH

Remote – SSHを使用すると、安全なSSHプロトコルでリモートサーバーや仮想マシンで作業を行うことができます。リモート環境のローカルVS Codeインスタンスから直接ファイルの編集、コマンドの実行、アプリケーションのデバッグが可能になり、シームレスな開発環境を確保することができます。

Remote - SSH
Remote – SSH

特徴

  • SSHを使用してリモートサーバーまたは仮想マシンに接続
  • リモートシステム上のファイルをローカルであるかのように編集可能
  • リモートマシン上でコマンドやスクリプトを実行
  • リモート環境で動作するアプリケーションのデバッグ
  • VS Codeの豊富な編集/デバッグ機能とのシームレスな統合

3. Live Share

Live Shareは、開発環境を共有することで、他の開発者とのリアルタイムなコラボレーションを可能にする拡張機能です。編集、デバッグ、ターミナルセッションを共有することができ、チームでの業務が効率化され、シームレスなペアプログラミングを行うことができます。

Live Share
Live Share

特徴

  • 他の開発者とのリアルタイムコラボレーション
  • 編集、デバッグ、ターミナルセッションの共有
  • チーム間でのコミュニケーションに便利な統合チャット機能
  • 共同コードレビューとペアプログラミング

4. Better Comments

Better Commentsを使用すると、コードに色分けされたコメントを追加し、異なるタイプのコメントを簡単に区別できるようになります。また、接頭辞を使って重要なメモ、TODO、警告などを強調表示することも。

Better Comments
Better Comments

特徴

  • カスタムコメントタイプと接頭辞をサポート
  • コードの読みやすさと構成力を改善

5. CodeSnap

CodeSnapを活用すると、コードのスクリーンショットを簡単に撮ることができます。コードスニペットをキャプチャし、共有可能な画像ファイルを生成するため、ドキュメンテーション、チュートリアル、SNSプラットフォームでのコードの共有に便利です。

Codesnap
Codesnap

特徴

  • テーマ、フォントサイズなど、編集可能なコードのスナップショット
  • PNG、JPEG、SVGなど様々な画像形式をサポート

6. Code Runner

Code Runnerは、VS Code内からさまざまなプログラミング言語のコードスニペットや、ファイル全体を素早く実行することができる拡張機能です。コードエディターと別のターミナルを切り替える必要がなくなり、コードのテストと実行を効率化することができます。

Code Runner
Code Runner

特徴

  • 様々なプログラミング言語でコードスニペットやファイル全体を実行
  • JavaScript、Python、Java、C++など、幅広いプログラミング言語をサポート
  • カスタマイズ可能な実行設定とコマンドショートカット
  • ターミナルまたは出力ウィンドウでコードを実行
  • 入出力を伴うコードを実行
  • ファイルの言語に基づき適切なコンパイラまたはインタプリタを自動選択

7. Path Intellisense

Path Intellisenseには、コード内のファイルパスを高度に自動補完し、ファイルパスの入力を簡素化します。プロジェクト内でファイルやモジュールを参照する際のタイプミスをなくし、正確性を高めることができます。

Path Intellisense
Path Intellisense

特徴

  • 相対パスと絶対パスをサポート
  • 様々なプログラミング言語やフレームワークとシームレスに動作

8. vscode-icons

vscode-iconsを使えば、デフォルトのファイルアイコンを魅力的かつ直感的なアイコンに置き換えることも。コーディング作業が視覚的に楽しくなること間違いなしです。

vscode-icons
vscode-icons

特徴

  • さまざまなファイルタイプ、フォルダ、一般的なプログラミング言語のアイコンが豊富
  • 様々なカスタマイズ機能があり、好みのコーディングスタイルに合わせてアイコンサイズや不透明度の調整、アイコンセットを有効/無効にすることができる
  • 特定のアイコンをフォルダに割り当て、プロジェクトを視覚的に差別化

9. Night Owl

Night Owlは、美しいVS Code用テーマ。目に優しい落ち着いた色調のテーマを実装することで、眼精疲労が軽減され、コーディング作業が捗ります。

Night Owl
Night Owl

特徴

  • 長時間のコーディング作業による目の疲れを軽減するダークテーマ
  • 幅広いプログラミング言語に対応した、鮮やかで見やすいシンタックスハイライト
  • 複数のアクセントカラーからテーマをパーソナライズ
  • 高コントラストで読みやすいテキスト

VS Codeのウェブ開発拡張機能7選

ウェブ開発業界は日進月歩。作業効率を高めてくれるツールや技術は、なんとしても取り入れたいものです。続いて、ウェブ開発に関連したおすすめの拡張機能をご紹介します。

1. Live Server

Live Serverは、自動更新機能を持つローカル開発サーバーを構築できる画期的な拡張機能。HTML、CSS、JavaScriptの変更をリアルタイムでプレビューでき、ブラウザを手動で更新する手間を省くことができます。

Live Server
Live Server

特徴

  • 自動更新機能組み込みのローカル開発サーバーを作成
  • ファイル変更時にブラウザを自動更新
  • HTML、CSS、JavaScriptなど、さまざまなウェブ開発ファイルをサポート
  • ポート番号、ルートディレクトリなどのサーバー設定の変更

2. Auto Rename Tag

Auto Rename Tagは、開始タグまたは終了タグを変更すると、HTMLまたはXMLタグの名前も自動的に変更される便利な拡張機能です。マークアップ言語を使った作業が効率化され、一貫性も保たれます。

Auto Rename Tag
Auto Rename Tag

特徴

  • マークアップ言語を使った作業の一貫性を確保し、作業効率を高める
  • Emmetの省略形やスニペットとシームレスに動作

3. SVG Preview

SVG Previewは、Scalable Vector Graphics(SVG)を扱うウェブ開発者に便利です。SVGファイルのライブプレビューをエディター内に直接表示し、リアルタイムで変更を確認することができます。

SVG Preview
SVG Preview

特徴

  • プレビュー内のズームとパン
  • ウェブ開発者向け

4. HTML CSS Support

HTML CSS Supportは、HTMLファイル内のCSSサポートを強化してくれます。CSSプロパティのインテリジェントな提案と自動補完が特徴で、高速かつ正確な記述を行うことができます。

HTML CSS Support
HTML CSS Support

特徴

  • HTMLとCSSコードのインテリジェントな自動補完機能によって記述量を減らし、作業効率を向上
  • 既存のコードに基づくCSSクラスとIDの提案
  • ベンダープレフィックス付きのCSSプロパティ候補の生成
  • HTMLとCSSコードを高速生成するため、Emmetの略語をサポート

5. IntelliSense for CSS class names in HTML

HTMLで複雑なCSSクラス名を使用するとき、正確に覚えて手入力するのは大変な作業。そんなときに役立つのが、IntelliSense for CSS class names in HTMLです。この拡張機能には、CSSクラス名のインテリジェントな提案と自動補完機能があります。CSSファイルを分析し、使用可能なクラス名を一覧表示してくれるため、クラス名を簡単に選択でき、タイプミスなどの誤りを減らすことができます。

IntelliSense for CSS class names in HTML
IntelliSense for CSS class names in HTML

特徴

  • HTML、CSS、SCSS、およびLessファイル内のCSSクラス名のインテリジェントな自動補完
  • BootstrapやTailwind CSSなどのCSS フレームワークとシームレスに統合
  • クラス名をすぐに選択でき、生産性が向上される

6. CSS Peek

CSS Peekは、HTMLやJavaScriptコードから関連するCSSスタイルを確認することができる、CSS開発に便利な選択肢です。CSSクラスやIDの上にマウスカーソルを合わせるだけで、CSS Peekが対応するスタイルをウィンドウで表示し、ファイルを切り替える必要はありません。大規模なコードベースや複雑なCSSの依存関係を扱う際に重宝します。

CSS Peek
CSS Peek

特徴

  • インラインと外部CSSスタイルの両方をサポート
  • コードの読みやすさとナビゲーションの改善

7. GitLens

GitLensをインストールすると、エディターにGitの機能を直接統合することができます。コードのオーサーシップを調べたり、コミット履歴をレビューしたり、行ごとの注釈でコードの変更に関する貴重なインサイトを入手したりすることができます。

GitLens
GitLens

特徴

  • 各コード行のインラインGit注釈
  • コード作者、日付、メッセージを含むコミットの詳細がホバー時に表示
  • Git の注釈とコミット情報を示す、現在の行とコードレンズの注釈
  • Gitコマンドやリポジトリナビゲーションとのシームレスな統合

VS CodeのJavaScript拡張機能5選

JavaScriptの開発は、適切なツールを活用することで、生産性とコードの質を劇的に改善することができます。続いて、以下JavaScript開発向けの拡張機能を見ていきます。

1. ESLint

ESLintは、リンターと呼ばれる機能で、JavaScriptとTypeScriptのエラーを検出して、コーディング標準を実施し、コードの質を高めてくれます。

ESLint
ESLint

特徴

  • 記述中にリアルタイムでフィードバックを提供し、コードの問題を強調表示
  • プロジェクト固有の要件に基づいてルールをカスタマイズでき、コードベース全体の一貫性を確保される
  • エラーの検出に加えて、インデントや空白などの特定の問題も自動修正
  • プロジェクト固有の要件に基づいてプラグインやカスタムルールを使用できる

2. JavaScript (ES6) code snippets

JavaScript (ES6) code snippetsは、JavaScriptコードを書く時間と手間を削減できる、便利なコードスニペットを揃えています。

JavaScript (ES6) code snippets
JavaScript (ES6) code snippets

特徴

  • 一般的なJavaScript開発作業を効率化する豊富なコードスニペット
  • スニペットに含まれる動的プレースホルダーによって、変数名などの必要な情報を素早く書くことができ、コーディング効率が高まる
  • ES6の構文と機能に特化して設計されたスニペットによって、最新のJavaScript機能の活用が容易
  • コーディングスタイルやプロジェクトの要件に合わせて、独自のコードスニペットを修正、作成可能

3. Quokka.js

Quokka.jsを導入すると、コーディング中にリアルタイムでフィードバックと実行結果が表示されるように。これによって、開発ワークフローを大幅に効率化することができます。

Quokka.js
Quokka.js

特徴

  • 記述されたJavaScriptコードを即座に評価し、エディター内に結果をリアルタイムで表示
  • 出力と変数の値を示すインライン注釈で、コードの動作を理解しやすい
  • 各コード行の結果や効果を確認でき、デバッグやトラブルシューティングに有用
  • 値をログに記録しエディターに表示されるため、コードの実行フローをさらに可視化可能

4. npm Intellisense

npm Intellisenseを使用すると、npmパッケージのインポート時に自動補完機能が実装され、時間と手間を削減することができます。また、記述中にパッケージ名も提案してくれるため、プロジェクトへの依存関係のインポートも容易です。

npm Intellisense
npm Intellisense

特徴

  • 依存関係のインポート処理を高速化
  • JavaScriptやTypeScriptのプロジェクトでシームレスに動作

5. Import Cost

Import Costは、インポートされたJavaScriptやTypeScriptモジュールのサイズをリアルタイムで評価。インポートサイズがエディターに表示されるため、バンドルサイズを最適化し、潜在的なパフォーマンスのボトルネックを特定するのに便利です。

Import Cost
Import Cost

特徴

以下のような、様々なモジュールシステムがあります。

  • デフォルトインポート:import Func from 'utils';
  • コンテンツ全体のインポート:import * as Utils from 'utils';
  • 選択的インポート:import {Func} from 'utils';
  • エイリアスを使用した選択的インポート:import {orig as alias} from 'utils';
  • サブモジュールのインポート:import Func from 'utils/Func';
  • 必須:const Func = require('utils').Func;

VS CodeのPython拡張機能5選

Python用の拡張機能は多数あるため、適切なものを活用すれば、作業効率を飛躍的に高めることができます。以下、特に人気の高い5つの拡張機能をご紹介します。

1. Python

Python拡張機能は、Python開発者に必要不可欠。開発作業を効率化する機能一式が揃っており、Pythonコードの記述、デバッグ、テストを容易にします。

Python
Python

特徴

  • インテリジェントなコード補完、提案、自動インポート
  • Pythonフォーマッター(Blackやautopep8など)を使ったコード形式をサポートし、一貫したコードスタイルを保証
  • リアルタイムのコード分析を行い、pylintのようなツールを使用して潜在的なエラー、コーディング標準、ベストプラクティスに関するフィードバックを提供
  • ブレークポイント、変数表示、ステップ実行によって、VSCode内で直接Pythonコードのデバッグが可能
  • pytestやunittestのような一般的なPythonテストフレームワークとの統合による、シームレスなテストの実行とデバッグ
  • 仮想環境の管理と有効化で、プロジェクトの分離と依存関係を確実に管理

2. Pylance

Pylanceは、Pythonの言語サポート機能。Pythonコードのインテリセンス、コードナビゲーション、タイプチェックなどを強化してくれます。

Pylance
Pylance

特徴

  • 静的型解析と型推論に基づいた高速で正確なコード補完候補
  • 静的な型チェックでエラーを検出し、コードの質を向上
  • シンボル検索、定義表示、参照など、Pythonコード内の簡単なナビゲーション
  • Pythonオブジェクトの詳細なドキュメントと関数シグネチャを表示し、コードの読みやすさを高め、検索時間を短縮
  • 型のヒントと注釈を表示し、コードの可読性と保守性を高める
  • 起動と応答性に最適化し、スムーズな開発体験を実現

3. Jupyter

Jupyterは、VS Code内でJupyter Notebookを操作することができるようになる拡張機能。Jupyterのインタラクティブなコンピューティングの性能とVS Codeの機能と生産性をシームレスに統合することができます。

Jupyter
Jupyter

特徴

  • Markdown、コードセル、リッチテキストフォーマット対応のノートブックエディター
  • ノートブック内でコードセルを実行し、その出力をエディターに表示可能
  • セル間の簡単なナビゲーション、並び替え、ノートブックへのセルの追加
  • Pythonを含むさまざまな言語のカーネルを実行、停止、切り替え可能
  • ノートブックのあらゆる場所で変数と値を確認できる
  • HTML,PDF,Markdownなど、様々なフォーマットにノートブックをエクスポートし、他の人と共有可能

4. Django

Djangoは、その名の通り、VS CodeでのDjangoウェブフレームワーク開発のために特別に設計された拡張機能。Djangoプロジェクトの生産性を高めるさまざまな機能が組み込まれています。

Django
Django

特徴

  • Djangoプロジェクトやアプリケーションの作成、管理に便利な機能一式
  • モデル、ビュー、フォーム、テンプレートタグなど、Django固有の構文をコード補完
  • Djangoテンプレート構文を強調表示して、他のコード要素と視覚的に区別
  • Djangoテンプレートのレンダリングをエディター内でプレビュー可能
  • Django shellとの統合により、Djangoプロジェクト環境とのインタラクションが可能
  • Djangoの一般的なパターンやショートカットのコードスニペットを揃えているため、開発作業が効率化される

5. Flask Snippets

Flask Snippetsは、Flaskウェブフレームワークのコードスニペットを揃えた便利な拡張機能です。Flaskの一般的なパターンやショートカットに使えるスニペットを活用して、Flaskのコーディング作業を簡素化することができます。

Flask Snippets
Flask Snippets

特徴

  • ルートデコレータ、テンプレートレンダリング、データベース統合など、Flaskに特化した幅広いコードスニペット
  • 頻繁に使用されるFlaskコードパターンのショートカットで、コード記述量を減らし、開発時間を短縮
  • Flask開発に役立つ基本的なディレクトリ構造と必須ファイルを含む、Flaskのスケルトンを生成
  • Flaskのコマンドラインインタフェースとの統合により、VS Code内で直接Flaskのコマンドを実行可能
  • Flask固有のキーワード、関数、オブジェクトのコード補完を強化し、作業を効率化

開発作業が捗るVS Codeのその他の拡張機能4選

ここまでご紹介してきた拡張機能の他にも、あらゆるプログラミング言語やフレームワークを使った開発作業に役立つものが多数あります。最後に、以下4つの拡張機能もご紹介します。

1. GitHub Copilot

GitHub Copilotは、GitHubとOpenAIによって開発された革新的なAI搭載コーディングアシスタント。膨大なコードを消化した機械学習モデルを搭載し、インテリジェントなコードの提案と補完が提供されます。

GitHub Copilot
GitHub Copilot

特徴

  • コードのコンテキストを分析し、精度の高いコード補完を提供
  • JavaScript、Python、TypeScript、Go など、幅広いプログラミング言語をサポート
  • 関数、クラス、メソッドのドキュメントスニペットが生成され、APIやライブラリが理解しやすくなる
  • コードのコンテキストを理解し、プログラミングスタイルやパターンに沿った提案を生成

2. Tabnine AI Autocomplete

Tabnine AI Autocompleteは、コード補完を次のレベルに引き上げてくれる、AIを活用した自動補完拡張機能。大量のコードを学習した高度な機械学習モデルによって、非常に正確でコンテキストを考慮したコード候補が表示されます。

Tabnine AI Autocomplete
Tabnine AI Autocomplete

特徴

  • 記述したコードに基づいたインテリジェントな提案で開発作業を効率化
  • コンテキストに基づいて次のコード行を予測し、コーディング作業の手間が軽減される
  • 幅広いプログラミング言語をサポートし、あらゆるプロジェクトに活用可能

3. Markdown All in One

Markdown All in Oneは、VS CodeでMarkdownファイルを扱う際に役立つ包括的な拡張機能。豊富な機能とショートカットによって、Markdownドキュメントの作成と編集を簡素化。基本的なフォーマットから高度な機能まで、Markdownユーザーの記述体験と生産性を向上してくれます。

Markdown All in One
Markdown All in One

特徴

  • Markdownコンテンツの構文強調表示とプレビュー
  • 一般的なMarkdown要素とフォーマットのショートカット
  • 簡単なナビゲーションを目的とした目次生成
  • 効率的な編集とフォーマットのためのキーボードショートカット

4. Regex Previewer

Regex Previewerは、VS Codeで正規表現を扱う際に活用したい拡張機能です。正規表現をリアルタイムでテスト、デバッグし、目的のパターンに正確に一致することができます。エディター内で正規表現をすばやく繰り返し、微調整できるため、作業時間が短縮されます。

Regex Previewer
Regex Previewer

特徴

  • エディター内での正規表現一致のリアルタイムプレビュー
  • マッチの強調表示とグループのキャプチャ
  • 正規表現のインタラクティブなデバッグとテスト
  • 複数の正規表現と機能

まとめ

豊富な拡張機能とカスタマイズ可能な機能を備えたVS Codeは、ウェブプロジェクトに適した万能コードエディターです。アプリケーションデータベースウェブサイトなどのプロジェクトをKinstaでホスティングすれば、保守管理も効率化されます。

あなたが1番気に入っているVS Codeの拡張機能は何ですか?この記事でご紹介したもの以外にも、おすすめの拡張機能があれば、ぜひ以下のコメント欄で共有してください。

Joel Olawanle Kinsta

Kinstaでテクニカルエディターとして働くフロントエンド開発者。オープンソースをこよなく愛する講師でもあり、JavaScriptとそのフレームワークを中心に200件以上の技術記事を執筆している。