[整理と共有] 30 個の VSCode プラグイン、あなたに合ったものが必ず見つかります

この記事では、私が長年 VSCode を使用する過程で使用してきたいくつかの優れたプラグインを主に紹介します。これら 30 個の VSCode プラグインの中から、あなたに合ったものが必ず見つかります。

1. Live Server

Live Server は、リアルタイム読み込み機能を備えた小規模サーバーです。live-server をリアルタイム サーバーとして使用できます。開発された Web ページまたはプロジェクトの結果をリアルタイムで表示します。 [推奨学習: "vscode 入門チュートリアル "]

静的および動的ページのリアルタイム リロード機能を備えたローカル開発サーバーを起動します。ステータス バーをクリックして開始するか、サーバーを停止します。

2. タグの自動名前変更

この拡張機能を使用すると、開始タグと終了タグの名前を変更するときに HTML タグの名前を自動的に変更できます。開始タグのみを変更し、終了タグの変更を忘れないようにしてください。この拡張機能は、HTML、XML、PHP、および JavaScript で動作します。

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

このプラグインを使用して、コード内のブラケットを異なる色で区別します。多くの括弧を使用したコードは非常に実用的です。このプラグインはカスタムブラケットカラーもサポートしています。

#4. カラー ハイライト

この拡張機能は、CSS カラーのスタイルを設定するために使用できます。 CSS に加えて、デフォルトの色が表示されない JavaScript、HTML、JSON などのファイルも色付けします。このプラグインは、色の名前、RGB、RGBA、および HEX カラーを着色します。

5. Better Comments

Better Comments 拡張機能は、コード内でさまざまな形式で、よりユーザーフレンドリーなコメントを作成するのに役立ちます。選択できるカラーノート。

6. GitLens

GitLens は、Visual Studio Code に組み込まれている Git 機能を強化します。 GitLens はコードをより深く理解するのに役立ちます。コードの行またはブロックを誰が、なぜ、いつ変更したかをすぐに確認できます。さらに、コードベースの歴史と進化を簡単に調べることができます。

7. VSCode-Icons

VSCode-Icons は、さまざまな種類のファイルにさまざまなアイコンを割り当てることができるファイル イメージ プラグインです。プロジェクト。さまざまなファイルの種類を区別しやすくなります。

インストールが完了したら、次の手順に従って使用してください: [ファイル] → [設定] → [ファイル アイコン テーマ] → [VSCode-Icons]。

8. Tabnine

tabnine は、コード入力を自動的に完了するのに役立つ多言語プラグインです。 Tabnine の目標は、AI ベースのシステムを通じて開発者の生産性を向上させることです。

9. プロジェクト ダッシュボード

プロジェクト ダッシュボードは、頻繁にアクセスするフォルダーやファイルなどを表示できるプロジェクト ダッシュボード プラグインです。ダッシュボードにピン留めすると、すぐにアクセスできます。

10. CodeSnap

CodeSnap は、vscode コード スクリーンショット キャプチャ プラグインです。プロジェクト内の対応するコード セグメントを選択するだけです。コードのスクリーンショットをすばやく作成します。

11. CSS Peek

CSS Peek プラグインを使用すると、HTML 内のクラス名または ID 名を選択できます。 Ctrl キーを押したままにすると、マウスの左ボタンで名前の CSS を直接見つけることができるため、開発効率が向上します。

12. パス オートコンプリート

パス オートコンプリートは、VS Code のパス オートコンプリートを提供します。長いファイル パスを覚えておく必要はありません。

13. 自動終了タグ

自動終了タグ プラグインは、HTML の終了タグを自動的に完成させるために使用されます。

14. Vetur

Vue 開発に必須のプラグイン。デバッグなど、Vue.js に便利なツールを提供します。エラーチェック、構文の強調表示、スニペット。

15. IntelliCode

IntelliCode は、開発者がインテリジェントなコード提案を提供できるように設計されています。デフォルトでは、Python、TypeScript/JavaScript、React、Java をサポートしています。 IntelliCode は、使用する可能性が最も高いコンテンツをリストの先頭に置くことで時間を節約します。 IntelliCode の推奨事項は、GitHub 上の何千ものオープン ソース プロジェクトに基づいています。

