vscode-data-preview 项目教程

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

vscode-data-preview/
├── .vscode/
│   ├── launch.json
│   └── settings.json
├── src/
│   ├── data/
│   │   ├── arrow/
│   │   ├── avro/
│   │   ├── config/
│   │   ├── excel/
│   │   ├── json/
│   │   ├── yaml/
│   │   └── large/
│   ├── data-providers/
│   ├── utils/
│   └── main.ts
├── package.json
├── tsconfig.json
└── README.md

目录结构介绍

• .vscode/: 包含 VSCode 的配置文件，如 launch.json 用于调试配置，settings.json 用于项目设置。
• src/: 项目的源代码目录。
  • data/: 包含各种数据格式的示例文件，如 arrow、avro、config、excel、json、yaml 和 large。
  • data-providers/: 数据加载和保存的实现细节。
  • utils/: 工具函数和辅助代码。
  • main.ts: 项目的入口文件。
• package.json: 项目的依赖管理文件，包含项目的依赖包和脚本命令。
• tsconfig.json: TypeScript 的配置文件，定义了 TypeScript 编译器的选项。
• README.md: 项目的介绍文档。

2. 项目的启动文件介绍

main.ts

main.ts 是项目的入口文件，负责初始化扩展并启动数据预览功能。它包含了扩展的主要逻辑，如数据文件的加载、预览面板的创建和配置等。

import * as vscode from 'vscode';
import { DataPreviewPanel } from './data-providers/dataPreviewPanel';

export function activate(context: vscode.ExtensionContext) {
    // 注册命令
    let disposable = vscode.commands.registerCommand('data-preview.open', () => {
        DataPreviewPanel.createOrShow(context.extensionUri);
    });

    context.subscriptions.push(disposable);
}

export function deactivate() {}

3. 项目的配置文件介绍

package.json

package.json 是 Node.js 项目的配置文件，包含了项目的元数据、依赖包、脚本命令等信息。

{
  "name": "vscode-data-preview",
  "displayName": "Data Preview",
  "version": "2.3.0",
  "description": "Data Preview extension for importing, viewing, slicing, dicing, charting & exporting large JSON array/config, YAML, Apache Arrow, Avro, Parquet & Excel data files",
  "publisher": "RandomFractalsInc",
  "engines": {
    "vscode": "^1.40.0"
  },
  "categories": [
    "Other"
  ],
  "activationEvents": [
    "onCommand:data-preview.open"
  ],
  "main": "./src/main.ts",
  "contributes": {
    "commands": [
      {
        "command": "data-preview.open",
        "title": "Data: Preview Data"
      }
    ]
  },
  "scripts": {
    "vscode:prepublish": "npm run compile",
    "compile": "tsc -p ./",
    "watch": "tsc -watch -p ./",
    "postinstall": "node ./node_modules/vscode/bin/install",
    "test": "npm run compile && node ./node_modules/vscode/bin/test"
  },
  "devDependencies": {
    "typescript": "^3.3.1",
    "vscode": "^1.1.28",
    "tslint": "^5.12.1",
    "@types/node": "^10.12.21",
    "@types/mocha": "^2.2.42"
  }
}

tsconfig.json

tsconfig.json 是 TypeScript 项目的配置文件，定义了 TypeScript 编译器的选项。

{
  "compilerOptions": {
    "module": "commonjs",
    "target": "es6",
    "outDir": "out",
    "rootDir": "src",
    "sourceMap": true,
    "strict": true
  },
  "include": [
    "src/**/*.ts"
  ],
  "exclude": [
    "node_modules",
    ".vscode-test"
  ]
}

通过以上配置文件，可以了解项目的依赖管理、编译选项以及扩展的主要功能。