GitHub Copilot、Swimm、Prettier など。開発チームにとって必須の 5 つの Visual Studio Code プラグインを使用して、生産性とコラボレーションを向上させます。

効率的で高品質な開発への需要が高まるにつれ、プロセスの合理化に役立つツールの必要性も高まります。Visual Studio Code は、その柔軟性と豊富なプラグイン ライブラリにより、開発者の間で絶大な人気を誇る人気のコード エディターです。適切なプラグインの助けを借りて、開発者は生産性を向上させ、開発プロセスを加速できます。

この記事では、開発者チームにとって不可欠な5 つの最高のVisual Studio Codeプラグインについて説明します。これらのプラグインは、より適切なコードを作成し、より効果的に共同作業を行い、全体的なワークフローを改善するのに役立ちます。初心者でも経験豊富な開発者でも、これらのプラグインはあなたの仕事生活を容易にし、生産性を向上させるでしょう。

始めましょう！

1. GitHub Copilot — AI ペア プログラマー。

GitHub Copilot は、GitHub がOpenAIと協力して開発した AI を活用したコード アシスタントです。OpenAI Codexと呼ばれるシステムは、OpenAI の GPT-3 (Generative Pre-trained Transformer) テクノロジーに基づいており、自然言語を解析して、プログラミング中にコードの提案とオートコンプリートを提供します。

Copilot は、開発者が承認または拒否できる行ごとに最適なコードを迅速に提案するのに役立ちます。常にドキュメントを検索したり、StackOverflow の回答につまずいたりする必要はありません。この調査によると、この特定の参入障壁を取り除くだけで、チームはより速く行動し、反復し、改善することができます。

セットアップが完了すると、GitHub Copilot は、入力している内容やコードのコメントのコンテキストに基づいて、コードを完成させるための提案を提供します。必要に応じて提案を受け入れるか拒否することができます。ここでは、Tab キーを押して提案を受け入れ、次の提案をすぐに準備できるというフローに簡単に入ることができます。

GitHub Copilot は、開発者の認知的負荷を軽減し、コードを作成する時間を節約するのに役立ちます。ただし、拡張機能は継続的にトレーニングされるため、一部の提案が常に正確であるとは限らないことに留意することが重要です。ただし、良い点は、GitHub Copilot がフィードバックから学習して、将来的にはより正確になることを実際に学習できることです。

プライバシーを確​​実に保護するために、GitHub Copilot は、個別のデータを収集するのではなく、複数のユーザーからのデータを集約するフェデレーテッド ラーニング モデルを使用します。この拡張機能は、問題や懸念事項を開発チームに直接報告する方法も提供します。

2. Swimm — Docs-as-code を強力に強化します!

すべての開発者は、コンテキストを含めてコードベースを理解し、ナビゲートするのに役立つドキュメントを必要とします。つまり、必要なときに必要な情報を見つけられる必要があります。特定の機能やモジュールがどのように機能するかを調べるためだけに、コードをリバース エンジニアリングしたり、Slack、メールでのやり取り、コード コメント、Notion/Confluence の間を行き来したり、スカベンジャー ハントをしたりする必要はありません…そしてそれがまさに Swimm です。継続的文書化の原則に基づいて対処することを目的としています。

Swimm は、コードベースを文書化する従来の方法では不可能なことを、次の 3 つの方法で実現します。

• これにより、ライブ コード スニペットを直接参照する、コードに結合されたドキュメントを簡単に作成できます。強化されたマークダウンとテンプレートを使用して、チュートリアル、ハウツー、設計ドキュメント、技術リファレンスなど、開発者のあらゆるニーズに対応する内部ドキュメントを作成します。
• Swimm の特許取得済みの自動同期により、参照するコードが変更されるとこれらのドキュメントが自動的に更新され、コードとそのドキュメントの間のずれが防止されます。
• 開発者が最も必要とするドキュメントへの読み取りと書き込みの両方のアクセスを開発者に提供することで、ドキュメントの検出が向上します。つまり、IDE 内で、参照するコードと並行して行うことができます。

次回 IDE を起動するときに、ログイン/登録し、GitHub リポジトリに接続します。次のいずれかを実行できるようになりました。

a)作業しているファイルに関係なく、新しいドキュメントの作成を開始します。

b)または、コードベースをたどって「波」アイコンが表示されたら、コードのそのセクションに関連付けられた Swimm ドキュメントがあることがわかります。それをクリックすると、IDE 自体内で、または新しいブラウザ ウィンドウ (Swimm Web アプリ内) でそれらのドキュメントを開くことができます。

Swimm のようなソリューションを使用せずに内部ドキュメントに取り組もうとすると、開発者にとってすぐに役立つには範囲が広すぎたり、範囲が狭すぎたり、古くなったり、断片化して発見が困難になったりするドキュメントが作成されることがよくあります。これらすべてが開発者の損失につながります。ドキュメントをプロセスそのものとして信頼し、生産性を最高レベルに引き上げます。

Swimm とその VSCode プラグインは、開発者と開発チームが次のことを達成するのに役立ちます。

• ドリフトを最小限に抑えるために自動更新されるコードに結合されたドキュメントのおかげで、新規開発者のオンボーディング時間が 55% 短縮され、コードベースをより早く理解できるようになります (source )。
• 作成しやすく、見つけやすく、アクセスしやすいドキュメントにより、開発者の生産性が 50% 向上します (出典)。
• インフラストラクチャ、API、アーキテクチャなどに関連して行われたエンジニアリング上の決定に関する、関連する最新の内部ドキュメント、変更、記録を常に提供することで、チーム間のコラボレーションを可能にします。

