Visual Studio Code Webview UI Toolkit 示例项目教程

时泓岑Ethanael

于 2024-08-20 09:26:42 发布

阅读量389

点赞数 3

本文链接：https://blog.csdn.net/gitblog_00390/article/details/141345452

版权

Visual Studio Code Webview UI Toolkit 示例项目教程

vscode-webview-ui-toolkit-samples项目地址:https://gitcode.com/gh_mirrors/vs/vscode-webview-ui-toolkit-samples

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

vscode-webview-ui-toolkit-samples/
├── component-gallery/
├── editable-data-grid/
├── hello-world/
├── hello-world-webpack/
├── notepad/
├── weather-webview/
├── README.md
└── LICENSE

component-gallery: 展示 Webview UI Toolkit 中所有组件的示例。
editable-data-grid: 展示如何创建可编辑数据网格的示例。
hello-world: 基本的 "Hello World" 启动扩展。
hello-world-webpack: 使用 Webpack 构建的基本 "Hello World" 启动扩展。
notepad: 利用 VS Code TreeView API 的简单记事本扩展。
weather-webview: 展示在 VS Code 侧边栏中使用工具包的示例。
README.md: 项目说明文件。
LICENSE: 项目许可证文件。

2. 项目的启动文件介绍

每个示例扩展都有一个 package.json 文件，这是 Node.js 项目的配置文件，也包含了 VS Code 扩展的元数据。以下是一个典型的 package.json 文件示例：

{
  "name": "hello-world",
  "displayName": "Hello World",
  "version": "0.0.1",
  "publisher": "vscode-samples",
  "engines": {
    "vscode": "^1.52.0"
  },
  "categories": [
    "Other"
  ],
  "activationEvents": [
    "onCommand:hello-world.helloWorld"
  ],
  "main": "./out/extension.js",
  "contributes": {
    "commands": [
      {
        "command": "hello-world.helloWorld",
        "title": "Hello World"
      }
    ]
  },
  "scripts": {
    "vscode:prepublish": "npm run compile",
    "compile": "tsc -p ./",
    "watch": "tsc -watch -p ./",
    "pretest": "npm run compile && npm run lint",
    "lint": "eslint src --ext ts",
    "test": "node ./out/test/runTest.js"
  },
  "devDependencies": {
    "@types/vscode": "^1.52.0",
    "@types/glob": "^7.1.3",
    "@types/mocha": "^8.0.4",
    "@types/node": "^12.11.7",
    "eslint": "^7.10.0",
    "glob": "^7.1.6",
    "mocha": "^8.1.3",
    "typescript": "^4.0.3",
    "vscode-test": "^1.4.0"
  }
}

name: 扩展的名称。
displayName: 扩展的显示名称。
version: 扩展的版本号。
publisher: 扩展的发布者。
engines: 扩展所需的 VS Code 版本。
categories: 扩展的分类。
activationEvents: 扩展的激活事件。
main: 扩展的主入口文件。
contributes: 扩展的贡献点，如命令、视图等。
scripts: 构建和测试脚本。
devDependencies: 开发依赖项。

3. 项目的配置文件介绍

每个示例扩展都有一个 tsconfig.json 文件，这是 TypeScript 项目的配置文件。以下是一个典型的 tsconfig.json 文件示例：

{
  "compilerOptions": {
    "module": "commonjs",
    "target": "es6",
    "outDir": "out",
    "rootDir": "src",
    "sourceMap": true,
    "strict": true,
    "esModuleInterop": true,
    "skipLibCheck": true,
    "forceConsistentCasingInFileNames": true
  },
  "include": [
    "src"
  ]
}