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

ホームページ

開発ツール

VSCode

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

青灯夜游

Oct 08, 2022 pm 06:12 PM

vscode

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

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

1. Live Server

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

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

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

2. タグの自動名前変更

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

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

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

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

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

#4. カラーハイライト

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

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

5. Better Comments

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

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

6. GitLens

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

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

7. VSCode-Icons

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

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

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

8. Tabnine

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

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

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

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

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

10. CodeSnap

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

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

11. CSS Peek

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

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

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

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

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

13. 自動終了タグ

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

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

14. Vetur

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

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

15. IntelliCode

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

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

16. Import Cast

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

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

17. Beautify

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

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

18. コードタイム

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

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

19. 設定の同期

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

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

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

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

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

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

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

22. Error Lens

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

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

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

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

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

#24. REST クライアント

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

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

#25. JavaScript Booster

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

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

26. Live SASS Compiler

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

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

27. リモート SSH

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

ssh (1).gif

28. Chrome 用デバッガー

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

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

29. npm Intellisense

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

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

30. 画像プレビュー

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

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

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

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

声明

この記事は掘金社区で複製されています。侵害がある場合は、admin@php.cn までご連絡ください。

vscodeを使用してJSONをフォーマットする方法Apr 16, 2025 am 07:54 AM

VSコードでJSONをフォーマットする方法は次のとおりです。1。ショートカットキーを使用します（Windows/Linux：Ctrl Shift I; MacOS：CMD Shift I）; 2。メニュー（ "edit"＆gt; "format document"）; 3。JSONフォーマッタ拡張機能（プレシエなど）をインストールします。 4。手動でフォーマットします（ブロックをインデント/抽出するためにショートカットキーを使用するか、ブレースとセミコロンを追加します）。 5。外部ツール（JsonlintやJson Formatterなど）を使用します。

vscodeをコンパイルする方法Apr 16, 2025 am 07:51 AM

VSCODEのコンパイルコードは5つのステップに分割されます。C拡張子をインストールします。プロジェクトフォルダーに「main.cpp」ファイルを作成します。コンパイラ（MINGWなど）を構成します。ショートカットキー（「Ctrl Shift B」）または「ビルド」ボタンでコードをコンパイルします。コンパイルされたプログラムをショートカットキー（「F5」）または「実行」ボタンで実行します。

VSCODEをインストールする方法Apr 16, 2025 am 07:48 AM

Visual Studioコードをインストールするには、次の手順に従ってください。公式Webサイトhttps://code.visualstudio.com/;オペレーティングシステムに従ってインストーラーをダウンロードします。インストーラーを実行します。ライセンス契約を受け入れ、インストールパスを選択します。インストールが完了した後、VSCODEは自動的に開始されます。

VSCODEでフォントを拡大する方法Apr 16, 2025 am 07:45 AM

Visual Studioコードでフォントを拡大する方法は次のとおりです。設定パネル（CTRL、またはCMD）を開きます。「フォントサイズ」を検索して調整します。適切なサイズの「フォントファミリ」を選択します。適切なサイズを提供するテーマをインストールまたは選択します。キーボードショートカット（CTRLまたはCMD）を使用して、フォントを拡大します。

VSCODEを使用してリモートサーバーに接続する方法Apr 16, 2025 am 07:42 AM

VSCODEを介してリモートサーバーに接続する方法は？リモート-SSH拡張構成SSH VSCODEで接続を作成する接続情報の入力情報：ホスト、ユーザー名、ポート、SSHキーリモートエクスプローラーの保存された接続をダブルクリックします

VSCODEでVUEを実行する方法Apr 16, 2025 am 07:39 AM

VSCODEでVUEプロジェクトを実行するには、次の手順が必要です。1。Vue CLIをインストールします。 2。VUEプロジェクトを作成します。 3.プロジェクトディレクトリに切り替えます。 4.プロジェクトの依存関係をインストールします。 5.開発サーバーを実行します。 6.ブラウザを開いてhttp：// localhost：8080にアクセスします。

2つのファイルをVSCodeと比較する方法Apr 16, 2025 am 07:36 AM

VSCODEでファイルを比較する方法：1。2つのファイルを開きます。2。違いの表示（表示メニューを表示）、3。違いを表示（緑色、削除、紫色の変更）、4。矢印キーを使用してナビゲートします。その他の機能には、変更のマージ、変更のコピー、詳細の表示、違いの編集が含まれます。

VSCODEでJSコードを実行する方法Apr 16, 2025 am 07:33 AM

vscodeでJSコードを実行する方法は？ .jsファイルを作成し、コードを書き込みます。 node.jsとnpmをインストールします。 Chrome用のデバッガーをインストールします。デバッグコンソールを開きます。 Chromeを選択します。デバッグ構成を追加します。デバッグスクリプトを設定します。コードを実行します。デバッグコード（オプション）。

See all articles