diff --git a/packages/vscode-extension/.eslintrc.json b/packages/vscode-extension/.eslintrc.json
new file mode 100644
index 00000000..08243cfd
--- /dev/null
+++ b/packages/vscode-extension/.eslintrc.json
@@ -0,0 +1,24 @@
+{
+    "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"
+    ]
+}
\ No newline at end of file
diff --git a/packages/vscode-extension/README.md b/packages/vscode-extension/README.md
index f86f0b32..783eca45 100644
--- a/packages/vscode-extension/README.md
+++ b/packages/vscode-extension/README.md
@@ -1,71 +1,23 @@
-# quarkd-vscode-extension README
+# Quark design 组件库 vscode 插件
 
-This is the README for your extension "quarkd-vscode-extension". After writing up a brief description, we recommend including the following sections.
+开发本插件旨在帮助开发者更加有效率的使用 Quarkd 来开发项目
 
-## Features
+## 特征
 
-Describe specific features of your extension including screenshots of your extension in action. Image paths are relative to this README file.
+- 快速查看文档
+- 代码自动补全
 
-For example if there is an image subfolder under your extension project workspace:
+## 文档
 
-\!\[feature X\]\(images/feature-x.png\)
+### 用法
 
-> Tip: Many popular extensions utilize animations. This is an excellent way to show off your extension! We recommend short, focused animations that are easy to follow.
+- 移动鼠标到 Quarkd 的标签上
+- 能够看到除了提示的 TS 类型之外，还有一行查看当前组件文档的提示，点击可以跳转到对应组件的文档，方便开发者查阅
 
-## Requirements
+## 自动补全
 
-If you have any requirements or dependencies, add a section describing those and how to install and configure them.
+在输入 `quark-` 时，会出现组件列表提示，这时，可选择任意需要的组件，然后点击回车自动补全，省时又省力～
 
-## Extension Settings
+## 许可
 
