【亲测免费】 PlantUML VSCode 插件使用教程

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

PlantUML VSCode 插件的 GitHub 仓库目录结构如下：

vscode-plantuml/
├── assets/
├── dist/
├── node_modules/
├── out/
├── scripts/
├── src/
├── test/
├── .gitignore
├── .vscode/
├── CHANGELOG.md
├── CONTRIBUTING.md
├── LICENSE
├── README.md
├── package.json
├── tsconfig.json
└── webpack.config.js

目录介绍

• assets/: 包含插件使用的静态资源文件。
• dist/: 构建输出目录，包含编译后的插件文件。
• node_modules/: 项目依赖的 Node.js 模块。
• out/: TypeScript 编译输出目录。
• scripts/: 包含一些脚本文件，用于构建和测试插件。
• src/: 插件的主要源代码目录。
• test/: 包含插件的测试代码。
• .gitignore: Git 忽略文件配置。
• .vscode/: VSCode 项目配置文件。
• CHANGELOG.md: 插件更新日志。
• CONTRIBUTING.md: 贡献指南。
• LICENSE: 插件的许可证。
• README.md: 项目说明文档。
• package.json: 项目依赖和脚本配置。
• tsconfig.json: TypeScript 编译配置。
• webpack.config.js: Webpack 构建配置。

2. 项目的启动文件介绍

PlantUML VSCode 插件的启动文件位于 src/ 目录下，主要包括以下几个文件：

• extension.ts: 插件的主入口文件，负责初始化和注册插件功能。
• previewer.ts: 预览器功能实现文件，负责生成和显示 UML 图预览。
• server.ts: 服务器功能实现文件，负责处理 UML 图的渲染请求。
• utils.ts: 工具函数文件，包含一些通用的辅助函数。

主要启动文件介绍

• extension.ts:

  • 负责插件的激活和停用事件。
  • 注册命令和预览器功能。
  • 初始化插件配置和依赖项。

• previewer.ts:

  • 实现 UML 图的预览功能。
  • 处理预览窗口的创建和更新。

• server.ts:

  • 实现 UML 图的渲染服务器。
  • 处理渲染请求并返回渲染结果。

3. 项目的配置文件介绍

PlantUML VSCode 插件的配置文件主要包括以下几个：

• package.json: 项目依赖和脚本配置。
• tsconfig.json: TypeScript 编译配置。
• webpack.config.js: Webpack 构建配置。

配置文件介绍

• package.json:

  • 定义了插件的名称、版本、依赖项等。
  • 包含脚本命令，如构建、测试和发布插件。

• tsconfig.json:

  • 配置 TypeScript 编译选项。
  • 指定编译输出目录和编译选项。

• webpack.config.js:

  • 配置 Webpack 构建过程。
  • 指定入口文件、输出目录和加载器配置。

通过以上配置文件，可以实现插件的开发、测试和发布流程。