【亲测免费】 Visual Studio Code Webview UI Toolkit 使用教程

2026-01-17 08:41:06作者：江焘钦

1. 项目的目录结构及介绍

vscode-webview-ui-toolkit/
├── docs/
│   ├── ComponentDocs/
│   ├── ToolkitExtensionSamples/
│   ├── WebviewAPIGuide/
│   ├── WebviewAPIGuidelines/
│   ├── WebviewUXGuidelines/
│   └── ExtensionAPIDocs/
├── src/
│   ├── components/
│   ├── styles/
│   └── index.ts
├── tests/
│   ├── unit/
│   └── integration/
├── .gitignore
├── .npmrc
├── .prettierrc
├── LICENSE
├── README.md
├── package.json
├── tsconfig.json
└── tsdoc.json

目录结构介绍

docs/: 包含项目的文档，如组件文档、示例、API指南等。
src/: 项目的源代码，包括组件、样式和入口文件。
tests/: 包含单元测试和集成测试。
.gitignore: Git忽略文件。
.npmrc: npm配置文件。
.prettierrc: Prettier代码格式化配置文件。
LICENSE: 项目许可证。
README.md: 项目说明文档。
package.json: 项目依赖和脚本配置。
tsconfig.json: TypeScript配置文件。
tsdoc.json: TypeScript文档生成配置文件。

2. 项目的启动文件介绍

项目的启动文件主要是 src/index.ts，它是整个项目的入口文件，负责导出所有组件和样式。

// src/index.ts
export * from './components';
export * from './styles';

启动文件介绍

src/index.ts: 导出所有组件和样式，使得其他模块可以方便地引入和使用。

3. 项目的配置文件介绍

package.json

package.json 文件包含了项目的依赖、脚本和其他配置信息。

{
  "name": "@vscode/webview-ui-toolkit",
  "version": "0.9.0",
  "description": "A component library for building webview-based extensions in Visual Studio Code",
  "main": "dist/index.js",
  "types": "dist/index.d.ts",
  "scripts": {
    "build": "tsc",
    "test": "jest",
    "lint": "eslint src --ext .ts,.tsx"
  },
  "dependencies": {
    "lit-html": "^2.0.0"
  },
  "devDependencies": {
    "@types/jest": "^27.0.0",
    "eslint": "^8.0.0",
    "jest": "^27.0.0",
    "typescript": "^4.0.0"
  },
  "repository": {
    "type": "git",
    "url": "git+https://github.com/microsoft/vscode-webview-ui-toolkit.git"
  },
  "keywords": [
    "vscode",
    "webview",
    "toolkit",
    "components"
  ],
  "author": "Microsoft Corporation",
  "license": "MIT",
  "bugs": {
    "url": "https://github.com/microsoft/vscode-webview-ui-toolkit/issues"
  },
  "homepage": "https://github.com/microsoft/vscode-webview-ui-toolkit#readme"
}

tsconfig.json

tsconfig.json 文件是 TypeScript 的配置文件，定义了编译选项和文件包含规则。

{
  "compilerOptions": {
    "target": "es6",
    "module": "commonjs",
    "outDir": "./dist",
    "rootDir": "./src",
    "strict": true,
    "esModuleInterop": true,
    "skipLibCheck": true,
    "forceConsistentCasingInFileNames": true
  },
  "include": [
    "src/**/*"
  ]
}