Vega Viewer for VSCode 的启动与配置教程

一、项目目录结构及介绍

Vega Viewer for VSCode 是一个用于在 Visual Studio Code 编辑器中查看 Vega 和 Vega-Lite 图表的插件。以下是项目的目录结构及各部分的作用：

vscode-vega-viewer/
├── .vscode/              # Visual Studio Code 的项目配置文件
├── images/               # 存储项目所需的图片资源
├── package-lock.json     # npm 包依赖的锁定文件
├── package.json          # 项目配置文件，定义了插件的元数据和依赖
├── src/                  # 源代码目录
│   ├── extension.js      # 插件的主要逻辑
│   ├── extension.test.js # 插件的测试代码
│   └── ...
├── test/                 # 测试用例目录
│   └── ...
└── ...

• .vscode/: 存储 Visual Studio Code 的项目设置，如代码片段、代码风格等。
• images/: 存储插件所需的图像资源，如图标等。
• package-lock.json: 用于锁定项目的依赖版本，确保在不同环境下安装的依赖是一致的。
• package.json: 定义了插件的基本信息，如名称、版本、作者、依赖等。
• src/: 存储插件的核心代码。
• test/: 存储插件的测试用例。

二、项目的启动文件介绍

项目的启动文件为 src/extension.js。以下是启动文件的基本结构：

const vscode = require('vscode');
const vega = require('vega');

// 插件启动函数
function activate(context) {
    // 注册命令
    let disposable = vscode.commands.registerCommand('extension.vegaViewer', () => {
        // 命令实现逻辑
        // ...
    });

    // 事件监听
    context.subscriptions.push(disposable);
}

// 插件退出函数
function deactivate() {
    // 清理工作
    // ...
}

exports.activate = activate;
exports.deactivate = deactivate;

这个文件定义了插件启动时执行的函数 activate 和退出时执行的函数 deactivate。activate 函数中注册了插件的命令和相应的执行逻辑。

三、项目的配置文件介绍

项目的配置文件为 package.json。以下是配置文件中的关键部分：

{
    "name": "vscode-vega-viewer",
    "displayName": "Vega Viewer",
    "description": "Vega and Vega-Lite viewer for Visual Studio Code",
    "version": "0.0.1",
    "publisher": "RandomFractals",
    "engines": {
        "vscode": "^1.56.0"
    },
    "categories": ["Other"],
    "activationEvents": [
        "onCommand:extension.vegaViewer"
    ],
    "main": "./src/extension",
    "contributes": {
        "commands": [{
            "command": "extension.vegaViewer",
            "title": "Vega Viewer"
        }]
    },
    "scripts": {
        "vscode:prepublish": "npm run compile",
        "compile": "tsc -p ./",
        "watch": "tsc -p ./ -w",
        "postinstall": "node ./node_modules/vscode/bin/compile"
    },
    "dependencies": {
        "vega": "^5.17.0",
        "vega-lite": "^4.17.0"
    },
    "devDependencies": {
        "@types/node": "^12.0.0",
        "@types/vscode": "^1.56.0",
        "typescript": "^4.0.0"
    }
}

这个文件定义了插件的名称、显示名称、描述、版本、发布者、支持的 Visual Studio Code 版本、类别、启动事件、主文件路径、贡献的命令等信息。此外，还定义了构建和安装脚本、依赖项和开发依赖项。