生産性を 2 倍にする Visual Studio Code の 27 の便利な拡張機能。
Visual Studio Code (VS Code) は、開発エクスペリエンスを強化するための多数の機能と拡張機能を備えた、よく知られ評価の高いコード エディターです。VS Code を使用する主な利点の 1 つは、開発者が特定のニーズに応じてカスタマイズできる柔軟性です。
さらに、VS Code は軽量で高速であるため、大規模なプロジェクトに取り組んでいる開発者や限られたリソースで作業している開発者にとっては最適な選択肢です。デバッグ ツール、ターミナル、Git 統合が付属しており、開発者にとってオールインワンのソリューションとなります。
それだけでなく、多くの VS Code 拡張機能が Visual Studio Marketplace で入手できるため、Visual Studio Marketplace は開発者コミュニティの主要な IDE となっています。これらの拡張機能は、開発者がクリーンでバグのないコードを提供するのに役立ち、開発者が幸せな生活を送りやすくなります。
今日の記事では、皆さんのお役に立てればと思い、非常に便利だと思われる主要な Visual Studio コード拡張ツールをいくつか紹介します。
01.グラフQL
GraphQL Visual Studio Code 拡張機能。GraphQL コードの作成、検証、テストに役立つ一連のツールを提供します。
GraphQL 拡張機能にはオートコンプリートが含まれており、入力時にクエリで使用するフィールドとパラメーターが提案されるため、効率的な GraphQL コードを簡単に作成できます。この機能により時間を節約し、構文エラーの可能性を減らします。
コードのエラーをチェックし、修正を提案する組み込みリンターをインストールします。この拡張機能を使用して、GraphQL エラーを防止し、効率を向上させます。
02、リモートSSH
VS Code 拡張機能を使用すると、追加のソフトウェアやターミナル ウィンドウを使用せずに、内部からリモート サーバーに安全に接続できます。
リモート SSH を使用すると、使い慣れた Visual Studio Code インターフェイス内で、リモート サーバーとの間でファイルに簡単にアクセス、編集、転送できます。ワークフローを簡素化するためではなく、全体的な生産性を向上させるために使用できます。
ローカル設定に関係なく、リモート コンピューター上でコマンドを実行したり、コードをデバッグしたり、拡張機能を使用したりして、Visual Studio Code の機能を最大限に活用することができます。
Remote-SSH は重要な VS Code 拡張機能です。VS Code 拡張機能を試して、リモート作業の威力と利便性を実感してください。
03、設定の同期
開発者は定期的にテキスト エディタを使用して Web アプリケーションを作成します。複数のデバイス間で同じ設定を手動で維持するのは不便です。設定を手動で同期する場合も時間がかかり、デバイス間で一貫性のないエクスペリエンスが得られる可能性があります。
Settings Sync VS Code 拡張機能を使用すると、複数のデバイス間で設定を簡単に同期し、構成時間を短縮し、他のユーザーと設定を共有することもできます。
04、タグの自動名前変更
開始タグを使用するたびに、VS Code は一致するタグを自動的に強調表示し、終了タグを追加します。Auto Rename Tags 拡張機能は、コーディング中に変更したタグの名前を変更します。例えば：
HTML/XML タグの名前を変更すると、そのタグはペアになっているすべての HTML/XML タグの名前を自動的に変更します。
Javascript で自動名前変更タグ拡張機能を使用することもできます。ファイル タイプを .js として保存するだけです。JavaScript タグと自動的にペアリングされ、名前が変更されます。
この拡張機能は、HTML、XML、PHP、および JavaScript のみをサポートします。
05、タブナインAI
Tabnine VS Code 拡張機能は生産性を重視しています。これは、開発プロセスをスピードアップし、リアルタイムでコードを自動的に完成させることができる人工知能コード アシスタントです。すべての一般的なコーディング言語と IDE をサポートしています。
Tabnine には、IntelliSense と同様の AI 支援によるコード補完機能があります。この拡張機能は、コンテキストと構文に基づいてコードの次の行を予測して提案することで、コードをより速く書くのに役立ちます。
06、CSSピーク
CSS Peek VS Code 拡張機能を使用すると、HTML 要素の上にマウスを置くだけで、その要素に適用されている CSS スタイルを表示する表示ウィンドウが表示されます。ビュー ウィンドウをクリックして CSS コードにジャンプすると、スタイルを簡単に編集できます。この機能により、CSS コードを毎回手動で検索する必要がなくなります。
CSS Peek は SCSS、Less、Sass などの CSS プリプロセッサもサポートしているため、プリプロセッサに関係なくすべてのプロジェクトに使用できます。
コードスニペットを色付けするための VS Code 拡張機能
07、ブラケットペアカラー DLW
ブラケット ペア カラー DLW VS コード拡張機能。開発者がコード部分のネストの深さを決定できるように、特定の文字に自動的に色を付けます。
複数の言語をサポートしており、開発者はコード内で使用する予定のさまざまな括弧の色を定義できます。デフォルトでは ()、{}、および [] が一致しますが、必要に応じて他の括弧文字を使用したり、その色を定義したりすることもできます。この拡張機能を使用すると、開始括弧と終了括弧を簡単に見つけて、コード構造をより明確に把握できるようになります。
08、VSコードアイコン
Visual Studio Code は強力なコード エディターですが、デフォルトのアイコンは退屈で魅力的ではない場合があります。ここでアイコンのテーマが活躍します。
VS Code Icons 拡張機能は、ファイルの種類を React、JavaScript、HTML、CSS などとして識別して表示するのに役立ちます。
アイコン テーマは、VS Code エディター インターフェイスの外観と操作性をすばやく簡単に変更する方法であり、全体的なエクスペリエンスに大きな影響を与える可能性があります。
09、マテリアルアイコンテーマ
マテリアル アイコン テーマは、コード エディターに洗練されたモダンな外観を与える、人気があり広く使用されている VS Code 拡張機能です。この拡張機能は、VS Code のデフォルトのマテリアル デザイン アイコンを置き換え、インターフェイスにクリーンでプロフェッショナルな外観を与えます。
カラー、モノクロ、アウトラインのアイコンなど、さまざまなアイコン スタイルが含まれています。つまり、ニーズや好みに最適なスタイルを選択できるということです。すべてのコーディング ニーズが広範なフォルダーおよびファイル アイコンのセットによって直感的に分類されているため、必要なものに簡単かつ迅速にアクセスできます。
10、孔雀
Peacock は、コーディング エクスペリエンスに彩りを加える VS Code 拡張機能です。この拡張機能を使用すると、ファイル タイプ、フォルダー、ワークスペースなどの基準に基づいてエディター タブを色分けできます。
クジャクの際立った特徴の 1 つはその順応性です。各規格に使用される色を変更したり、独自の配色をデザインしたりすることもできます。これにより、インターフェイスを好みに合わせてカスタマイズし、さまざまな種類のファイルやプロジェクトを区別できるようになります。
バージョン管理用の VS Code 拡張機能
11、ライブサーバー
Web ページを自動的にリロードするための Live Server VS Code 拡張機能。これにより、ページを手動で更新する必要がなくなります。
カスタムのポートまたはホスト名を指定することもできます。これは、複数のプロジェクトやチーム環境で作業する場合に便利です。Live Server のもう 1 つの便利な機能は、作業環境内の任意の HTML ファイルまたはプロジェクト上でサーバーを実行できることです。
12、Gitの歴史
Git History 拡張機能を使用すると、コミット履歴がツリー ビューで表示されるため、コード作成者はコードに加えられた変更の進行状況を簡単に理解できます。このビューにより、さまざまなコミットを簡単に参照して、探している変更を見つけることができます。
この VS Code 拡張機能には、メッセージ、作成者、またはハッシュごとに特定のコミットをすばやく見つけることができる強力な検索機能も含まれています。コミットを比較することもできるので、コードの異なるバージョン間の違いを簡単に確認できます。
13、Gitレンズ
Git Lens 拡張機能は、開発者がプロジェクトの Git 履歴を視覚化し、ナビゲートし、理解するのに役立ちます。特に、Git Lens は強力な分割差分ビューを追加し、開発者がコミットとブランチの違いを簡単に視覚化できるようにします。
これにより、開発者は、作成者、ファイル、コミット メッセージ、その他の基準によってプロジェクトのコミット履歴を検索できます。
14、ドッカーエクスプローラー
Docker Explorer VS Code Extension は、現在実行中のコンテナーとイメージを識別して管理できます。これにより、開発者はコンテナを簡単に開始、停止、再起動したり、ログやプロパティを検査したり、名前や ID で特定のコンテナやイメージをターゲットにしたりすることもできます。
イメージから新しいコンテナを生成したり、レジストリからイメージをプッシュおよびプルしたりできます。全体として、コンテナーの作成と管理が簡素化され、ライブ環境でのコードのテストとデプロイが簡単になります。
コードのフォーマットとリンティングのための VS Code 拡張機能
15、もっときれいに
Prettier は、業界のベスト プラクティスに従ってコードを標準化するための最も人気のある書式設定およびリンティング ツールです。また、チームが視覚的にシームレスなコードを作成できるようになるため、使用するタブやスペースの数、かっこをどこに配置するかについて議論する必要がなくなります。
Prettier Visual Studio コード拡張機能を使用して、コードの見栄えを良くします。
16、美しくする
Beautify は、700 万回インストールされている Prettier 拡張機能の代替です。Beautify は、コードへの介入を最小限に抑えてコードを検査し、フォーマットするもう 1 つの堅牢なコード「ビューティファイアー」です。これを使用すると、任意の言語で書かれたコードを簡単にフォーマットできます。
17、より良いコメント
コメントの改善 VS Code 拡張機能は、コメントの種類に応じてコメントをフォーマットできます。ToDo、質問、リマインダーなど、さまざまなスタイルのコメントを使用できます。
この拡張機能を使用すると、重要度に基づいてレビューに優先順位を付けることもでき、キーワードやタイプによって特定のレビューをすばやく見つけることができる強力な検索機能も備えています。
18、エスリント
ESlint VS Code 拡張機能は、バグや潜在的な問題を問題になる前に検出します。これは、特定の要件に合わせて調整できる堅牢なルールのセットを提供し、独自のコーディング規則を適用できるようにします。
Prettier などの他の一般的な拡張機能と統合でき、lint ルールに従ってコードを自動的にフォーマットできます。
19、マークダウンリント
MarkdownLint 拡張機能は、使いやすいエラー警告および修正ツールです。エラーの詳細には、コード エディターで強調表示された問題をクリックするとアクセスできます。
MarkdownLint は、スペル チェッカーなどの他の一般的な拡張機能とも統合されており、マークダウン ファイルのスペル ミスを自動的にチェックできます。
デバッグとトラブルシューティングのための VS Code 拡張機能
20、JavaScriptデバッガ
Javascript デバッガー拡張機能は、コード内にブレークポイントとステップを作成します。これにより、プログラマーはコードの実行を一時停止し、変数と呼び出しスタックを調べることができるため、エラーの特定と修正が簡単になります。
この VS Code 拡張機能には、開発者が式を評価し、コードを実行し、コードをリアルタイムでテストおよびデバッグできる対話型コンソールが付属しています。あらゆる種類の JavaScript プロジェクトに包括的なデバッグ エクスペリエンスを提供します。
21、コードスペルチェッカー
コードスペルチェッカーとコード拡張機能を使用してタイプミスを回避します。入力時にスペルミスを強調表示するだけです。使いやすいバグ修正インターフェイスがあり、コード エディターで強調表示された問題を右クリックしてアクセスできます。複数の言語をチェックして、どの言語でもコードにエラーがないことを確認できます。
22、ターボコンソールログ
ログ ステートメントを手動で追加せずにコードをデバッグします。Turbo Console Log 拡張機能を使用すると、ワンクリックでコンソール ログ ステートメントをコードに追加できます。
式を評価してコードを実行するための対話型コンソールがあります。開発者がコードをリアルタイムでテストおよびデバッグするのに役立ちます。ログ ステートメントの出力をカスタマイズし、オブジェクトと変数を強調表示することで、より読みやすい形式を実現することもできます。
23、正規表現プレビューア
Regex Previewer は、コードの正規表現パターンを提供します。これらのパターンは、強調表示されたテキストとリアルタイムで一致するサンプル テキストに対してテストされます。これを使用すると、正規表現パターンのエラーを迅速に特定して修正できます。
さらに、この拡張機能には、正規表現構文に関する広範なドキュメントと、コードに簡単にコピーして貼り付けることができる一般的な正規表現パターンのライブラリが含まれています。
JavaScript、React、Java、HTML、CSS 用の VS Code 拡張機能
24、JavaScript コードのスニペット
JavaScript プロジェクトでさまざまなコードのチャンクをコピーして貼り付けるだけで再利用していることがよくあります。このタスクには時間がかかる場合があるため、簡単なキーボード ショートカットから多数のさまざまな JavaScript コード スニペットを利用できるようにすると、生産性が向上します。
JavaScript スニペットは、コードに簡単に含めることができる事前に構築されたスニペットです。また、Angular、Vue.js、Node.js などの特定の JavaScript ライブラリとフレームワークもサポートします。
25、Reactjs コードスニペット
Reactjs コード スニペット VS Code 拡張機能は、きちんとパッケージ化された事前に作成されたテンプレートを提供することで、開発者がワークフローとコード速度を向上させるのに役立ちます。トリガー コマンドを入力するだけで、必要なコード スニペットを取得できます。
このツールを使用すると、コーディング時間を最小限に抑え、最も得意とする現実世界の問題の解決に集中できます。
26、Java言語サポート
Java Extension Pack には、コーディング支援、デバッグ、リンティング、フォーマット、テストのためのいくつかの拡張機能が含まれています。
最も人気のある拡張機能には次のようなものがあります。
Java Development Kit (JDK) 11 以降: Java アプリケーションを構築して実行するには、JDK が必要です。構文の強調表示、コード補完、デバッグなどの機能を含む、完全な言語サポートを提供します。
IntelliCode Java テスト ランナー: この拡張機能を使用すると、プロジェクト内の単体テストの実行とデバッグが簡単になります。JUnit、TestNG などの一般的なテスト フレームワークと統合して、シームレスなテスト エクスペリエンスを提供します。
Java デバッガー: この拡張機能は機能が豊富で、ブレークポイントの設定、変数の検査、コードのステップ実行、およびデバッグを容易にするためのその他の多くのオプションを使用できます。
Red Hat の Java 言語サポート: 安定した安全な Java 開発プラットフォームと、Java アプリケーションの構築、デプロイ、管理を支援するツールの維持に役立ちます。
全体として、Java 言語サポート パッケージは Java 環境をより効率的にし、Java 開発エクスペリエンスを簡素化します。
27、HTML CSSのサポート
HTML CSS サポートがテキスト エディターおよび統合開発環境 (IDE) 向けに拡張され、HTML および CSS 開発のサポートが強化されました。
また、次のような追加機能も提供します。
HTML および CSS 用の IntelliSense: これは、コードの作成中に HTML タグ、属性、CSS プロパティ、値、単位を提案するコード補完機能です。
Emmet サポート: HTML および CSS の簡略表記を生成して、簡潔な構文を作成し、数回クリックするだけで完全な HTML または CSS コードに展開できるようにします。
CSS クラス名の補完: HTML ドキュメント内の CSS クラス名を自動補完します。
HTML および CSS の書式設定と lint オプション: HTML および CSS コードを読みやすく書式設定して構造化するための必須ツールです。
組み込みの CSS カラー プレビューア: 複雑な配色に苦労している場合、またはサイトの色を微調整するときに迷った場合は、この機能が役に立ちます。CSS カラーコードの色のプレビューが表示されます。
結論は
Visual Studio Marketplace では、開発者の効率と生産性を高めるために役立つ多数の拡張機能が提供されています。開発者生活に最大の影響を与える可能性のある、上位の Visual Studio Code 拡張機能をリストしました。これらの拡張機能を試して使用して、ワークフローを簡素化してください。