2022年のStack Overflow Developer Surveyによれば、アンケート回答者7万1,010人のうち、74.48%がコードエディター「Visual Studio Code（VS Code）」を使用していると答えています。その豊富な機能と優れたカスタマイズ性から、VS Codeは世界中の開発者に愛用されています。
VSCodeの真の魅力は、拡張機能の膨大なエコシステムにあります。拡張機能を活用することで、VSCodeの本領が発揮され、機能性と生産性をまったく新たなレベルに引き上げることができます。
JavaScriptのプロ、Pythonの第一人者、一般的な技術スタックを扱う開発者、あらゆるユーザーに便利な拡張機能が揃っています。
今回は、生産性を高めてくれるVSCodeの拡張機能を厳選してご紹介していきます。
VS Codeの基本拡張機能9選
まずは、生産性を向上し、VS Codeでより良いユーザー体験を得るための基本拡張機能から見ていきましょう。
1. Prettier
Prettierは、広く使用されているコードフォーマッターで、コードスタイルをプロジェクト全体で整形することができます。あらゆるプログラミング言語をサポートし、あらかじめ定義された一定のルールに従ってコードを自動整形することで、可読性を高め、スタイルに関連する問題を軽減することができます。
特徴
- JavaScript、TypeScript、CSS、HTMLなど、さまざまなプログラミング言語をサポート
- 定義したルールに従ってコードを自動整形
- プロジェクト全体でコードスタイルを一貫
- VS Codeの書式設定が統合されており、保存時やキーボードショートカットでトリガー可能
2. Remote – SSH
Remote – SSHを使用すると、安全なSSHプロトコルでリモートサーバーや仮想マシンで作業を行うことができます。リモート環境のローカルVS Codeインスタンスから直接ファイルの編集、コマンドの実行、アプリケーションのデバッグが可能になり、シームレスな開発環境を確保することができます。
特徴
- SSHを使用してリモートサーバーまたは仮想マシンに接続
- リモートシステム上のファイルをローカルであるかのように編集可能
- リモートマシン上でコマンドやスクリプトを実行
- リモート環境で動作するアプリケーションのデバッグ
- VS Codeの豊富な編集/デバッグ機能とのシームレスな統合
3. Live Share
Live Shareは、開発環境を共有することで、他の開発者とのリアルタイムなコラボレーションを可能にする拡張機能です。編集、デバッグ、ターミナルセッションを共有することができ、チームでの業務が効率化され、シームレスなペアプログラミングを行うことができます。
特徴
- 他の開発者とのリアルタイムコラボレーション
- 編集、デバッグ、ターミナルセッションの共有
- チーム間でのコミュニケーションに便利な統合チャット機能
- 共同コードレビューとペアプログラミング
4. Better Comments
Better Commentsを使用すると、コードに色分けされたコメントを追加し、異なるタイプのコメントを簡単に区別できるようになります。また、接頭辞を使って重要なメモ、TODO、警告などを強調表示することも。
特徴
- カスタムコメントタイプと接頭辞をサポート
- コードの読みやすさと構成力を改善
5. CodeSnap
CodeSnapを活用すると、コードのスクリーンショットを簡単に撮ることができます。コードスニペットをキャプチャし、共有可能な画像ファイルを生成するため、ドキュメンテーション、チュートリアル、SNSプラットフォームでのコードの共有に便利です。
特徴
- テーマ、フォントサイズなど、編集可能なコードのスナップショット
- PNG、JPEG、SVGなど様々な画像形式をサポート
6. Code Runner
Code Runnerは、VS Code内からさまざまなプログラミング言語のコードスニペットや、ファイル全体を素早く実行することができる拡張機能です。コードエディターと別のターミナルを切り替える必要がなくなり、コードのテストと実行を効率化することができます。
特徴
- 様々なプログラミング言語でコードスニペットやファイル全体を実行
- JavaScript、Python、Java、C++など、幅広いプログラミング言語をサポート
- カスタマイズ可能な実行設定とコマンドショートカット
- ターミナルまたは出力ウィンドウでコードを実行
- 入出力を伴うコードを実行
- ファイルの言語に基づき適切なコンパイラまたはインタプリタを自動選択
7. Path Intellisense
Path Intellisenseには、コード内のファイルパスを高度に自動補完し、ファイルパスの入力を簡素化します。プロジェクト内でファイルやモジュールを参照する際のタイプミスをなくし、正確性を高めることができます。
特徴
- 相対パスと絶対パスをサポート
- 様々なプログラミング言語やフレームワークとシームレスに動作
8. vscode-icons
vscode-iconsを使えば、デフォルトのファイルアイコンを魅力的かつ直感的なアイコンに置き換えることも。コーディング作業が視覚的に楽しくなること間違いなしです。
特徴
- さまざまなファイルタイプ、フォルダ、一般的なプログラミング言語のアイコンが豊富
- 様々なカスタマイズ機能があり、好みのコーディングスタイルに合わせてアイコンサイズや不透明度の調整、アイコンセットを有効/無効にすることができる
- 特定のアイコンをフォルダに割り当て、プロジェクトを視覚的に差別化
9. Night Owl
Night Owlは、美しいVS Code用テーマ。目に優しい落ち着いた色調のテーマを実装することで、眼精疲労が軽減され、コーディング作業が捗ります。
特徴
- 長時間のコーディング作業による目の疲れを軽減するダークテーマ
- 幅広いプログラミング言語に対応した、鮮やかで見やすいシンタックスハイライト
- 複数のアクセントカラーからテーマをパーソナライズ
- 高コントラストで読みやすいテキスト
VS Codeのウェブ開発拡張機能7選
ウェブ開発業界は日進月歩。作業効率を高めてくれるツールや技術は、なんとしても取り入れたいものです。続いて、ウェブ開発に関連したおすすめの拡張機能をご紹介します。
1. Live Server
Live Serverは、自動更新機能を持つローカル開発サーバーを構築できる画期的な拡張機能。HTML、CSS、JavaScriptの変更をリアルタイムでプレビューでき、ブラウザを手動で更新する手間を省くことができます。
特徴
- 自動更新機能組み込みのローカル開発サーバーを作成
- ファイル変更時にブラウザを自動更新
- HTML、CSS、JavaScriptなど、さまざまなウェブ開発ファイルをサポート
- ポート番号、ルートディレクトリなどのサーバー設定の変更
2. Auto Rename Tag
Auto Rename Tagは、開始タグまたは終了タグを変更すると、HTMLまたはXMLタグの名前も自動的に変更される便利な拡張機能です。マークアップ言語を使った作業が効率化され、一貫性も保たれます。
特徴
- マークアップ言語を使った作業の一貫性を確保し、作業効率を高める
- Emmetの省略形やスニペットとシームレスに動作
3. SVG Preview
SVG Previewは、Scalable Vector Graphics（SVG）を扱うウェブ開発者に便利です。SVGファイルのライブプレビューをエディター内に直接表示し、リアルタイムで変更を確認することができます。
特徴
- プレビュー内のズームとパン
- ウェブ開発者向け
4. HTML CSS Support
HTML CSS Supportは、HTMLファイル内のCSSサポートを強化してくれます。CSSプロパティのインテリジェントな提案と自動補完が特徴で、高速かつ正確な記述を行うことができます。
特徴
- 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ファイルを分析し、使用可能なクラス名を一覧表示してくれるため、クラス名を簡単に選択でき、タイプミスなどの誤りを減らすことができます。
特徴
- HTML、CSS、SCSS、およびLessファイル内のCSSクラス名のインテリジェントな自動補完
- BootstrapやTailwind CSSなどのCSS フレームワークとシームレスに統合
- クラス名をすぐに選択でき、生産性が向上される
6. CSS Peek
CSS Peekは、HTMLやJavaScriptコードから関連するCSSスタイルを確認することができる、CSS開発に便利な選択肢です。CSSクラスやIDの上にマウスカーソルを合わせるだけで、CSS Peekが対応するスタイルをウィンドウで表示し、ファイルを切り替える必要はありません。大規模なコードベースや複雑なCSSの依存関係を扱う際に重宝します。
特徴
- インラインと外部CSSスタイルの両方をサポート
- コードの読みやすさとナビゲーションの改善
7. GitLens
GitLensをインストールすると、エディターにGitの機能を直接統合することができます。コードのオーサーシップを調べたり、コミット履歴をレビューしたり、行ごとの注釈でコードの変更に関する貴重なインサイトを入手したりすることができます。
特徴
- 各コード行のインラインGit注釈
- コード作者、日付、メッセージを含むコミットの詳細がホバー時に表示
- Git の注釈とコミット情報を示す、現在の行とコードレンズの注釈
- Gitコマンドやリポジトリナビゲーションとのシームレスな統合
VS CodeのJavaScript拡張機能5選
JavaScriptの開発は、適切なツールを活用することで、生産性とコードの質を劇的に改善することができます。続いて、以下JavaScript開発向けの拡張機能を見ていきます。
1. ESLint
ESLintは、リンターと呼ばれる機能で、JavaScriptとTypeScriptのエラーを検出して、コーディング標準を実施し、コードの質を高めてくれます。
特徴
- 記述中にリアルタイムでフィードバックを提供し、コードの問題を強調表示
- プロジェクト固有の要件に基づいてルールをカスタマイズでき、コードベース全体の一貫性を確保される
- エラーの検出に加えて、インデントや空白などの特定の問題も自動修正
- プロジェクト固有の要件に基づいてプラグインやカスタムルールを使用できる
2. JavaScript (ES6) code snippets
JavaScript (ES6) code snippetsは、JavaScriptコードを書く時間と手間を削減できる、便利なコードスニペットを揃えています。
特徴
- 一般的なJavaScript開発作業を効率化する豊富なコードスニペット
- スニペットに含まれる動的プレースホルダーによって、変数名などの必要な情報を素早く書くことができ、コーディング効率が高まる
- ES6の構文と機能に特化して設計されたスニペットによって、最新のJavaScript機能の活用が容易
- コーディングスタイルやプロジェクトの要件に合わせて、独自のコードスニペットを修正、作成可能
3. Quokka.js
Quokka.jsを導入すると、コーディング中にリアルタイムでフィードバックと実行結果が表示されるように。これによって、開発ワークフローを大幅に効率化することができます。
特徴
- 記述されたJavaScriptコードを即座に評価し、エディター内に結果をリアルタイムで表示
- 出力と変数の値を示すインライン注釈で、コードの動作を理解しやすい
- 各コード行の結果や効果を確認でき、デバッグやトラブルシューティングに有用
- 値をログに記録しエディターに表示されるため、コードの実行フローをさらに可視化可能
4. npm Intellisense
npm Intellisenseを使用すると、npmパッケージのインポート時に自動補完機能が実装され、時間と手間を削減することができます。また、記述中にパッケージ名も提案してくれるため、プロジェクトへの依存関係のインポートも容易です。
特徴
- 依存関係のインポート処理を高速化
- JavaScriptやTypeScriptのプロジェクトでシームレスに動作
5. Import Cost
Import Costは、インポートされたJavaScriptやTypeScriptモジュールのサイズをリアルタイムで評価。インポートサイズがエディターに表示されるため、バンドルサイズを最適化し、潜在的なパフォーマンスのボトルネックを特定するのに便利です。
特徴
以下のような、様々なモジュールシステムがあります。
- デフォルトインポート：
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フォーマッター（Blackやautopep8など）を使ったコード形式をサポートし、一貫したコードスタイルを保証
- リアルタイムのコード分析を行い、pylintのようなツールを使用して潜在的なエラー、コーディング標準、ベストプラクティスに関するフィードバックを提供
- ブレークポイント、変数表示、ステップ実行によって、VSCode内で直接Pythonコードのデバッグが可能
- pytestやunittestのような一般的なPythonテストフレームワークとの統合による、シームレスなテストの実行とデバッグ
- 仮想環境の管理と有効化で、プロジェクトの分離と依存関係を確実に管理
2. Pylance
Pylanceは、Pythonの言語サポート機能。Pythonコードのインテリセンス、コードナビゲーション、タイプチェックなどを強化してくれます。
特徴
- 静的型解析と型推論に基づいた高速で正確なコード補完候補
- 静的な型チェックでエラーを検出し、コードの質を向上
- シンボル検索、定義表示、参照など、Pythonコード内の簡単なナビゲーション
- Pythonオブジェクトの詳細なドキュメントと関数シグネチャを表示し、コードの読みやすさを高め、検索時間を短縮
- 型のヒントと注釈を表示し、コードの可読性と保守性を高める
- 起動と応答性に最適化し、スムーズな開発体験を実現
3. Jupyter
Jupyterは、VS Code内でJupyter Notebookを操作することができるようになる拡張機能。Jupyterのインタラクティブなコンピューティングの性能とVS Codeの機能と生産性をシームレスに統合することができます。
特徴
- Markdown、コードセル、リッチテキストフォーマット対応のノートブックエディター
- ノートブック内でコードセルを実行し、その出力をエディターに表示可能
- セル間の簡単なナビゲーション、並び替え、ノートブックへのセルの追加
- Pythonを含むさまざまな言語のカーネルを実行、停止、切り替え可能
- ノートブックのあらゆる場所で変数と値を確認できる
- HTML，PDF，Markdownなど、様々なフォーマットにノートブックをエクスポートし、他の人と共有可能
4. Django
Djangoは、その名の通り、VS CodeでのDjangoウェブフレームワーク開発のために特別に設計された拡張機能。Djangoプロジェクトの生産性を高めるさまざまな機能が組み込まれています。
特徴
- Djangoプロジェクトやアプリケーションの作成、管理に便利な機能一式
- モデル、ビュー、フォーム、テンプレートタグなど、Django固有の構文をコード補完
- Djangoテンプレート構文を強調表示して、他のコード要素と視覚的に区別
- Djangoテンプレートのレンダリングをエディター内でプレビュー可能
- Django shellとの統合により、Djangoプロジェクト環境とのインタラクションが可能
- Djangoの一般的なパターンやショートカットのコードスニペットを揃えているため、開発作業が効率化される
5. Flask Snippets
Flask Snippetsは、Flaskウェブフレームワークのコードスニペットを揃えた便利な拡張機能です。Flaskの一般的なパターンやショートカットに使えるスニペットを活用して、Flaskのコーディング作業を簡素化することができます。
特徴
- ルートデコレータ、テンプレートレンダリング、データベース統合など、Flaskに特化した幅広いコードスニペット
- 頻繁に使用されるFlaskコードパターンのショートカットで、コード記述量を減らし、開発時間を短縮
- Flask開発に役立つ基本的なディレクトリ構造と必須ファイルを含む、Flaskのスケルトンを生成
- Flaskのコマンドラインインタフェースとの統合により、VS Code内で直接Flaskのコマンドを実行可能
- Flask固有のキーワード、関数、オブジェクトのコード補完を強化し、作業を効率化
開発作業が捗るVS Codeのその他の拡張機能4選
ここまでご紹介してきた拡張機能の他にも、あらゆるプログラミング言語やフレームワークを使った開発作業に役立つものが多数あります。最後に、以下4つの拡張機能もご紹介します。
1. GitHub Copilot
GitHub Copilotは、GitHubとOpenAIによって開発された革新的なAI搭載コーディングアシスタント。膨大なコードを消化した機械学習モデルを搭載し、インテリジェントなコードの提案と補完が提供されます。
特徴
- コードのコンテキストを分析し、精度の高いコード補完を提供
- JavaScript、Python、TypeScript、Go など、幅広いプログラミング言語をサポート
- 関数、クラス、メソッドのドキュメントスニペットが生成され、APIやライブラリが理解しやすくなる
- コードのコンテキストを理解し、プログラミングスタイルやパターンに沿った提案を生成
2. Tabnine AI Autocomplete
Tabnine AI Autocompleteは、コード補完を次のレベルに引き上げてくれる、AIを活用した自動補完拡張機能。大量のコードを学習した高度な機械学習モデルによって、非常に正確でコンテキストを考慮したコード候補が表示されます。
特徴
- 記述したコードに基づいたインテリジェントな提案で開発作業を効率化
- コンテキストに基づいて次のコード行を予測し、コーディング作業の手間が軽減される
- 幅広いプログラミング言語をサポートし、あらゆるプロジェクトに活用可能
3. Markdown All in One
Markdown All in Oneは、VS CodeでMarkdownファイルを扱う際に役立つ包括的な拡張機能。豊富な機能とショートカットによって、Markdownドキュメントの作成と編集を簡素化。基本的なフォーマットから高度な機能まで、Markdownユーザーの記述体験と生産性を向上してくれます。
特徴
- Markdownコンテンツの構文強調表示とプレビュー
- 一般的なMarkdown要素とフォーマットのショートカット
- 簡単なナビゲーションを目的とした目次生成
- 効率的な編集とフォーマットのためのキーボードショートカット
4. Regex Previewer
Regex Previewerは、VS Codeで正規表現を扱う際に活用したい拡張機能です。正規表現をリアルタイムでテスト、デバッグし、目的のパターンに正確に一致することができます。エディター内で正規表現をすばやく繰り返し、微調整できるため、作業時間が短縮されます。
特徴
- エディター内での正規表現一致のリアルタイムプレビュー
- マッチの強調表示とグループのキャプチャ
- 正規表現のインタラクティブなデバッグとテスト
- 複数の正規表現と機能
まとめ
豊富な拡張機能とカスタマイズ可能な機能を備えたVS Codeは、ウェブプロジェクトに適した万能コードエディターです。アプリケーション、データベース、ウェブサイトなどのプロジェクトをKinstaでホスティングすれば、保守管理も効率化されます。
あなたが1番気に入っているVS Codeの拡張機能は何ですか？この記事でご紹介したもの以外にも、おすすめの拡張機能があれば、ぜひ以下のコメント欄で共有してください。
コメントを残す