-Include if your extension adds any VS Code settings through the `contributes.configuration` extension point.
-
-For example:
-
-This extension contributes the following settings:
-
-- `myExtension.enable`: enable/disable this extension
-- `myExtension.thing`: set to `blah` to do something
-
-## Known Issues
-
-Calling out known issues can help limit users opening duplicate issues against your extension.
-
-## Release Notes
-
-Users appreciate release notes as you update your extension.
-
-### 1.0.0
-
-Initial release of ...
-
-### 1.0.1
-
-Fixed issue #.
-
-### 1.1.0
-
-Added features X, Y, and Z.
-
----
-
-## Following extension guidelines
-
-Ensure that you've read through the extensions guidelines and follow the best practices for creating your extension.
-
-- [Extension Guidelines](https://code.visualstudio.com/api/references/extension-guidelines)
-
-## Working with Markdown
-
-**Note:** You can author your README using Visual Studio Code. Here are some useful editor keyboard shortcuts:
-
-- Split the editor (`Cmd+\` on macOS or `Ctrl+\` on Windows and Linux)
-- Toggle preview (`Shift+CMD+V` on macOS or `Shift+Ctrl+V` on Windows and Linux)
-- Press `Ctrl+Space` (Windows, Linux) or `Cmd+Space` (macOS) to see a list of Markdown snippets
-
-### For more information
-
-- [Visual Studio Code's Markdown Support](http://code.visualstudio.com/docs/languages/markdown)
-- [Markdown Syntax Reference](https://help.github.com/articles/markdown-basics/)
-
-**Enjoy!**
+MIT
\ No newline at end of file
diff --git a/packages/vscode-extension/package.json b/packages/vscode-extension/package.json
index f457fd3a..f61ce34c 100644
--- a/packages/vscode-extension/package.json
+++ b/packages/vscode-extension/package.json
@@ -3,31 +3,37 @@
   "displayName": "quarkd-vscode-extension",
   "description": "quark design extension for vscode",
   "private": true,
-  "version": "1.0.0",
+  "version": "0.0.1",
+  "icon": "src/quarkd.png",
   "engines": {
     "vscode": "^1.67.0"
   },
+	"repository": {
+		"type": "git",
+		"url": "git+https://github.com/hellof2e/quark-design",
+		"directory": "packages/vscode-extension"
+	},
   "categories": [
     "Other"
   ],
+  "publisher": "quarkd",
   "activationEvents": [
     "onLanguage:vue",
     "onLanguage:javascript",
-    "onLanguage:typescript"
+    "onLanguage:typescript",
+    "onLanguage:javascriptreact",
+    "onLanguage:typescriptreact"
   ],
   "main": "./dist/extension.js",
   "contributes": {
     "commands": []
   },
   "scripts": {
-    "TODObuild": "webpack --mode production --devtool hidden-source-map",
-    "package": "yarn gen && yarn build && vsce package",
-    "publish": "vsce publish",
-    "unpublish": "vsce unpublish quarkd.quarkd-vscode-extension",
-    "vscode:prepublish": "yarn run package",
-    "watch": "webpack --watch",
-    "gen": "node ./scripts/createComponentMap.js",
-    "compile": "webpack"
+		"build": "webpack --mode production --devtool hidden-source-map",
+		"package": "yarn gen && yarn build && vsce package",
+		"publish": "vsce publish",
+		"unpublish": "vsce unpublish quarkd.quarkd-vscode-extension",
+		"gen": "node ./scripts/createComponentMap.js"
   },
   "devDependencies": {
     "@types/glob": "^7.2.0",
@@ -41,9 +47,5 @@
     "typescript": "^4.6.4",
     "webpack": "^5.70.0",
     "webpack-cli": "^4.9.2"
-  },
-  "dependencies": {
-    "vsce": "^2.8.0"
-  },
-  "gitHead": "ed682a8b23cf9831613dc6a4b30b0b076d2a54ac"
+  }
 }
diff --git a/packages/vscode-extension/scripts/createComponentMap.js b/packages/vscode-extension/scripts/createComponentMap.js
index a6eff853..0b1e976f 100644
--- a/packages/vscode-extension/scripts/createComponentMap.js
+++ b/packages/vscode-extension/scripts/createComponentMap.js
@@ -3,7 +3,7 @@ const fs = require("fs");
 // eslint-disable-next-line @typescript-eslint/naming-convention
 const MarkdownIt = require("markdown-it")();
 
-const basePath = path.resolve(__dirname, "./../../AppQuarkd/src/packages");
+const basePath = path.resolve(__dirname, "./../../quark/src");
 const componentDirs = fs.readdirSync(basePath, "utf8");
 const TYPE_IDENTIFY_OPEN = "tbody_open";
 const TYPE_IDENTIFY_CLOSE = "tbody_close";
diff --git a/packages/vscode-extension/src/componentMap.ts b/packages/vscode-extension/src/componentMap.ts
index 92fc0ac5..16d7648d 100644
--- a/packages/vscode-extension/src/componentMap.ts
+++ b/packages/vscode-extension/src/componentMap.ts
@@ -1,184 +1,311 @@
-import { ComponentDesc } from "./componentDesc";
+
+import { ComponentDesc } from './componentDesc';
 
 export const componentMap: Record<string, ComponentDesc> = {
-  actionsheet: {
-    site: "/actionsheet",
-    props: ["title=''"],
-  },
-  badge: {
-    site: "/badge",
-    props: ["type=''"],
-  },
-  button: {
-    site: "/button",
-    props: ["type=''"],
-  },
-  card: {
-    site: "/card",
-    props: ["--card-height=''"],
-  },
-  cascadepicker: {
-    site: "/cascadepicker",
-    props: ["open=''"],
-  },
-  cell: {
-    site: "/cell",
-    props: ["title=''"],
-  },
-  checkbox: {
-    site: "/checkbox",
-    props: ["shape=''"],
-  },
-  dialog: {
-    site: "/dialog",
-    props: ["title=''"],
-  },
-  empty: {
-    site: "/empty",
-    props: ["title=''"],
-  },
-  field: {
-    site: "/field",
-    props: ["label=''"],
-  },
-  form: {
-    site: "/form",
-    props: ["value=''"],
-  },
-  grid: {
-    site: "/grid",
-    props: ["column=''"],
-  },
-  icon: {
-    site: "/icon",
-    props: ["name=''"],
-  },
-  image: {
-    site: "/image",
-    props: ["--image-height=''"],
-  },
-  imagepreview: {
-    site: "/imagepreview",
-    props: ["open=''"],
-  },
-  list: {
-    site: "/list",
-    props: ["error=''"],
-  },
-  loading: {
-    site: "/loading",
-    props: ["type=''"],
-  },
-  marketdialog: {
-    site: "/marketdialog",
-    props: ["open=''"],
-  },
-  marquee: {
-    site: "/marquee",
-    props: ["title=''"],
-  },
-  navbar: {
-    site: "/navbar",
-    props: ["title=''"],
-  },
-  noticebar: {
-    site: "/noticebar",
-    props: ["text=''"],
-  },
-  overlay: {
-    site: "/overlay",
-    props: ["open=''"],
-  },
-  picker: {
-    site: "/picker",
-    props: ["open=''"],
-  },
-  popover: {
-    site: "/popover",
-    props: ["open=''"],
-  },
-  popup: {
-    site: "/popup",
-    props: ["position=''"],
-  },
-  progress: {
-    site: "/progress",
-    props: ["value=''"],
-  },
-  pullrefresh: {
-    site: "/pullrefresh",
-    props: ["dark=''"],
-  },
-  radio: {
-    site: "/radio",
-    props: ["shape=''"],
-  },
-  rate: {
-    site: "/rate",
-    props: ["defaultvalue=''"],
-  },
-  search: {
-    site: "/search",
-    props: ["value=''"],
-  },
-  sharesheet: {
-    site: "/sharesheet",
-    props: ["title=''"],
-  },
-  skeleton: {
-    site: "/skeleton",
-    props: ["hide=''"],
-  },
-  stepper: {
-    site: "/stepper",
-    props: ["min=''"],
-  },
-  steps: {
-    site: "/steps",
-    props: ["direction=''"],
-  },
-  sticky: {
-    site: "/sticky",
-    props: ["offsettop=''"],
-  },
-  swipe: {
-    site: "/swipe",
-    props: ["type=''"],
-  },
-  switch: {
-    site: "/switch",
-    props: ["checked=''"],
-  },
-  tab: {
-    site: "/tab",
-    props: ["activekey=''"],
-  },
-  tabbar: {
-    site: "/tabbar",
-    props: ["--tabbar-z-index=''"],
-  },
-  tabbaritem: {
-    site: "/tabbaritem",
-    props: [""],
-  },
-  tag: {
-    site: "/tag",
-    props: ["type=''"],
-  },
-  textarea: {
-    site: "/textarea",
-    props: ["value=''"],
-  },
-  toast: {
-    site: "/toast",
-    props: ["Toast.text=''"],
-  },
-  tooltip: {
-    site: "/tooltip",
-    props: ["open=''"],
-  },
-  uploader: {
-    site: "/uploader",
-    props: ["--uploader-width=''"],
-  },
-};
+  "actionsheet": {
+    "site": "/actionsheet",
+    "props": [
+      "title=''"
+    ]
+  },
+  "badge": {
+    "site": "/badge",
+    "props": [
+      "type=''"
+    ]
+  },
+  "button": {
+    "site": "/button",
+    "props": [
+      "type=''"
+    ]
+  },
+  "card": {
+    "site": "/card",
+    "props": [
+      "title=''"
+    ]
+  },
+  "cascadepicker": {
+    "site": "/cascadepicker",
+    "props": [
+      "open=''"
+    ]
+  },
+  "cell": {
+    "site": "/cell",
+    "props": [
+      "title=''"
+    ]
+  },
+  "checkbox": {
+    "site": "/checkbox",
+    "props": [
+      "shape=''"
+    ]
+  },
+  "collapse": {
+    "site": "/collapse",
+    "props": [
+      "title=''"
+    ]
+  },
+  "countdown": {
+    "site": "/countdown",
+    "props": [
+      "time=''"
+    ]
+  },
+  "datetimepicker": {
+    "site": "/datetimepicker",
+    "props": [
+      "type=''"
+    ]
+  },
+  "dialog": {
+    "site": "/dialog",
+    "props": [
+      "title=''"
+    ]
+  },
+  "empty": {
+    "site": "/empty",
+    "props": [
+      "title=''"
+    ]
+  },
+  "field": {
+    "site": "/field",
+    "props": [
+      "label=''"
+    ]
+  },
+  "form": {
+    "site": "/form",
+    "props": [
+      "submit=''"
+    ]
+  },
+  "grid": {
+    "site": "/grid",
+    "props": [
+      "column=''"
+    ]
+  },
+  "icon": {
+    "site": "/icon",
+    "props": [
+      "color=''"
+    ]
+  },
+  "image": {
+    "site": "/image",
+    "props": [
+      "width=''"
+    ]
+  },
+  "imagepreview": {
+    "site": "/imagepreview",
+    "props": [
+      "open=''"
+    ]
+  },
+  "list": {
+    "site": "/list",
+    "props": [
+      "error=''"
+    ]
+  },
+  "loading": {
+    "site": "/loading",
+    "props": [
+      "type=''"
+    ]
+  },
+  "marketdialog": {
+    "site": "/marketdialog",
+    "props": [
+      "open=''"
+    ]
+  },
+  "marquee": {
+    "site": "/marquee",
+    "props": [
+      "title=''"
+    ]
+  },
+  "nativeuploader": {
+    "site": "/nativeuploader",
+    "props": [
+      "readonly=''"
+    ]
+  },
+  "navbar": {
+    "site": "/navbar",
+    "props": [
+      "title=''"
+    ]
+  },
+  "noticebar": {
+    "site": "/noticebar",
+    "props": [
+      "text=''"
+    ]
+  },
+  "overlay": {
+    "site": "/overlay",
+    "props": [
+      "open=''"
+    ]
+  },
+  "picker": {
+    "site": "/picker",
+    "props": [
+      "open=''"
+    ]
+  },
+  "popover": {
+    "site": "/popover",
+    "props": [
+      "open=''"
+    ]
+  },
+  "popup": {
+    "site": "/popup",
+    "props": [
+      "open=''"
+    ]
+  },
+  "popupextra": {
+    "site": "/popupextra",
+    "props": [
+      "open=''"
+    ]
+  },
+  "progress": {
+    "site": "/progress",
+    "props": [
+      "value=''"
+    ]
+  },
+  "pullrefresh": {
+    "site": "/pullrefresh",
+    "props": [
+      "dark=''"
+    ]
+  },
+  "radio": {
+    "site": "/radio",
+    "props": [
+      "shape=''"
+    ]
+  },
+  "rate": {
+    "site": "/rate",
+    "props": [
+      "defaultvalue=''"
+    ]
+  },
+  "search": {
+    "site": "/search",
+    "props": [
+      "value=''"
+    ]
+  },
+  "sharesheet": {
+    "site": "/sharesheet",
+    "props": [
+      "options=''"
+    ]
+  },
+  "skeleton": {
+    "site": "/skeleton",
+    "props": [
+      "avatar=''"
+    ]
+  },
+  "stepper": {
+    "site": "/stepper",
+    "props": [
+      "min=''"
+    ]
+  },
+  "steps": {
+    "site": "/steps",
+    "props": [
+      "direction=''"
+    ]
+  },
+  "sticky": {
+    "site": "/sticky",
+    "props": [
+      "offsettop=''"
+    ]
+  },
+  "swipe": {
+    "site": "/swipe",
+    "props": [
+      "type=''"
+    ]
+  },
+  "switch": {
+    "site": "/switch",
+    "props": [
+      "checked=''"
+    ]
+  },
+  "tab": {
+    "site": "/tab",
+    "props": [
+      "activekey=''"
+    ]
+  },
+  "tabbar": {
+    "site": "/tabbar",
+    "props": [
+      "fixed=''"
+    ]
+  },
+  "tabbaritem": {
+    "site": "/tabbaritem",
+    "props": [
+      ""
+    ]
+  },
+  "tag": {
+    "site": "/tag",
+    "props": [
+      "type=''"
+    ]
+  },
+  "textarea": {
+    "site": "/textarea",
+    "props": [
+      "value=''"
+    ]
+  },
+  "toast": {
+    "site": "/toast",
+    "props": [
+      "Toast.text=''"
+    ]
+  },
+  "tooltip": {
+    "site": "/tooltip",
+    "props": [
+      "open=''"
+    ]
+  },
+  "uploader": {
+    "site": "/uploader",
+    "props": [
+      "accept=''"
+    ]
+  },
+  "virtuallist": {
+    "site": "/virtuallist",
+    "props": [
+      "itemheight=''"
+    ]
+  }
+}
diff --git a/packages/vscode-extension/src/quarkui.png b/packages/vscode-extension/src/quarkd.png
similarity index 100%
rename from packages/vscode-extension/src/quarkui.png
rename to packages/vscode-extension/src/quarkd.png