feature: v0.1.1

.eslintrc.json

@@ -0,0 +1,18 @@
+{
+  "root": true,
+  "parser": "@typescript-eslint/parser",
+  "parserOptions": {
+    "ecmaVersion": 6,
+    "sourceType": "module"
+  },
+  "plugins": ["@typescript-eslint"],
+  "rules": {
+    "@typescript-eslint/naming-convention": "warn",
+    "@typescript-eslint/semi": "warn",
+    "curly": "warn",
+    "eqeqeq": "warn",
+    "no-throw-literal": "warn",
+    "semi": "off"
+  },
+  "ignorePatterns": ["out", "dist", "**/*.d.ts"]
+}

.vscode/launch.json

@@ -0,0 +1,17 @@
+{
+  "version": "0.2.0",
+  "configurations": [
+    {
+      "name": "執行擴充套件",
+      "type": "extensionHost",
+      "request": "launch",
+      "args": [
+        "--extensionDevelopmentPath=${workspaceFolder}"
+      ],
+      "outFiles": [
+        "${workspaceFolder}/out/**/*.js"
+      ],
+      "preLaunchTask": "${defaultBuildTask}"
+    }
+  ]
+}

.vscode/tasks.json

@@ -0,0 +1,18 @@
+{
+  "version": "2.0.0",
+  "tasks": [
+    {
+      "type": "npm",
+      "script": "watch",
+      "problemMatcher": "$tsc-watch",
+      "isBackground": true,
+      "presentation": {
+        "reveal": "never"
+      },
+      "group": {
+        "kind": "build",
+        "isDefault": true
+      }
+    }
+  ]
+}

.vscodeignore

