開発者向けのトップ10VSCode Extensions:開発エクスペリエンスの向上

公開: 2021-12-27

ある特定のIDEが開発に最適であると主張するのはありがたいことです。 選択できる優れたオプションはたくさんあるので、どのIDEが最適かについて主観的な意見を述べる代わりに、達成する必要のあるものに最適なものを選択してください。

Visual Studio Code、いわゆる#VSCodeは、さまざまな種類の#developmentで非常に人気があり、使用されているため、おそらく最も急速に成長している#IDEです。

クリックしてツイート

Visual Studio Codeは、コードを作成するための無料のオープンソースツールであり、それをインストールすることで、インストールして作業を楽にすることができる他の拡張機能の大規模なデータベースも取得できます。

素晴らしいホスティングはまた、生活を楽にします。 信頼性が高く手頃なWordPressホスティングをお探しですか? WPMU DEVは、急速にWeb上で最良の選択肢の1つになりつつあります。 完全に管理された専用プランのいずれかが20%オフになります。

この記事では、すべての開発者が必要とするVSCode拡張機能のトップ10のリストを提供します。

コード時間

VSコード拡張コード時間

Code TimeはVSCode拡張機能であり、毎日20万人以上のアクティブな開発者が使用しています。 それはあなたが集中し続けるのを助け、あなたがコーディングしている間あなたからすべての気を散らすものを遠ざけます。 ボタンをクリックして「フローモード」を有効にするだけで、すべての通知がミュートされ、プロジェクトで作業している間、完全にフォーカスを保つことができます。

また、毎日のコーディングの進捗状況を正確に追跡できるため、今日の進捗状況を数日前の進捗状況と比較することができます。 積極的にコーディングに費やした時間、追加した行数など、すべてをリアルタイムで確認できます。 また、チームとつながり、チームメートのコーディングの進捗状況の概要を把握することもできます。

GitHubコパイロット

VSコード拡張-GitHubCopilot

巨大なGitHubによって構築されたGitHubCopilotは、洗練されたOpen AI Codexを使用するVSCode拡張機能であり、単純なオートコンプリート行の提案または関数本体全体を提供します。 この拡張機能は、インターネットをクロールするように、そしてあなたが書いたものに基づいて機能します。 ベースとなる10億行のコードAIシステムのおかげで、コード行をオートコンプリートしようとします。 GitHub Copilotはまだベータプレビュー中であり、限られたグループの人々だけがアクセスできるようになっています。 試してみたい場合は、順番待ちリストに登録できます。

ライブサーバー

VSCode Live Server

WebサイトをWebサーバーに展開する前に、Webサイトを構築する必要があります。 ただし、開発プロセスでWebサイトをテストするには、ローカルWebサーバーを用意するのが最適です。 XamppやWampServerなどの一部のツールを使用すると、特定のポート番号でコンピューター上でローカルにWebサイトをホストできます。

ただし、それを機能させるには、ダウンロード、インストール、および構成する必要があります。 その重い作業のすべてをLiveServerVSCode拡張機能に置き換えてみませんか。これにより、静的Webサイトが自動的に準備され、ローカルマシンでホストされます。 この拡張機能は、Web開発者にとって必須です。 拡張機能をインストールして有効にし、左側のエクスプローラーパネルからファイルを右クリックして、[LiveServerで開く]を選択します。

輸入コスト

輸入コスト

いくつかのプロジェクトをコーディングして作業するときはいつでも、すべてを最初から行う状況を見つけることは決してありません。 プロジェクトにインポートして利用できる便利なライブラリやパッケージがたくさんあります。 ただし、これらの外部ライブラリを使用する場合は注意が必要です。これに夢中になると、Webサイトでラグの問題が発生したりパフォーマンスが低下したりする可能性があります。 VSCode拡張機能であるImportCostは、インポートされたライブラリのサイズを検出し、コードエディターパネルのインポートステートメントの横に表示することで、それを管理するのに役立ちます。

きれい

きれい

あなたが何をするにしても、あなたはそれをシンプルで、きれいで、整理された状態に保つ傾向がありますよね? これはコーディングの場合も同じです。 必要なコードをすばやく見つけるために、常にコードを適切な形式に保つようにしてください。 手動で行うこともできますが、提供する構成に基づいてフォーマットプロセスを自動化するツールがすでにある場合は、なぜそれを気にする必要がありますか。 VSCodeユーザー向けに、Prettierと呼ばれる拡張機能があります。これは、間違いなく開発者にとって最高のフォーマットツールです。 JavaScript、CSS、HTML、TypeScript、JSXなどのさまざまな言語をサポートしています。

ブラケットペアカラーライザー

ブラケットペアカラーライザーVSCode

開発者だけが、コードに迷い込んだときにそれがどれほど苛立たしいものになるかを知っており、ブロックブラケットがどこから始まりどこで終わるかを知りません。 整理されていない乱雑なコードがあると、多くの時間が無駄になります。 この一般的な問題を修正するために、VSCodeは、一致するブラケットを一意の色とペアにする拡張ブラケットペアカラーライザーを提供しているため、二度と迷子になることはありません。

TODOハイライト

TODOハイライト

TODOハイライトは、VSCodeの開発者にとって完璧な注釈ツールです。 コードの一部を修正したり、機能を追加したりする必要がある場合は、コードに「TODO」または「FIXME」アノテーションを追加して強調表示することで、この拡張機能を使用して簡単に修正できます。

孔雀

孔雀

コーディングプロジェクトを整理するためのもう1つの優れたツールは、Peacockです。 複数のプロジェクトを実行して作業している場合、VSCodeのすべてのインスタンスは同じように見えるため、あるプロジェクトから別のプロジェクトに移動するのは問題になる可能性があります。 Peacockは、ワークスペース全体の色を変更するオプションを提供することでそれを支援し、そのラベル付けによって、プロジェクトを簡単に区別し、現在作業する必要のあるプロジェクトに切り替えることができます。

RESTクライアント

RESTクライアント

APIリクエストを送信するために、最も人気のあるツールはPostmanです。 しかし、何らかの理由でPostmanを使用したくない、または使用したくないとしましょう。 VSCodeには、そのための独自の拡張機能であるRESTクライアントがあります。 RESTクライアントを使用すると、VSCodeから直接HTTPリクエストを送信し、応答を表示できます。 標準のRESTAPI呼び出しに加えて、GraphQLクエリの送信もサポートしています。

StackFinder

StackFinder

あなたが開発者でこの記事を読んでいるなら、StackOverflowプラットフォームと彼らがそれについて作るすべてのジョークについて聞いたことがあるはずです。 そうではないかもしれない人にとって、StackOverflowは開発者にとって最大のプラットフォームであり、コーディングに関するいくつかの質問を投稿して、すぐに答えを得ることができます。

20以上のブラウザタブを開いて探しているものを見つけると、解決策を見つけるのにイライラすることがあります。 StackFinderは、ブラウザでタブを1つも開かなくても、StackOverflowを検索するのに役立つVSCodeです。 VSCodeから直接回答を検索し、それらを切り替えて、見つけたコードスニペットを貼り付け、コーディングエディターでテストすることができます。

結論

VS Codeは優れており、市場で入手可能な最高の開発環境の1つです。何よりも、組み込みでインストール時に得られる多くの高度なオプションと機能のおかげです。 ただし、それを最大限に活用するには、VSCodeで利用可能な拡張機能を自由に使用してください。