この拡張機能は、Angularプロジェクトで利用できるInputManJSコントロールのビジュアルデザイナを提供します。この拡張機能は、HTMLファイル内でInputManJSコントロールを表す各タグの上にCodeLensリンクを挿入します。リンクをクリックすると、InputManJSデザイナが別のタブに開かれ、関連付けられたマークアップに基づいて初期化されます。デザイナで変更を加えた後で保存ボタンをクリックすると、元のHTMLファイルを変更したAngularタグで更新します。
コマンドパレットからInputManJS Designerコマンドを実行して、スタンドアロンモードでビジュアルデザイナを開くこともできます。このモードでは、ツールボックスボタンを使ってモジュール別に整理された利用可能なコントロール一覧のパネルを表示することができます。コントロール名をクリックすると、サンプルデータを使用してデザイン画面でコントロールがインスタンス化されます。テーマボタンを使って、あらかじめ定義されたInputManJSテーマを試すこともできます。スタンドアロンモードでは保存ボタンはありませんが、ソースビューボタンを使ってコントロールのAngularタグを表示し、必要に応じてコピー＆ペーストすることができます。
この拡張機能には、Visual Studio Code 1.23.0以上が必要です。
永続データ
デザイナは、ソースファイルのCodeLensリンクから呼び出されると、タブやVS Codeを閉じるまで、ファイルやワークスペースごとに状態を追跡します。いつでも自由にタブを切り替えてデザイナに戻ることができ、その内容は保存されます。
拡張機能は、それが呼び出されたAngularタグのドキュメント範囲を覚えていることに注意してください。デザイナを表示した後で元のソースファイルを変更した場合は、関連するデザイナタブを更新するためにCodeLensリンクに再度アクセスする必要があります。そうしないと、デザイナタブに切り替えて保存をクリックすると、間違った場所で更新が行われる可能性があります。
コマンドパレットからスタンドアロンモードで呼び出されると、VS Codeを閉じてデザイナを再度開いても、デザイナはワークスペースごとに状態を永続的に追跡します。
設定
この拡張機能はVS Codeの設定情報を提供しません。しかし、HTMLソースファイルを更新すると、変更されたタグの形式はhtml.format.wrapAttributesの設定によって制御されます。最良の結果を得るには、force-alignedのようなauto以外の値を選択してください。
制限事項
InputManJSコントロールのいくつかの複雑なプロパティは、このバージョンではサポートされていません。
<ng-template>ディレクティブを含むInputManJSコントロールタグは、このバージョンではサポートされていません。
InputManJSコントロールプロパティのマークアップでリテラル値の代わりにバインディングが指定されている場合、対応するプロパティエディタでは、読み取り専用のテキストボックスに斜体でバインディングが表示されます。バインドは保存操作中も保持されます。ただし、デザイナでバインディングを作成または編集するためのインターフェイスはありません。
InputManJSコントロールタグで使用されるイベントバインディングと双方向バインディングは、保存操作中も保持されます。ただし、デザイナでそれらを作成または編集するためのインターフェイスはありません。
InputManJSコントロールタグ内で発生する*ngIfのようなAngular構造ディレクティブは、保存操作時に保存されます。ただし、デザイナで作成または編集するためのインターフェイスはありません。
製品情報
InputManJSの詳細については、下記をご参照ください。
https://developer.mescius.jp/inputmanjs
| |