3. Prettier —独自の自動コードフォーマッタ。

Prettierはコード フォーマッタであり、時間を節約し、生産性を向上させ、プロジェクト全体で一貫したコード スタイルを確保したい開発者にとってほぼ必須のツールです。JavaScript、TypeScript、CSS、HTML などを含む複数のプログラミング言語をサポートしています。

単一のキーストロークの組み合わせ (通常は Alt + Shift + F、または保存するたび) でトリガされる、一貫性のあるコード形式設定 (組織/プロジェクトに合わせてカスタマイズできるルールに基づく) が自動的に適用されるため、時間を節約し、Ctrl キーを押すことができます。ドキュメントから IDE への -C + Ctrl-V の信頼性が大幅に向上し、ビルドが失敗する前にエラーを検出して修正します。

インストールしたら、プロジェクトのルート ディレクトリに .prettierrc ファイルを作成して設定を構成できます。このファイルを組織全体に配布して、組織全体のコード形式の一貫性を確保したり、他の人のスタイルを採用したい場合は他の人のスタイルを使用したりできます。

Prettier は、コードの可読性を確保するという心配を取り除きます。コードの可読性は、特に大規模なコードベースの場合、コードの保守性に直接関係しているため、これは非常に大きな問題です。

4. インポートコスト — インポートのサイズを計算します。

Import Costは、 Wixによって作成された Visual Studio Code 拡張機能です。これは、コードにインラインでインポートのコストを表示し、各インポートのサイズの内訳を提供する、シンプルかつ最小限でありながら非常に便利な拡張機能です。

インポート コストを使用すると、コードの肥大化の原因となっているインポートを簡単に特定し、最適化するための措置を講じることができます。これは、特に大規模なライブラリやモジュールを扱う場合に、アプリケーションのパフォーマンスを向上させるのに役立ちます。

インストールすると、インポートのサイズの追跡が自動的に開始され、コードにインラインで情報が表示されます。

インポートコストを使用すると、どのインポート/バンドルを使用するか、どれを避けるべきかについて情報に基づいた決定を下すことができます。インポートのサイズに関する情報を提供することで、コードのサイズとパフォーマンスに最も大きな影響を与えるインポートの最適化を優先できます。

5. IntelliSense — コードの提案と補完。

使用している言語のIntellisense拡張機能は、インテリジェントなコード補完、構文の強調表示、その他の便利な機能を提供し、コードをより速く、より効率的に作成するのに役立ちます。

複雑な最新言語や開発ツールを使用する場合、IntelliSense に代わるものはありません。コードの構文、構造、そしてもちろん使用されている言語に基づいて、コンテキストに応じた提案 (コードヒント) とオートコンプリートを提供します。入力すると、現在のコンテキストに関連する関連する関数、メソッド、プロパティ、その他の要素が提案されます。

HTML/CSS、JavaScript、TypeScript、Python、Rust、Go などを含む幅広いプログラミング言語と環境用の Intellisense 拡張機能があり、Visual Studio Marketplace には一般的なフレームワーク、ライブラリ、開発ツール用の Intellisense 拡張機能もあります。 React、Angular、Svelte、Django、Vue、Docker、NPM、Helm、さらには Tailwind CSS などです。

ボーナスピック — サンダークライアント

Thunder Client は、エディター内から HTTP リクエストを送信し、API をテストできるようにする Visual Studio Code 拡張機能です。

Thunder クライアントの主な利点の 1 つは、リクエストを保存および整理できることです。Postmanと同様に、リクエストを保存してコレクションにグループ化できるため、リクエストの管理やチームとの共有が簡単になります。

Thunder Client は、複数の認証方法のサポート、自動応答検証、応答時間の追跡など、HTTP リクエストを処理するための幅広い機能も提供します。また、さまざまなプログラミング言語のコード スニペットを生成できるため、API 呼び出しをコードに簡単に統合できます。

Thunder Client をインストールすると、VS Code サイドバーに新しいアイコンが追加され、保存されたリクエストやコレクションにすぐにアクセスできるようになります。ここでは、 Thunder Client プラグインの使用方法に関する詳細なガイドを示します。

Thunder Client は、API テストと開発ワークフローを簡素化するため、開発チームにとって貴重なツールです。直観的なインターフェイス、リクエスト管理、複数の認証サポート、および自動応答検証を備えた Thunder クライアントは、API を使用する開発者チームにとって必須のツールです。

まとめ

この記事では、開発者向けに最適な 5 つの VSCode 拡張機能を取り上げました。全体として、これらは生産性、コードの品質、コラボレーションを向上させるために不可欠なツールです。

GitHub Copilot は、 AI 支援によるコード提案を提供することで、より多くのコードをより速く作成できるようにします。Swimm を使用すると、IDE 内の関連コードのすぐ隣で、コードに結合された自動更新ドキュメントを必要なときに簡単に作成して検索できます。Prettierを使用すると、コードを一貫して自動的にフォーマットできるため、時間を節約し、エラーを減らすことができます。インポート コストは、インポートされたモジュールのサイズとコストを表示することで、プロジェクトの最適化に役立ちます。最後に、IntelliSenseを使用すると、関連する提案やコード スニペットが提供されるため、コードをより迅速かつ効率的に作成できます。

これらのプラグインを使用すると、ワークフローを簡素化し、すぐに優れたドキュメントを作成し、コードの一貫性を向上させ、顧客のニーズを満たす高品質のソフトウェアを作成できます。