@haijs/vscode

这是一个基于 VS Code Web 版本的封装包，提供了在 Web 环境中运行 VS Code 的能力。该包通过自动化构建流程，将 VS Code 的 Web 版本打包为可集成的模块。

功能特性

• 🌐 完整的 VS Code Web 体验：基于官方 VS Code 源码构建
• 🔧 自动化构建：一键构建 VS Code Web 版本
• 📦 模块化设计：可作为 npm 包集成到其他项目中
• 🎯 扩展支持：支持 VS Code 扩展的安装和使用
• ⚡ 开发友好：提供开发模式下的热重载支持

安装

npm install @haijs/vscode
# 或
yarn add @haijs/vscode
# 或
pnpm add @haijs/vscode

使用方式

1. 在项目中引用

在你的 tsconfig.json 中配置路径映射：

{
  "compilerOptions": {
    "paths": {
      "vs/workbench/workbench.web.main": [
        "./node_modules/@haijs/vscode/.vscode-oss/src/vs/workbench/workbench.web.main.internal.ts"
      ],
      "vs/*": [
        "./node_modules/@haijs/vscode/.vscode-oss/src/vs/*"
      ]
    }
  }
}

2. Vite 集成

在你的 vite.config.js 中配置：

import { defineConfig } from 'vite';
import path from 'path';

const __dirname = path.resolve();
const vscodeRoot = path.resolve(__dirname, 'node_modules/@haijs/vscode');

export default defineConfig({
  build: {
    lib: {
      entry: path.resolve(__dirname, 'src/bootstrap.ts'),
      formats: ['amd'],
      fileName: () => 'bootstrap.js',
    },
    rollupOptions: {
      external: ['vscode', /^vs\/.*/],
      output: {
        format: 'amd',
        amd: { id: 'vs/bootstrap' },
      },
    },
  },
  plugins: [
    // 复制 VS Code 资源的插件
    {
      name: 'vite-plugin-prepare-vscode',
      apply: 'build',
      buildStart() {
        const vscodeDistDir = path.resolve(__dirname, 'public/vscode-web');
        const fs = require('fs-extra');
        
        // 清理和复制资源
        fs.emptyDirSync(vscodeDistDir);
        fs.copySync(
          path.resolve(vscodeRoot, 'dist/'),
          path.resolve(vscodeDistDir, './')
        );
      }
    }
  ]
});

3. 环境变量

在你的项目中设置环境变量：

# .env
VITE_VSCODE_CDN_URL=https://your-cdn-url.com

构建流程

自动构建

包安装时会自动执行预安装脚本，克隆 VS Code 仓库：

npm install @haijs/vscode

手动构建

如果需要手动构建 VS Code Web 版本：

# 在项目根目录
npm run build:vscode

# 或直接在包目录
cd node_modules/@haijs/vscode
npm run build:vscode

目录结构

构建完成后，包的目录结构如下：

node_modules/@haijs/vscode/
├── dist/                    # 构建输出目录
│   ├── out/                 # VS Code Web 构建产物
│   ├── extensions/          # VS Code 扩展
│   ├── node_modules/        # VS Code 依赖
│   └── extension.json       # 扩展配置文件
├── .vscode-oss/            # VS Code 源码目录
└── package.json

扩展开发

添加自定义扩展

1. 在项目的 extensions/ 目录下创建扩展
2. 扩展会自动被构建系统发现并包含在最终产物中

扩展配置

扩展信息会被自动收集并生成 extension.json 文件，包含：

• 扩展的 package.json
• 本地化配置 (package.nls.json)
• 扩展路径信息

开发模式

在开发模式下，系统会：

• 监听扩展变化并自动重新构建
• 包含 source map 便于调试
• 跳过某些生产环境的优化

# 开发模式
npm run dev

注意事项

1. 首次安装时间：首次安装时可能需要较长时间，因为需要克隆 VS Code 仓库并构建
2. 网络要求：构建过程需要从 GitHub 克隆仓库，需要稳定的网络连接
3. 磁盘空间：VS Code 源码和构建产物需要较大的磁盘空间
4. Node.js 版本：建议使用 Node.js 16 或更高版本

故障排除

构建失败

如果构建失败，请检查：

• Node.js 版本是否符合要求
• 网络连接是否正常
• 磁盘空间是否充足

清理缓存

如果需要重新构建：

# 删除包并重新安装
rm -rf node_modules/@haijs/vscode
npm install

许可证

MIT License

相关链接

• VS Code 源码
• VS Code Web API 文档