6
2

Delete article

Deleted articles cannot be recovered.

Draft of this article would be also deleted.

Are you sure you want to delete this article?

Visual Studio CodeAdvent Calendar 2024

Day 5

VS Codeでおすすめの拡張機能まとめ

Last updated at Posted at 2024-12-04

VS Code をさらに便利にするためのおすすめ拡張機能のリストです。自分が感じた開発の効率化やコード品質向上に役立つものを厳選しています!

vscode-tailwindcss

Tailwind CSS を利用している開発者向けの拡張機能です。Tailwind のクラス名補完を行い、リアルタイムでスタイルを確認できるため、CSS のコーディングがよりスムーズになります。

npm-intellisense

JavaScript や TypeScript の開発に便利な拡張機能です。インポート時に npm パッケージ名の候補が表示されるため、パッケージ名を一々確認する手間が省けます。

path-intellisense

ファイルパスの補完機能を提供する拡張機能です。特に大規模なプロジェクトで、ファイルパスを素早く入力できるようになり、作業効率がアップします。

vscode-eslint

JavaScript のコード品質を保つために、ESLint を使用してリアルタイムでエラーや警告を表示します。コードの品質を維持し、バグを減らすのに最適です。

gitlens

Git の変更履歴や差分を視覚的に表示する強力なツールです。誰が、いつ、どのようにコードを変更したかを簡単に確認できます。

vscode-html-css

HTML ファイル内で CSS クラスや ID の補完をサポートします。CSS のスタイル名を覚える必要が減り、効率が上がります。

prettier-vscode

コード整形ツール Prettier を VS Code 上で使用するための拡張機能です。自動でコードフォーマットを行い、コードの見た目を統一します。

auto-rename-tag

HTML や JSX のタグを自動でリネームする拡張機能です。開始タグまたは終了タグを変更すると、対応するもう片方も自動で変更されます。

chatgpt-vscode

AI を活用したコード補完機能で、コーディングのアイデアや質問に対してリアルタイムで支援を提供します。開発中の疑問解消に役立ちます。

rest-client

API のテストや実行を VS Code 内で行えるようにする拡張機能です。API のエンドポイントを手軽にテストでき、API 開発を効率化します。

rainbow-csv

CSV ファイルのカラムを色分けして表示することで、視覚的にデータを把握しやすくする拡張機能です。データ管理に便利です。

git-graph

リポジトリのコミット履歴をグラフで表示するツールです。ブランチやマージの流れを可視化でき、作業内容が把握しやすくなります。

zenkaku

日本語の全角スペースや英数字などを強調表示する拡張機能です。日本語を扱う際に役立ち、意図しない全角文字の混入を防ぎます。

vscode-docker

Docker を利用した開発に便利な拡張機能で、コンテナの管理や Dockerfile のサポートを提供します。Docker 開発がスムーズに行えます。

language-pack-ja

VS Code を日本語化するための拡張機能です。日本語での操作が可能になり、使いやすさが向上します。

debugpy

Python のデバッグツールです。ブレークポイントを設定してコードの流れを確認し、バグを迅速に特定できます。

python

Python のコード補完やエラーチェックを行う公式拡張機能で、Python 開発には欠かせません。コードの自動フォーマットやリンティングも可能です。

vscode-pylance

Python コードの静的解析ツールで、より詳細なエラーチェックと型推論が行えます。コード品質の向上に貢献します。

remote-containers

Docker コンテナ内での開発をサポートする拡張機能です。ローカル環境に依存せず、再現性のある開発環境を提供します。

cpptools

C++ のコード補完やデバッグ機能を提供する公式拡張機能です。C++ 開発者にとって便利なツールです。

remote-explorer

リモート環境の管理を容易にする拡張機能です。リモート開発がスムーズに行え、ローカルとリモートの操作を統合できます。

liveshare

共同開発をサポートする拡張機能で、他の開発者とリアルタイムでコラボレーションが可能です。リモートでもチーム開発が行えます。
https://marketplace.visualstudio.com/items?itemName=ms-vsliveshare.vsliveshare

indent-rainbow

インデントのレベルに応じて色を付けることで、コードの階層構造を把握しやすくします。ネストの多いコードでも視覚的に確認できます。

material-icon-theme

ファイルアイコンをカスタマイズし、視覚的に見やすくする拡張機能です。プロジェクト内のファイル構造が把握しやすくなります。

trailing-spaces

コード内の不要な空白を強調表示し、自動削除できる拡張機能です。コードのクリーンさを保つのに役立ちます。

code-spell-checker

コード内のスペルミスをチェックする拡張機能です。変数名やコメントの綴りを確認し、タイプミスを防ぎます。

tabnine-vscode

AI を活用したコード補完エンジンで、最適なコード補完候補を提示します。生産性が向上し、コーディングの効率が上がります。

errorlens

コードエラーや警告を行内で強調表示する拡張機能です。問題箇所を視覚的に確認しやすくなり、バグの早期発見に役立ちます。

intellicode-api-usage-examples

API の使用例を提示し、API の理解を深めるのに役立つ拡張機能です。コード例から API の活用方法が学べます。

vscodeintellicode

AI を利用したコード補完支援機能で、最適なコード候補を提供します。さまざまなプログラミング言語で効率的にコードを作成できます。

javascriptsnippets

JavaScript のスニペット集で、基本的な構文を素早く入力できるようにします。JavaScript のコーディング効率を高めたい方に最適です。

6
2
1

Register as a new user and use Qiita more conveniently

  1. You get articles that match your needs
  2. You can efficiently read back useful information
  3. You can use dark theme
What you can do with signing up
6
2

Delete article

Deleted articles cannot be recovered.

Draft of this article would be also deleted.

Are you sure you want to delete this article?