可以安装本地的 vsix 插件吗？

[liweijian]

我想从vscode下载一些vsix插件集成到默认ide，尝试过把 vsix 拷贝到 web-lite/extension/，然后再

npm i
npm run compile:ext-worker
npm run build

发现没有生效

[erha19]

@liweijian 纯前端版本支持的插件是有要求的，可以看一下这个文档 https://opensumi.com/zh/docs/extension/web-extension , 另外你可以把 .vsix 文件修改为 .zip 文件进行解压。

[liweijian]

是直接解压后重新编译就行了吗？我把这个插件 https://marketplace.visualstudio.com/items?itemName=chenglou92.rescript-vscode 改成 zip 后解压，然后

npm i
npm run compile:ext-worker
npm run build

发现前端语法高亮还没有生效

[erha19]

@liweijian 不是所有插件都可以在纯前端版本中使用，需要是 Web Extension，可以看一下我上面给的文档介绍

[liweijian]

看了一下代码

https://github.com/opensumi/ide-startup-lite/blob/main/web-lite/extension/utils.ts#L56 https://github.com/opensumi/ide-startup-lite/blob/main/web-lite/extension/index.ts#L6

当前似乎只支持加载 gw.alipayobjects.com/os/marketplace 上面托管的扩展吗？不知道能不能加载本地的？

我尝试过把 anycode 拷贝到 web-lite/extension/extension-anycode 目录：

❯ ls web-lite/extension/extension-anycode
README.md       client          package.json        telemetry.json
ThirdPartyNotices.txt   dist            server          tsconfig.base.json

然后 yarn start 启动服务，没有看到语法高亮生效:

[erha19]

@liweijian

当前似乎只支持加载 gw.alipayobjects.com/os/marketplace 上面托管的扩展吗？不知道能不能加载本地的？

这里只是示例，将插件托管到了远程 CDN 上面，你如果本地搭静态服务器，也可以加载本地的插件

语法高亮方面

目前使用的语法高亮能力是通过 @opensumi/textmate-languages 提供的，你可以自行新增或删减

https://github.com/opensumi/ide-startup-lite/blob/f4570890d963207ffdab6d419d6f2cf33c2824fd/web-lite/grammar/index.contribution.ts#L8

支持的语言见：https://www.npmjs.com/package/@opensumi/textmate-languages?activeTab=code

代码索引支持

目前主要通过 anycode 提供代码索引相关能力支持

[liweijian]

我尝试修改成从本地加载插件，

首先把 anycode 放到如下目录:

❯ ls web-lite/extension/anycode-0.0.70
README.md       client          package.json        telemetry.json
ThirdPartyNotices.txt   dist            server          tsconfig.base.json

❯ grep "name" web-lite/extension/anycode-0.0.70/package.json
    "name": "anycode",

在 utils.ts 增加 getLocalExtension() 函数:

import { promises as fs } from 'fs';
import * as path from 'path';

async function readJsonFile(filePath: string): Promise<any> {
  try {
    const data = await fs.readFile(filePath, "utf8");
    const json = JSON.parse(data);
    return json;
  } catch (error) {
    console.error("Error:", error);
    throw error;
  }
}

export async function getLocalExtension(extensionId: string, version: string): Promise<IExtensionMetaData | undefined> {
  const [, extName] = extensionId.split('.')
  const extPath = path.resolve(`web-lite/extension/${extensionId}-${version}/`, './package.json');
  const packageJSON = await readJsonFile(extPath).then((res) => res.json());
  // merge for `kaitianContributes` and `contributes`
  packageJSON.contributes = mergeContributes(
    packageJSON.kaitianContributes,
    packageJSON.contributes,
  );

  const extensionPath = 'ext://' + extPath;
  const extension = {
    // vscode 规范
    id: `${packageJSON.publisher}.${packageJSON.name}`,
    // 使用插件市场的 id
    // 从插件市场下载的插件命名规范为 ${publisher}.${name}-${version}
    extensionId,
    extendConfig: {},
    path: extensionPath,
    packageJSON,
    defaultPkgNlsJSON: !extName.startsWith('anycode') && await tryFetchPackageNlsJson(extensionId, version),
    packageNlsJSON: undefined,
    realPath: extensionPath,
    uri: Uri.parse(extensionPath),
  };
  return extension as IExtensionMetaData;
}

而 index.ts 中则改成:

import { getLocalExtension } from './utils';

const localExtensionList = [
  { id: 'anycode', version:'0.0.70' }
];

export const getExtensions: () => Promise<IExtensionMetaData[]> = () => {
  console.log("====> entering getExtensions()")
  const list = localExtensionList.map((ext) => getLocalExtension(ext.id, ext.version));
  return Promise.all(list).then((exts) => exts.filter((item) => !!item) as IExtensionMetaData[]);
};

但是运行却出现：

请问加载本地插件是还有其他限制吗？或者有没有其他更简单的加载本地插件的方法?

[erha19]

@liweijian 在纯前端环境下，插件的加载实际上是通过 Http 方式进行请求，你可以直接修改文件 extension/index.ts#L27使用你们自己的 CDN/OSS 插件资源 ，这里不能直接用 Node 能力去加载（背离了纯前端这一设计理念），可以看一下这个文档了解一下插件的一些使用场景 纯前端插件。