16. Import Cast

プラグインは、インポートされたパッケージのサイズをエディターにインラインで表示するために使用されます。この拡張機能は、webpack を使用してインポートされたパッケージのサイズを検出します。

17. Beautify

Beautify は、コードの表示をより美しい方法でフォーマットするのに役立ちます。 JavaScript、JSON、CSS、Sass、HTML などの一般的な言語をサポートしています。

18. コード タイム

コード タイムは、Visual Studio Code の使用時間を計算できます。さまざまなデータ指標が提供されます。

19. 設定の同期

Settings Sync は、Visual Studio Code の設定を GitHub に保存するために使用され、他の目的で簡単に使用されます。拡張機能やシステム設定に関する情報など。このプラグインを使用すると、以前にインストールした拡張機能や関連設定を開かなくても、さまざまなマシンに簡単にセットアップできます。

20. Live Share

Live Share は、チームの開発者がプロ​​グラム内のコードをリアルタイムで共有するのに役立ち、簡単に共有できます。共有デバッグ セッション、ターミナル インスタンス、ローカルホスト Web アプリケーション、音声通話などのデバッガを編集します。

21. コード スペル チェッカー

コード スペル チェッカーは、単語のスペル ミスがあるかどうかをチェックするのに役立ちます。チェック ルールはキャメルケース (キャメルケース命名法）。

22. Error Lens

**Error Lens ** は、コード (エラー、警告、構文の問題) をチェックするためのツールです。 ) ハイライト表示用のプラグインです。 Error Lens は、診断をより目立つようにし、言語によって生成された診断の行全体を強調表示し、コード行の位置にオンラインで診断メッセージをインラインで出力することにより、言語の診断機能を強化します。

23. ES7 React/Redux/GraphQL/React-Native スニペット

React/Redux/Reatc Native/react-router React 開発者にとって必須の賢い構文のヒント。このコード スニペットを使用すると、クラスベースのコンポーネントや関数コンポーネントを簡単に作成できます。

#24. REST クライアント

REST クライアントは、HTTP リクエストを直接送信して表示できるようにする VS Code 拡張機能です。 VS コードの応答。これは VS Code 用の Postman であり、コード エディターに簡単に統合できます。 REST クライアントは、REST API と GraphQL API の両方をサポートします。

#25. JavaScript Booster

JavaScript Booster は、コードとそのコードを分析することにより、コードをリファクタリングまたは強化するための簡単なアクションを自動的に提案します。コンテクスト。リファクタリング条件、宣言、関数、TypeScript、Promise、JSX などの複数のコード操作をサポートします。

26. Live SASS Compiler

Live SASS Compiler 拡張機能は、SASS または SCSS ファイルを実際に CSS ファイルにコンパイルまたは変換できます。時間。

27. リモート SSH

提供リモート SSH は、SSH サーバーを備えた任意のリモート マシンを開発環境として使用できます。この拡張機能はリモート マシン上でコマンドを直接実行するため、ローカル マシン上にソース コードがなくても、リモート サーバーをすばやく操作できます。

28. Chrome 用デバッガー

Chrome 用デバッガーは、Microsoft によって開発された VS Code 拡張機能であり、JS のデバッグを可能にします。コード。ブレークポイントの設定、コードのステップ実行、動的に追加されたスクリプトのデバッグなどを行うことができます。開発プロセスの早い段階でエラーを検出するのに役立ちます。

29. npm Intellisense

npm がパッケージをインストールした後、スマート プロンプトを取得する必要がある場合にプラグインを提供します。 import ステートメント npm モジュールを自動的に設定します。

30. 画像プレビュー

画像のリンクの上にマウスを置くと、リアルタイムでプレビューできます。特に、画像のサイズと解像度も確認できます。

VSCode の詳細については、vscode チュートリアル をご覧ください。

以上が[整理と共有] 30 個の VSCode プラグイン、あなたに合ったものが必ず見つかりますの詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。