3644 文字
18 分
VS コード拡張機能

概要#

生産性を向上させ、さまざまな開発ドメイン全体でスキルを向上させるために設計された、必須の VS Code 拡張機能の厳選されたコレクションを探索してください。 これらの拡張機能は、簡単にナビゲーションできるようにカテゴリごとにグループ化されています。


クリーンなコードとリファクタリング#

TIP

これらの拡張機能を使用すると、クリーンで保守しやすいコードを維持でき、リファクタリング、メトリクス、コメント機能の向上のためのツールが提供されます。 :::- コード メトリクス: コードの複雑さをステータス バーに直接表示し、保守性の分析に役立ちます。

  • Abracadabra、リファクタリング: JavaScript/TypeScript でのシンボルの名前変更や変数の抽出などのリファクタリング タスクを自動化します。
  • Hocus Pocus: 関数、変数、クラスの作成、または使用からのスイッチケースを簡素化します。
  • SonarLint: コード内のバグとセキュリティ問題を、実用的な提案とともに強調表示します。
  • ESLint: JavaScript/TypeScript コードの問題を特定して修正するために ESLint を統合します。
  • コメントの改善: 色分けされたタグによりコメントの読みやすさが向上します。
  • これを文書化: 関数とクラスの JSDoc コメントを自動的に生成します。
  • コード スペル チェッカー: コード内のスペル エラーを検出し、修正します。
  • Visual Studio IntelliCode: コンテキストを認識した提案を提供する AI を活用した IntelliSense。
  • TODO ハイライト: TODO と注釈を追跡して、見落としがないことを確認します。

コードのスニペット#

IMPORTANT

事前定義されたスニペットにより時間を節約し、ワークフロー内の繰り返しのタスクを減らします。 :::- JavaScript (ES6) コード スニペット: 最新の JavaScript/TypeScript 開発用のスニペット。

  • ES7 React/Redux/GraphQL/React-Native Snippets: React および Redux エコシステムの生産性を向上させます。
  • Vue 2/3 スニペット: Vue.js の便利なスニペットを提供します。
  • Angular 10 スニペット: コンポーネント、サービスなどに必要な Angular スニペット。
  • Reactjs コード スニペット: ES6/ES7 構文での React 開発用に調整されています。
  • Bootstrap と Font Awesome スニペット: Bootstrap と Font Awesome を使用して簡単にスタイリングするためのスニペット。
  • Angular Jasmine 単体テスト スニペット: Jasmine を使用して Angular での単体テストを高速化します。
  • ノード スニペット: 効率的な Node.js 開発のためのスニペット。

データベース#

NOTE

これらの強力な拡張機能を使用して、VS Code からデータベースを直接管理およびクエリできます。 :::- SQL Server (mssql): SQL Server および Azure データベースとシームレスに連携します。

  • MySQL: MySQL データベースを簡単に管理します。
  • PostgreSQL: PostgreSQL データベースの強力なサポート。
  • MongoDB: MongoDB のコレクションとドキュメントの管理を簡素化します。
  • SQLTools: 複数の SQL データベースに接続し、高度な管理機能を提供します。

テーマとスタイリング#

TIP

視覚的にカスタマイズするためのテーマとツールを使用して、コーディング環境を強化します。 :::- Winter Is Coming テーマ: ゲーム オブ スローンズにインスパイアされたテーマ。

  • One Dark Pro: Atom の人気のある One Dark テーマに基づいています。
  • Noctis: バランスの取れた暗いテーマと明るいテーマを提供します。
  • マテリアル テーマ: Google のマテリアル デザインを VS Code に導入します。
  • ドラキュラ テーマ: 鮮やかな色の洗練されたダーク テーマ。
  • VS Code アイコン: ファイル認識を向上させるためのカスタマイズ可能なアイコン。
  • Prettier: コードの書式設定を自動化して、一貫したスタイルを実現します。
  • 美化: HTML、CSS、JavaScript、および JSON をフォーマットします。
  • ピーコック: ユニークな色でワークスペースを差別化します。

ソース管理#

IMPORTANT

エディターから直接 Git ワークフローとコラボレーションを強化します。 :::- GitLens: 責任、履歴、スタッシュ管理などの高度な Git ツール。

  • Git 履歴: ファイルまたはブランチの履歴を視覚化して探索します。
  • CodeStream: コードの問題やレビューについてチーム メンバーと協力します。

