【コンパイルと共有】開発効率を倍増させる実践的なVSCodeプラグイン30選-VSCode-php.cn

【コンパイルと共有】開発効率を倍増させる実践的なVSCodeプラグイン30選

青灯夜游

リリース： 2023-01-31 20:40:15

転載

3061 人が閲覧しました

この記事では、開発効率を2倍にし、日々の開発作業効率を2倍にする実践的なVSCodeプラグイン30個をまとめて共有しますので、皆様のお役に立てれば幸いです。

【コンパイルと共有】開発効率を倍増させる実践的なVSCodeプラグイン30選

1. 画像プレビュー

このプラグインを使用すると、マウスホバー時に画像をリアルタイムでプレビューできます。画像のリンクをクリックすると、それに加えて、画像のサイズと解像度も確認できます。

2. タグの自動名前変更

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

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

このプラグインを使用して、コード内のブラケットを異なる色で区別します。多くの括弧を使用したコードは非常に実用的です。このプラグインはカスタムブラケットカラーもサポートしています。 [推奨学習: vscode チュートリアル、プログラミング教育 ]

##4. カラーハイライト

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

5. Better Comments

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

6. GitLens

GitLens は、Visual Studio Code に組み込まれた Git 機能を強化します。これはコードをより深く理解するのに役立ち、誰がコードの行またはブロックを変更したか、なぜ、いつ変更したかをすぐに知ることができます。

7. VSCode-Icons

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

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

8. Tabnine

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

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

プロジェクトダッシュボードは、頻繁にアクセスするフォルダーやファイルなどをダッシュボードに固定できるプロジェクトダッシュボードプラグインです。彼らはすぐに。

10. CodeSnap

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

11. CSS Peek

CSS Peek プラグインを使用すると、HTML でクラス名または ID 名を選択し、Ctrl キーとマウスの左ボタンを押して、その名前の CSS の場所に直接配置します。

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

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

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 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. Remote-SSH

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

28. Chrome 用デバッガー

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