メインコンテンツまでスキップ
Version: v4

Ionic VS Codeエクステンション

Ionic VS Codeエクステンションを使用する

Ionic Visual Studio Code 拡張を使用すると、Capacitorアプリの開発に共通するさまざまな機能を、VS Code ウィンドウから離れることなく実行することができます。 Visual Studio Marketplace上の拡張機能 をインストールすることができます。エクステンションをインストールすると、アクティビティバーにIonicのロゴが表示されるようになります。

Capacitorの統合

既存のアプリケーションに Capacitor を追加するには、「Integrate Capacitor」を選択します。

Video of adding Capacitor

Capacitorが統合されたことで、「Run On Web」「Run On Android」「Run On iOS」オプションで、Web、Android、iOSでアプリを実行できるようになりました。

Cordova からの移行

CordovaからCapacitorへの移行 を行う場合、Ionic VS Code拡張を使用すると、そのプロセスをスピードアップすることができます。

このエクステンションは

  • Capacitorの依存関係をプロジェクトに追加します。
  • 既知の、互換性のないCordovaパッケージのフラグを立てる。
  • 必要でない Cordova プラグインを削除します。
  • 特定のCordovaプラグインを同等のCapacitorプラグインに置き換えます。
  • などなど。

この拡張機能は、CordovaからCapacitorへの移行を以前より簡単に行うためのガイドに従うことを支援します。

ネイティブプロジェクト設定の構成

Ionic VS Code 拡張は、プロジェクトに関連する Android と iOS の変数を簡単に設定するのにも役立ちます。

Capacitor Native Configuration Example Image

アプリケーションの表示名、バージョン番号、ビルド番号、およびその他の設定値をプロジェクト内で簡単に変更することができます。

デバッグ

Ionic 拡張を使用すると、Web、Android、iOS (近日公開) で VS Code デバッガを実行できます。

Capacitor Debugging Example Image

Debug フォルダ下のオプションを使用すると、Web とネイティブの両方のコードにブレークポイントを設定することができます。Web用のデバッグは、デバッグ可能な別のWebブラウザインスタンスを起動します(デフォルトではGoogle Chrome)。また、設定オプションからMicrosoft Edgeを選択することもできます。Android では、Webview インスタンスは "Debug" フォルダーにリストされ、Web と同様にデバッグ可能です。

もっとやること

Ionic VS Code 拡張は、マイグレーション、デバッグ、モノレポサポートなど、役立つことがたくさんあります。拡張機能の全リストは、extension overview on the VS Code Marketplace をご覧ください。