デバッグ#

WARNING

これらのツールを使用してデバッグを簡素化し、コストのかかるミスを回避します。 :::- Chrome 用デバッガー: Chrome で実行されている JavaScript をデバッグします。

  • Firefox 用デバッガー: Firefox で Web アプリをデバッグします。
  • Node 用デバッガー: Node.js アプリケーションを効果的にデバッグします。

ユーティリティ#

TIP

これらのユーティリティにより、反復的なタスクが効率化され、コーディングが簡素化されます。 :::- Polacode: コードの美しいスナップショットを生成します。

  • ライブ サーバー: ライブ リロードでローカル サーバーを起動します。
  • インポート コスト: JavaScript/TypeScript のインポート サイズをインラインで表示します。
  • VS Code Counter: ファイルまたはワークスペース内の行、単語、文字をカウントします。
  • 設定の同期: VS Code のセットアップをデバイス間で同期します。
  • エディタ設定: エディタ間で一貫したコーディング スタイルを適用します。

キーマップ#

NOTE

好みのエディターの使い慣れたキーバインドを使用して、VS Code に簡単に移行できます。 :::- Visual Studio: Visual Studio のキーバインドを模倣します。

  • Atom: Atom エディタ愛好家向け。
  • Sublime Text: Sublime Text のショートカットを適応させます。
  • JetBrains IDE: VS Code に移行する JetBrains ユーザー向け。

AI 開発ツール#

IMPORTANT

AI を活用してコーディングの効率とインテリジェンスを強化します。 :::- GitHub Copilot: GitHub と OpenAI によって開発された AI を活用したコード補完ツールで、コード スニペットと関数を自動補完することでユーザーを支援します。 oaicite:0

  • Tabnine: コード補完と AI を活用したチャットを提供する AI コーディング アシスタントで、80 を超えるプログラミング言語とフレームワークをサポートしています。 oaicite:1
  • カーソル: AI を活用した統合開発環境。コード生成、インテリジェントなオートコンプリート、コードベースの理解などの機能を提供します。 oaicite:2

フロントエンド開発#

TIP

これらの拡張機能を使用してフロントエンド開発ワークフローを強化します。 :::- Live Sass Compiler: Sass または SCSS ファイルをリアルタイムで CSS にコンパイルします。

  • HTML CSS サポート: HTML の CSS クラス名の補完を提供します。
  • Path Intellisense: コード内のファイル名を自動補完します。
  • CSS ピーク: CSS ID およびクラス文字列を定義としてピークできるようにします。
  • 画像プレビュー: ガターとホバーに画像プレビューを表示します。

バックエンド開発#

NOTE

これらの重要なツールを使用してバックエンド開発を合理化します。 :::- Docker: Dockerfile および docker-compose ファイルの構文強調表示、コマンド、ホバー ヒント、lint 機能を追加します。

  • REST クライアント: HTTP リクエストを送信し、VS Code で直接レスポンスを表示できるようにします。
  • Swagger Viewer: Swagger および OpenAPI ファイルのプレビューを提供します。
  • npm: npm スクリプトを簡単に管理します。
  • YAML: 組み込みの Kubernetes 構文サポートを備えた YAML 言語サポートを追加します。

ネットワークエンジニアリング#

IMPORTANT

ネットワーク エンジニアリング タスクに合わせて調整されたツールを備えてください。 :::- REST クライアント HTTP リクエストを送信し、エディタから直接レスポンスを表示できます。 VS Code を離れることなく API をテストするのに最適です。

  • Wireshark 構文の強調表示 Wireshark キャプチャ ファイルの構文強調表示を提供し、ネットワーク トラフィックの分析を容易にします。
  • Nmap 言語サポート Nmap スクリプトの構文強調表示を追加し、ネットワークの脆弱性と構成の分析に役立ちます。
  • cURL コンバータ cURL コマンドを HTTP リクエストに変換し、VS Code 内で直接 API を簡単にテストできるようにします。
  • Telnet クライアント ネットワークのトラブルシューティングとリモート サーバー通信用の端末ベースの Telnet クライアントを提供します。
  • SSH FS SSH 経由でリモート サーバーをマウントし、VS Code からファイル システムに直接アクセスできるようにして、管理を容易にします。

