Visual Studio Code拡張機能

Qiita投稿記事数ランキングトップ100

収集日:2022/09/20

Qiita APIを使用してVisual Studio Codeの拡張機能を紹介している記事を収集しました。2018年1月1日から2022年9月19日までの投稿記事を収集してます。 紹介記事数が多い順にランキング形式で紹介します。

Visual Studio Codeを日本語化する拡張機能。英語が苦手な方は必須

コードをフォーマットする拡張機能。様々な言語に対応している(JavaScript · TypeScript · Flow · JSX · JSON、CSS · SCSS · Less、HTML · Vue · Angular HANDLEBARS · Ember · Glimmer、GraphQL · Markdown · YAMLなど)

Visual Studio Codeからリモート環境に直接接続し、アプリ開発などができる拡張機能。リモートのソースコードやファイルの確認、編集も可能。

ソースコードを自動フォーマットする拡張機能

Gitのコミット履歴、差分等を確認できる拡張機能。コミットした人や日時、コメントなどもコード上に表示される

Pythonのデバッグ、コードフォーマット、「Jupyter」セル内の出力イメージをコピーなどができる拡張機能

Dockerコンテナ上で動作している開発環境に接続して、コンテナ上にいることを意識せずにVSCodeで開発できる拡張機能

インデントを階層ごとに色分けしてカラフルに表示してくれる拡張機能

Visual Studio Codeから簡易ローカルサーバーを立ち上げて開発できる拡張機能

Visual Studio Codeで英単語のスペルチェックを行う拡張機能

CSV ファイルを色分けして見やすく表示する拡張機能。マウスオーバーで列情報を表示したり、SQLのような言語でクエリ実行も可能。

VSCode上でMarkdownの記述が便利になる拡張機能。ショートカット、目次作成、自動補完などの機能がある

Visual Studio Codeで簡単に LaTeX を編集・タイプセットする拡張機能

行末などコードに余計なスペースがある場合にハイライト表示する拡張機能。余計なスペースを一括削除する機能もある

ファイルのアイコンをマテリアルデザインにできる拡張機能。

WSL(Windows Subsystem for Linux)環境を用いた実行やデバッグ、コードナビゲーションがVSCode上でできる拡張機能

コンテナー化されたアプリケーションの構築、管理、デプロイを支援するDocker拡張機能

複数のコンピューター間で Visual Studio Codeの設定を同期できる

開始タグを修正すると閉じタグも自動修正してくれる拡張機能

全角スペースを可視化してくれる拡張機能

Gitのログや更新履歴、ブランチ間のコミットを比較できる拡張機能

AIを利用しコーディングを支援してくれる拡張機能。Python、Java、TypeScript、JavaScriptなどに対応

Markdownの構文やスタイルが正しいか自動検出する拡張機能。間違っている場合は波線で表示。

ファイル名を予測し自動補完してくれる拡張機能

MarkdownをPDFに変換する拡張機能。HTML、画像ファイル(PNG、JPEG)にも変換可能。

Gitのコミットグラフを分かりやすく綺麗に表示してくれる拡張機能。

Javaの開発環境をサポートする拡張機能。デバッグ、テスト、プロジェクト管理などが可能。

エクスプローラーのファイルをアイコン表示してくれる拡張機能。

インデントや改行コードなどコーディングスタイルの一貫性を保つ拡張機能。チーム開発でコーディングスタイルを統一したい場合などにオススメ。

C/C++拡張機能。コードの構文色分けやナビゲーション、コード補完、デバッグ機能などを提供。

VSCode上でMarkdownのプレビューを確認できる拡張機能。外部ファイルのインポート、Markdownに埋め込んだコードブロックの実行などが可能。

VSCode上でREST APIのテストができる拡張機能。リクエストコマンドやレスポンスをテキスト形式で保存できる。

ファイルパスの補完機能を細かく設定できる拡張機能。

Python docstringsのテンプレートを自動生成する拡張機能。

Rubyの拡張機能。コード補完や構文強調表示、言語構成、デバッグなどをサポート

開始タグを書き終えると自動で閉じタグを補完してくれる拡張機能。終了タグの書き忘れ対策に最適。

PHPのコード補完やコードチェックを行う拡張機能。

Vue.jsの開発ツール。シンタックスハイライト、スニペット、コードフォーマット、デバッグなどの機能を提供

VSCode上でSSH接続し、ファイルやフォルダを操作できる拡張機能。

VSCode上でコードを手軽に実行できる拡張機能。C, C++, Java, JavaScript, PHP, Python, Perl, Perl 6, Ruby, Go, Lua, Groovy, PowerShell, BAT/CMD, BASH/SH, F# Script, C# Script, C# (.NET Core), VBScript, TypeScriptなど多くの言語に対応。

VSCode上で簡単にDraw.ioで描画できる拡張機能。フローチャートやネットワーク図、ER図などを作成できる。

VSCode上でVimのように操作できる拡張機能。

VSCode上でAzure Functionsを開発してAzureにデプロイできる拡張機能。

ログファイルをシンタックスハイライトして見やすくしてくれる拡張機能。

Markdownファイルにクリップボードの画像を貼り付ける拡張機能。

コード内にブックマークをつけて移動できる拡張機能。

C#の拡張機能。スニペット、自動補完、変数名やクラス名等のシンボルを一括で変更などが可能

コメント欄に書いた「TODO」や「FIXME」などの文字をハイライト表示してくれる拡張機能。単語の追加や色の指定も可能。

