IDE サポート

mdui は VS Code と WebStorm 向けに特別に最適化されており、これらの IDE ではコード補完、ホバー表示などの機能を利用できます。

VS Code

npm でインストールした mdui の場合

npm で mdui をインストールした場合、以下の手順で現在のプロジェクトで VS Code の IDE サポートを有効にできます：

1. プロジェクトのルートディレクトリに .vscode ディレクトリを作成します。
2. .vscode ディレクトリ内に settings.json ファイルを作成します。
3. settings.json ファイルに以下のコードを追加します：

   {
     "html.customData": ["./node_modules/mdui/html-data.en.json"],
     "css.customData": ["./node_modules/mdui/css-data.en.json"]
   }
   

settings.json ファイルが既に存在する場合は、上記の 2 行を JSON ドキュメントのルートノードに追加するだけです。変更後、VS Code を再起動します。

CDN で使用する mdui の場合

CDN で mdui を導入している場合は、mdui の VS Code 拡張機能をインストールすることで IDE サポートを利用できます。

VS Code の拡張機能マーケットプレイスで mdui を検索し、最初の検索結果をインストールするか、ここをクリックしてインストール します。インストール後、すべてのプロジェクトで mdui の IDE サポートが有効になります。

VS Code 拡張機能をインストールするよりも、まず npm でインストールして settings.json ファイルを設定することをお勧めします。これにより、IDE サポートを使用している mdui のバージョンと一致させることができます。

WebStorm

npm でインストールした mdui の場合

npm で mdui をインストールした場合、以下の手順で現在のプロジェクトで WebStorm の IDE サポートを有効にできます：

1. プロジェクトルートの package.json ファイルのルートノードに以下のコードを追加します：

   {
     "web-types": ["./node_modules/mdui/web-types.en.json"]
   }
   

package.json ファイルのルートノードに既に web-types プロパティが存在する場合は、./node_modules/mdui/web-types.en.json を web-types 配列に追加するだけです。変更後、WebStorm を再起動します。

CDN で使用する mdui の場合

CDN で mdui を導入している場合は、mdui の WebStorm プラグインをインストールすることで IDE サポートを利用できます。

WebStorm のプラグインマーケットプレイスで mdui を検索し、最初の検索結果をインストールします。インストール後、すべてのプロジェクトで mdui の IDE サポートが有効になります。

WebStorm プラグインをインストールするよりも、まず npm でインストールして IDE サポートを利用することをお勧めします。これにより、IDE サポートを使用している mdui のバージョンと一致させることができます。

VS Code と WebStorm のサポートの違い

mdui の VS Code と WebStorm のサポートにはいくつかの違いがあります。以下の表に詳細な違いを示します：