@@ -0,0 +1,34 @@
+# 開發相關檔案
+.vscode/**
+.vscode-test/**
+src/**
+node_modules/**
+out/**
+
+# 設定檔案
+.gitignore
+.gitattributes
+tsconfig.json
+.eslintrc.json
+.editorconfig
+.npmrc
+esbuild.js
+
+# 編譯相關
+**/*.map
+**/*.ts
+!dist/extension.js
+
+# 文件
+# (README.md, LICENSE, CHANGELOG.md are included by default)
+
+# 測試相關
+test/**
+**/.DS_Store
+
+# CI/CD
+.github/**
+
+# 其他
+*.vsix
+.git/**

LICENSE

@@ -0,0 +1,21 @@
+MIT License
+
+Copyright (c) 2024 cingfong
+
+Permission is hereby granted, free of charge, to any person obtaining a copy
+of this software and associated documentation files (the "Software"), to deal
+in the Software without restriction, including without limitation the rights
+to use, copy, modify, merge, publish, distribute, sublicense, and/or sell
+copies of the Software, and to permit persons to whom the Software is
+furnished to do so, subject to the following conditions:
+
+The above copyright notice and this permission notice shall be included in all
+copies or substantial portions of the Software.
+
+THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
+IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
+FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE
+AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER
+LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,
+OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE
+SOFTWARE.

README.md

@@ -1,69 +1,156 @@
 # IconForge IntelliSense
 
-VSCode 擴充套件，為 IconForge 提供智慧型自動補全和預覽功能。
+智能自動補全和 IconForge 圖示預覽的 VSCode 擴充套件。
 
-## 功能
+![Version](https://img.shields.io/badge/version-0.1.0-blue)
+![VSCode](https://img.shields.io/badge/VSCode-1.85.0+-green)
+![License](https://img.shields.io/badge/license-MIT-orange)
 
-- ✅ **自動補全** - 在 `<Icon name="` 輸入時自動顯示所有可用圖示
-- ✅ **Hover 預覽** - 滑鼠移到圖示名稱上顯示 SVG 預覽
-- ✅ **即時更新** - 當圖示更新時自動重新載入
-- ✅ **型別安全** - 基於生成的 TypeScript 型別定義
+## 功能特色
 
-## 使用方法
+### 🎯 智能自動補全
+在 TypeScript/JavaScript React 檔案中輸入 `<Icon name="` 時，自動顯示所有可用的圖示名稱。
 
-### 1. 安裝插件
+### 🖼️ 即時圖示預覽
+選擇圖示時，在詳細資訊面板中即時顯示 SVG 圖示預覽，包括：
+- 圖示視覺預覽（64x64）
+- 檔案路徑和大小
+- 使用範例程式碼
 
-在 VSCode 中開啟專案後，此插件會自動偵測 `iconforge.config.ts` 並啟動。
+### 🎨 內嵌圖示顯示
+在程式碼編輯器中，將 `name="icon-name"` 中的圖示名稱替換為實際的 SVG 圖示預覽。游標移到該位置時會自動顯示原始文字，方便編輯。
 
-### 2. 自動補全
+### 🔍 懸停提示
+將滑鼠懸停在圖示名稱上時，顯示圖示預覽和詳細資訊。
 
-在 React/TypeScript 檔案中輸入：
+## 安裝
 
-```tsx
-<Icon name="|
-```
+### 從 VSCode Marketplace 安裝
+
+1. 開啟 VSCode
+2. 按下 `Ctrl+P` (Windows/Linux) 或 `Cmd+P` (Mac)
+3. 輸入 `ext install cingfong.iconforge-intellisense`
+4. 按下 Enter
+
+或者在 VSCode 擴充套件市場搜尋 "IconForge IntelliSense"
+
+### 從 VSIX 檔案安裝
+
+1. 下載最新的 `.vsix` 檔案
+2. 開啟 VSCode
+3. 按下 `Ctrl+Shift+P` (Windows/Linux) 或 `Cmd+Shift+P` (Mac)
+4. 輸入 "Extensions: Install from VSIX"
+5. 選擇下載的 `.vsix` 檔案
+
+## 使用方式
+
+### 前置條件
+
+此擴充套件需要您的專案中已設定好 IconForge：
 
-游標在引號內時，會自動顯示所有可用圖示清單。
+1. 專案中需有 `iconforge.config.ts` 或 `iconforge.config.js` 配置檔
+2. 已執行 `iconforge build` 生成圖示檔案
+3. 圖示 SVG 檔案位於 `src/assets/icons` 目錄
 
-### 3. Hover 預覽
+### 使用自動補全
 
-將滑鼠移到圖示名稱上：
+1. 在 `.tsx` 或 `.jsx` 檔案中輸入：
+   ```tsx
+   <Icon name="
+   ```
+
+2. 自動補全列表會顯示所有可用的圖示
+   - ✓ 表示該圖示有 SVG 預覽
+   - ✗ 表示該圖示沒有 SVG 預覽
+
+3. 使用鍵盤上下鍵選擇圖示，左側面板會顯示預覽
+
+4. 按下 Enter 完成輸入
+
+### 查看內嵌預覽
+
+程式碼中的圖示名稱會自動顯示為 SVG 圖示：
 
 ```tsx
-<Icon name="home" />  // 滑鼠移到 "home" 上會顯示預覽
+<Icon name="home" />  // "home" 會顯示為 🏠 圖示
 ```
 
-### 4. 重新載入圖示
+將游標移到圖示位置時，會顯示原始文字方便編輯。
+
+### 可用指令
+
+按下 `Ctrl+Shift+P` (Windows/Linux) 或 `Cmd+Shift+P` (Mac) 開啟命令面板：
+
+- **IconForge: Refresh Icons** - 重新載入圖示列表
+- **IconForge: Show Icon Browser** - 顯示所有可用圖示的詳細資訊
+
+## 設定
 
-執行指令：`IconForge: Refresh Icons` (Cmd/Ctrl + Shift + P)
+此擴充套件會自動從以下位置讀取圖示：
 
-## 需求
+- 圖示名稱：`src/generated/icons/react/types.ts`
+- SVG 檔案：`src/assets/icons/*.svg`
 
-- VSCode >= 1.85.0
-- 專案中已安裝 `@iconforge/cli`
-- 已執行 `iconforge build` 生成圖示元件
+## 系統需求
+
+- VSCode 版本 1.85.0 或更高
+- 專案中已安裝並配置 IconForge
 
 ## 開發
 
 ### 本地測試
 
-1. 複製專案
-2. 執行 `npm install`
-3. 按 `F5` 啟動除錯模式
-4. 在新視窗中開啟一個使用 IconForge 的專案
+1. Clone 專案
+   ```bash
+   git clone https://github.com/cingfong/vscode-iconforge.git
+   cd vscode-iconforge
+   ```
 
-### 編譯
+2. 安裝依賴
+   ```bash
+   npm install
+   ```
 
-```bash
-npm run compile
-```
+3. 編譯
+   ```bash
+   npm run compile
+   ```
+
+4. 按 `F5` 啟動除錯模式
+
+5. 在新視窗中開啟一個使用 IconForge 的專案進行測試
 
 ### 打包
 
 ```bash
 npm run package
 ```
 
-## License
+這會在專案根目錄生成 `.vsix` 檔案。
+
+## 已知問題
+
+- 僅支援 TypeScript React (`.tsx`) 和 JavaScript React (`.jsx`) 檔案
+- 需要專案中有 `iconforge.config.ts/js` 才會啟動擴充套件
+
+## 更新日誌
+
+詳見 [CHANGELOG.md](CHANGELOG.md)
+
+## 貢獻
+
+歡迎提交 Issue 和 Pull Request！
+
+專案儲存庫：[https://github.com/cingfong/vscode-iconforge](https://github.com/cingfong/vscode-iconforge)
+
+## 授權
+
+MIT License - 詳見 [LICENSE](LICENSE) 檔案
+
+## 作者
+
+[cingfong](https://github.com/cingfong)
+
+---
 
-MIT
+**享受使用 IconForge IntelliSense！** ✨

esbuild.js

@@ -0,0 +1,56 @@
+const esbuild = require("esbuild");
+
+const production = process.argv.includes('--production');
+const watch = process.argv.includes('--watch');
+
+/**
+ * @type {import('esbuild').Plugin}
+ */
+const esbuildProblemMatcherPlugin = {
+	name: 'esbuild-problem-matcher',
+	setup(build) {
+		build.onStart(() => {
+			console.log('[watch] build started');
+		});
+		build.onEnd((result) => {
+			result.errors.forEach(({ text, location }) => {
+				console.error(`✘ [ERROR] ${text}`);
+				console.error(`    ${location.file}:${location.line}:${location.column}:`);
+			});
+			console.log('[watch] build finished');
+		});
+	},
+};
+
+async function main() {
+	const ctx = await esbuild.context({
+		entryPoints: [
+			'src/extension.ts'
+		],
+		bundle: true,
+		format: 'cjs',
+		minify: production,
+		sourcemap: !production,
+		sourcesContent: false,
+		platform: 'node',
+		outfile: 'dist/extension.js',
+		external: ['vscode'],
+		logLevel: 'silent',
+		plugins: [
+			/* add to the end of plugins array */
+			esbuildProblemMatcherPlugin,
+		],
+	});
+
+	if (watch) {
+		await ctx.watch();
+	} else {
+		await ctx.rebuild();
+		await ctx.dispose();
+	}
+}
+
+main().catch(e => {
+	console.error(e);
+	process.exit(1);
+});