コメントを色分けして管理できる拡張機能。コメントの最初にタグ(「*」「!」「?」など)を入れるとタグ毎に色分けされる。

CSSやSCSSのコードを解析しエラーなどを表示してくれる拡張機能。

シーケンス図やクラス図、状態遷移図をVSCode上で描ける拡張機能。

VSCodeでPHPのデバッグ機能を提供する拡張機能。ステップ実行やスタックの追跡などが可能。

VS CodeでテキストファイルやMarkdownファイルの日本語の文章をチェックする拡張機能。文章内の問題のある箇所をマーキングし問題パネルにエラー内容を表示。

正規表現にマッチするかプレビューして確認できる拡張機能。

YAMLのフォーマットやエラーチェックをしてくれる拡張機能。

「Sass」または「Scss」をCSSにコンパイルしブラウザもリロードしてくれる拡張機能。

コメントにTODOと書いた文字のみを抽出しツリー状にまとめてくれる拡張機能

各プロジェクトのソースファイルを管理しやすくする拡張機能。一つのウィンドウで複数プロジェクトを簡単に切り替えて表示することができるので便利。

Python開発を便利にしてくれる拡張機能。コード補完や型チェック、自動インポートやdocstring参照などの機能を提供。

Jupyter notebookサポートする拡張機能。対話型プログラミング、デバッグ、インテリセンスなどの機能を提供

リアルタイムで他のユーザーと共同で編集やデバッグができる拡張機能。

Markdownにフローチャートやガントチャート、円グラフなどを描けてプレビューできる拡張機能。

HTMLのタグにクラスを記述する際、クラス名を自動補完してくれる拡張機能。ワークスペース内のCSSファイルだけでなくlink要素を介して参照される外部ファイルのクラス名も表示する

コードを自動でフォーマットする拡張機能。JavaScript、JSON、HTML(Pug)、CSS(SCSS)等のファイルに対応。

C/C++, Rustなどをデバッグできる拡張機能。条件付きブレークポイント、関数ブレークポイント、ログポイントやリモートデバッグなどを提供

DocBlockの記述を容易にしてくれる拡張機能。クラスや関数、プロパティの上に「/**」と入力するとdocコメントを補完。

HTMLでクラス名入力時にCSSファイルのクラスから候補を表示してくれる拡張機能。ワークスペース内のCSSファイルのみ対

Rust開発をサポートする拡張機能。コード補完やフォーマット、エラーチェックなどを提供

テキストファイルやマークダウンファイルの文章構成を行う拡張機能。

OpenAPI SpecificationドキュメントをVS Code上でプレビューすることができる拡張機能。

C#のコメント簡単にする拡張機能。「///」と入力すると「summary」などのコメントを補完。

Rubyなどで、classやdef の「end」を改行時に自動補完する拡張機能。

選択した文字列やクリップボードにある文字列と比較できる拡張機能

VSCode上で静的コード解析を実行しエディタ上にリアルタイムに結果を表示する拡張機能

VSCodeのエクスプローラー上でファイルの複製を行う拡張機能。

プルリクエストやIssueをVSCode上で参照・編集できる拡張機能。diffやレビューコメントなども確認できる。

VSCode上でExcelファイルやCSVファイルを見やすく表示できる拡張機能。

Svelteファイルに補完やハイライトを行う拡張機能

Emacsのキーバインドを再現できる拡張機能。マルチカーソルにも対応

VSCodeでUnityのデバッグができる拡張機能。

Rubyのコード補完、インテリセンス、インラインドキュメントを表示する拡張機能

HTMLのタグやクラスに適用されているスタイルを素早く確認できる拡張機能

Denoの開発環境をVSCode上に作成する拡張機能。コード補完やフォーマット、インテリセンスやエラーチェックなどを提供。

VSCode上でJava開発をサポートする拡張機能。コード補完、リファクタリング、コンパイルエラー、フォーマットなどをサポート

Extension for Visual Studio Code - Extensions for developing on the Salesforce Platform

通常のLive Share拡張機能にチャットとオーディオ機能を追加した拡張機能

PHPのコーディング時にエラーの検出や自動整形を行う拡張機能

エディタ上にエラーメッセージを表示して、エラーをハイライトする拡張機能

カラーコードをハイライトしてエディタ上で色が判断できる拡張機能。

Tailwind CSSのコード補完ができる拡張機能。

ワークスペース毎にカラーを変更してくれる拡張機能。複数のワークスペースウィンドウを開いている場合、直感的に判断できる。

VSCodeからSFTPを使用してサーバーにファイルをアップロードできる拡張機能。ローカルとリモートでファイル比較や同期も可能

ログファイルを自動でハイライト表示する拡張機能。

マークダウンからプレゼンテーションのスライドを生成する拡張機能

「.env」ファイルにシンタックスハイライトしてくれる拡張機能

C++のCMAKEツールをサポートする拡張機能

タイピングする毎に炎や花火のエフェクトを入れられる拡張機能。テンション上げたいときタイピングを楽しみたい時にオススメ。

Java Spring Boot 開発環境をVSCode上に構築できる拡張機能

import/require文で読み込むファイルのサイズをチェックできる拡張機能

JavaScript ES6用のスニペットを提供してくれる拡張機能

@ハクト

サービス作り・デザイン好き。70年代生まれのWEBエンジニア。WEBパーツをCSSでカスタマイズしてコピペできるサービスを運営中「Pa-tu」。実装したWEBパーツやツールを利用してWEB情報やライフハックを発信してます。

Twitter