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.zh-cn.json"],
     "css.customData": ["./node_modules/mdui/css-data.zh-cn.json"]
   }
   

如果 settings.json 檔案已經存在，只要將上述兩行程式碼加入 JSON 內容的根節點即可。修改完成後，重新啟動 VS Code。

透過 CDN 使用的 mdui

如果你是透過 CDN 使用 mdui，可安裝 mdui 的 VS Code 擴充功能來取得 IDE 支援。

在 VS Code 的擴充功能市集中搜尋 mdui，選擇第一筆搜尋結果進行安裝，或點擊此處安裝。安裝完成後，所有專案都會啟用 mdui 的 IDE 支援。

建議優先透過 npm 安裝並設定 settings.json 檔案，而非安裝 VS Code 擴充功能，以確保 IDE 支援與目前使用的 mdui 版本保持一致。

WebStorm

透過 npm 安裝的 mdui

如果你是透過 npm 安裝 mdui，可依下列步驟在目前專案中啟用 WebStorm 的 IDE 支援：

1. 在專案根目錄的 package.json 檔案的根節點中加入以下程式碼：

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

如果 package.json 檔案的根節點已存在 web-types 屬性，只需將 ./node_modules/mdui/web-types.zh-cn.json 加入 web-types 陣列中即可。修改完成後，重新啟動 WebStorm。

透過 CDN 使用的 mdui

如果你是透過 CDN 引入的 mdui，可以透過安裝 mdui 的 WebStorm 擴充功能來獲得 IDE 支援。

在 WebStorm 的外掛市集中搜尋 mdui，選擇第一筆搜尋結果進行安裝。安裝完成後，所有專案都會啟用 mdui 的 IDE 支援。

建議優先透過 npm 安裝來取得 IDE 支援，而非安裝 WebStorm 擴充功能，以確保 IDE 支援與目前使用的 mdui 版本保持一致。

對 VS Code 和 WebStorm 的支援差異

mdui 對 VS Code 和 WebStorm 的支援存在一些差異。以下表格列出了詳細的差異：