Vim ユーザー#

TIP

これらの拡張機能を使用して、VS Code エクスペリエンスを Vim に近づけましょう。 :::- ヴィム Vim のキーバインドと機能を VS Code にもたらし、エディター内で使い慣れた Vim 環境を使用できるようにします。

  • VsCodium ミニマリストで高度にカスタマイズ可能で拡張可能な環境をもたらす、Vim からインスピレーションを得た拡張機能を提供します。
  • VSCode 用 EasyMotion Vim 用 EasyMotion プラグインを模倣してターゲット位置を強調表示することで、ファイルの高速ナビゲーションを可能にします。
  • VS Code 用 Vimium ブラウザーの Vimium と同様に、キーボード ショートカットを使用して VS Code を操作できます。
  • ヴィム NERDTree 強力な NERDTree ファイル エクスプローラーを VS Code に導入し、Vim キーバインドを使用したファイルのナビゲーションと管理を可能にします。

低レベルのプログラミングと組み込み開発#

NOTE

アセンブリ、C、および組み込みシステムを操作するための拡張機能。 :::- C/C++ 拡張パック IntelliSense、デバッグ、コード ナビゲーションなど、C および C++ 開発のための包括的なツール セット。

  • PlatformIO IDE 幅広いマイクロコントローラーと開発ボードをサポートする組み込みシステム用の完全な開発環境。
  • ARM アセンブリ構文の強調表示 ARM アセンブリ コードの構文強調表示を追加し、低レベル コードをより簡単に視覚化して理解できるようにします。
  • x86 および x86_64 アセンブリ x86 アセンブリ言語の構文サポートを提供し、低レベルのプログラマやリバース エンジニアに最適です。
  • 16 進エディタ 生のバイナリ データを表示および編集できるため、ファームウェアおよび低レベルのファイル構造を操作する場合に非常に役立ちます。
  • AVR サポート 構文の強調表示、コード スニペットなどを含む、AVR マイクロコントローラー プログラミングのサポートをもたらします。
  • 錆分析装置 コード補完、インラインドキュメント、リファクタリングツールのサポートを提供する Rust プログラミング拡張機能。
  • マイクロPython ファイル管理や VS Code から直接デバイスにコードをアップロードするなど、MicroPython 開発のサポートを追加します。

サイバーセキュリティとリバース エンジニアリング#

WARNING

コードの脆弱性を分析し、静的分析を実行し、リバース エンジニアリング ツールを探索します。 :::- ビンウォーク ファームウェア イメージを分析するツール。これにより、埋め込みコードとファイルの抽出とリバース エンジニアリングが可能になります。

  • ギドラ拡張機能 Ghidra リバース エンジニアリング フレームワークを VS Code に統合し、バイナリと逆アセンブルされたコードを分析できるようにします。
  • YARA ルール YARA を使用したマルウェアの分析と検出のために、構文の強調表示とルールベースのファイル スキャンを提供します。
  • 正規表現プレビューア 正規表現とその一致をリアルタイムで視覚化し、リバース エンジニアリングやコード分析に役立ちます。
  • OWASP 依存関係チェック OWASP 脆弱性データベースに基づいて、依存関係の既知の脆弱性についてプロジェクトをスキャンします。
  • データベース検索を悪用 エクスプロイト データベース内の既知のエクスプロイトを VS Code から直接すばやく検索できます。
  • Burp スイートの統合 Burp Suite を統合して Web 脆弱性スキャンを強化し、よりスムーズなテスト ワークフローを提供します。
  • Metasploit ヘルパー Metasploit と対話するための便利な統合により、侵入テストがより効率的になります。

AI と機械学習の開発#

IMPORTANT

