VSCode プラグイン共有: Vue/React コンポーネントのリアルタイム プレビュー用プラグイン

VSCode で Vue/React コンポーネントを開発する場合、コンポーネントをリアルタイムでプレビューするにはどうすればよいですか?この記事では、VSCode で Vue/React コンポーネントをリアルタイムにプレビューするためのプラグインを紹介します。

私は最近年をとって、ワイルドに考えるのが好きですが、少し前に、VS Code のコンポーネントに WYSIWYG を実装できないかということを突然考えたので、最終的に作成しました。この効果を実現できるプラグインは、図に示すとおりです:

現在の React/Vue コンポーネントのリアルタイム プレビューをサポートします。 Webpack/Vite によって開発されました (Angular でもできるはずですが、私はまだ使用していません)。そのためサポートは提供されていません)。 [推奨学習: 「

vscode 入門チュートリアル 」]

使用方法

に従ってプラグインをインストールして使用します。参照ドキュメント: https://github.com/jaweii/AutoPreview/blob/main/README-zh.md

コンポーネントの作成時に現在のコンポーネントをリアルタイムでプレビューできます:

プレビュー固有のファイルで再利用可能なコンポーネント/マテリアルのユース ケースを整理することもできます。

Switch to AutoPreview印刷およびデバッグする OUTPUT パネル:

ブレークポイント関数: えっと…? 私も欲しいです...

プレビュー パネルを下にドラッグして、より広いコンポーネントをプレビューします。

実装方法

最初はコンポーネントを実装したいだけでした。 Webpack Reactのプレビューを見て試してみた 実装するためにWebpackの設定から始めましたが、依存関係が複雑すぎてこの道は無理だと分かり、数日放置した後に思いつきました。以前の Vue-Layout プロジェクトでコンポーネントを再マウントしました。何度か試みた後、実装の鍵を見つけました。つまり、現在のウィンドウ ファイル パスのコンポーネントは、Webpack と Vite が提供するインポート API を通じて非同期でロードされ、その後、プレビューウィンドウを使用してプレビューを実行します。

つまり、現在のページにコンポーネントを表示するためにプロジェクトにルートを追加するのと基本的には同じですが、プラグインが自動的にそれを行う点が異なります。

Webpack と Vite の両方で提供されるインポート API を使用するため、これら 2 つのビルド ツールを使用して開発する場合、理論的にはすべてのフロントエンド フレームワークがプレビュー用に VS Code でプロジェクト コンポーネントをレンダリングできます。

拡張機能

プラグインの効果をテストするためにいくつかのデモを作成したところですが、実際の開発プロセスで効果があるか役に立たないかはわかりません。 、でも興味があればやりました。

プロセス中にいくつか考えたこともあります:

プレビュー可能なコンポーネントをグレーディングする場合、

基本コンポーネント
• マテリアル(基本的なコンポーネント、要素、ビジネス ロジックの組み合わせ (ログイン ボックスなど)
• page

これら 3 つのレベル。

基本コンポーネント

通常、実際のプロジェクトでは、基本コンポーネントは内部またはサードパーティのコンポーネント ライブラリから取得され、再利用性が高く、結合度が低く、それらが提供するドキュメントは次のとおりです。すでにプレビューされているコンポーネントの効果。このタイプのコンポーネントの IDE プレビューはあまり重要ではないようです。

マテリアル

マテリアルは、基本的なコンポーネントの製品要件に基づいています。コンポーネント、要素、ビジネス 論理的な組み合わせの産物 これらのマテリアルには、プロジェクト内で再利用できるもの、プロジェクト内では再利用されずプロジェクト間で再利用されるもの、ビジネスのカスタマイズにはまったく再利用できないものがあります。

実際のプロジェクトのコラボレーションでは、マテリアルも最も書き換えられる可能性が高く、プロジェクトが大きくなるにつれて、マテリアルは内部のさまざまなページに散在することになります。さまざまな開発者にどのマテリアルが含まれているかを知らせる表示ページはありません。すでに存在しているものはマテリアルの重複になります。この問題に対しては、Alibaba Feibing や JD WORK などの開発チェーンツールが解決策となり、素材の制作、公開、利用までをワンストップで行うことができるため、素材の重複を大幅に回避できることが重要な武器となります。

私は、マテリアルの IDE 内プレビューという軽い武器の解決策を考えました。合理的に同意して使用すれば、マテリアルの繰り返し作成の問題を改善する解決策にもなるかもしれません。たとえば、開発者が再利用可能なマテリアルのプレビューをエクスポートできることで、プラグインが他の開発者が参照できるようにプレビュー可能なコンポーネントをすべてリストできるようにすることが合意されています。他の開発者が新しいマテリアルを開発する前に、最初に再利用可能なコンポーネントがあるかどうかを確認する必要があります。プレビュー リスト。再利用または CV カスタマイズへの直接の参照がある場合、それを自分で記述する必要はありません。

ページ

ページ レベルの再利用性は非常に低いですが、ブラウザーと切り替えは、WeChat 開発者ツールに少し似ています。

------

もう 1 つの観点は、コンポーネントのプレビューによって開発エクスペリエンスが最適化できるのであれば、それはプレビューできるからではないと思います。コンポーネント作成者がプレビュー関数を作成し、コンポーネントをプレビューする場合、当然のことながら、コンポーネントの props にモック データを渡す必要があり、モック データは、自分自身や他の開発者による参照や CV に使用できます。これは、改善の重要な理由です。コードの保守性とコラボレーション コストの削減。

そして、プレビュー機能でコンポーネントの複数のユースケースを一覧表示できれば、他の開発者にとって非常に新鮮なものとなるでしょう:

元のアドレス: https://juejin.cn/post/7075507907281977352

著者: Zhu Jiawei

VSCode に関する関連知識の詳細については、次を参照してください: vscode チュートリアル! ！

以上がVSCode プラグイン共有: Vue/React コンポーネントのリアルタイム プレビュー用プラグインの詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。