AI および ML のワークフローを VS Code 内で直接強化します。 :::- ジュピター Jupyter Notebook のサポートが追加され、VS Code 内でインタラクティブなコーディング、データ分析、機械学習の実験が可能になります。

  • パイソン AI や ML のワークフローに重要な IntelliSense、lint、デバッグなどの機能を含む、Python 開発に不可欠です。
  • パンダヘルパー 一般的な Pandas コマンドと操作に素早くアクセスできるようにし、データの操作と分析をより効率的にします。
  • PyTorch スニペット PyTorch 開発用のスニペットを提供し、ディープ ラーニング モデルを迅速に作成し、ニューラル ネットワークをトレーニングするのに役立ちます。
  • TensorFlow スニペット 機械学習および深層学習モデルの作成を合理化するための TensorFlow 固有のスニペットを提供します。
  • MLFlow 機械学習モデルを管理し、VS Code 内でバージョン管理、パッケージ化、およびデプロイメント機能を提供するための包括的なツール。
  • ONNX モデル ビューア ONNX (Open Neural Network Exchange) モデルの表示と検査を支援し、フレームワーク間での AI モデルの導入を容易にします。

クラウドと DevOps#

TIP

クラウド開発とDevOpsワークフローを最適化します。 :::- テラフォーム Terraform を使用したコードとしてのインフラストラクチャの開発と管理が容易になり、クラウド リソースの管理が容易になります。

  • AWS ツールキット AWS のサービスを VS Code と統合し、エディターからクラウド リソースとアプリケーションを直接管理およびデプロイできるようにします。
  • Azure ツール Microsoft Azure サービスとの統合を提供し、クラウド環境内でリソースを展開および管理できるようにします。
  • Kubernetes Kubernetes サポートを提供し、VS Code 内でクラスター、ポッド、コンテナーを管理できるようにします。
  • ドッカー コンテナの構築、管理、デプロイが容易になり、コンテナ化された開発ワークフローが合理化されます。
  • GitHub アクション GitHub Actions を管理および監視するためのインターフェイスを提供し、継続的な統合とデプロイメントの処理を容易にします。
  • Jenkinsfile のサポート VS Code から直接 Jenkins パイプライン スクリプトを操作するための構文の強調表示とスニペットを提供します。
  • アンシブル Ansible を統合してインフラストラクチャ管理を自動化し、構成とデプロイメントの管理を容易にします。

パフォーマンスとプロファイリング#

WARNING

これらのツールを使用してコードのパフォーマンスを分析し、最適化します。 :::- フレームグラフ プロファイラ CPU とメモリの消費量を視覚化して、アプリケーションのパフォーマンスのボトルネックを特定するのに役立ちます。

  • ヒープ スナップショット ビューア ヒープ スナップショットを視覚化することで、メモリ使用量の分析とメモリ リークの発見に役立ちます。
  • Python プロファイリング Python のパフォーマンス プロファイリング ツールを提供し、遅いコードを特定してアルゴリズムを最適化するのに役立ちます。
  • Chrome DevTools の統合 VS Code から Chrome DevTools を直接使用できるようになり、Web 開発用の強力なプロファイリングおよびデバッグ ツールが提供されます。
  • Node.js プロファイリング Node.js アプリケーション用のプロファイリング ツールを提供し、サーバー側のパフォーマンスの最適化に役立ちます。
  • プロファイラーに移行 CPU 使用率、メモリ割り当て、ゴルーチンを視覚化することで、Go アプリケーションのパフォーマンスの問題を特定するのに役立ちます。

その他の生産性向上ツール#

IMPORTANT

開発ワークフローをよりスムーズにするための追加ツール。 :::- プロジェクトマネージャー 複数のプロジェクトを迅速かつ効率的に整理し、切り替えるのに役立ちます。

  • タイムトラッカー さまざまなタスクやプロジェクトに費やした時間を追跡し、ワークフローの管理と生産性の向上に役立ちます。
  • コード時間 コーディング活動と生産性を追跡し、作業の効率性についての洞察を提供します。
  • ブックマーク エディターにブックマーク機能を追加すると、コードの重要な行にマークを付けて簡単に移動できるようになります。
  • スティッキースクロール スクロールしてもヘッダーとコードの重要なセクションが表示されたままになり、大きなファイルの移動が容易になります。
  • マークダウン オールインワン プレビュー、目次、自動書式設定などの機能を提供することで、マークダウン編集を強化します。

VS コード拡張機能
https://banije.vercel.app/ja/posts/vscode_extensions/
作者
ibra-kdbra
公開日
2024-01-17
ライセンス
CC BY-NC-SA 4.0