【工具开发】VSCdoe 插件开发

环境准备

1. 创建 Azure DevOps 账户

访问连接，根据提示创建账户 https://aka.ms/SignupAzureDevOps

2. 创建个人访问令牌

个人访问令牌主要用在插件发布时
Name: token Name 用于区分标识token
Organization: token授权组织，这里需要选择授权全部组织（All accessible organizations）
Expiration (optional): 设置token失效时间
Scopes: 权限范围，选择自定义权限（Custom defined:

1. 点击click Show all scopes 连接
2. 在权限中勾选Marketplace 的 Manage 权限
3. 点击create创建token

3. 创建扩展发布账户

此操作需确认完成后再点击确定，因为创建后的publisher 账户不能删除
https://marketplace.visualstudio.com/manage/publishers/editbox
创建完publisher 后，再点击details 补充自己需要的信息

3. 扩展构建脚手架

这里的脚手架叫类似与vue cli一样的，是一个项目创建、构建的工具
https://code.visualstudio.com/api/get-started/your-first-extension
npm install -g yo generator-code

4. 扩展发布脚手架

vscode 扩展是将构建、发布是分开管理的，所以这里还需要下载发布脚手架、用于管理扩展包的发布、下架、删除
https://code.visualstudio.com/api/working-with-extensions/publishing-extension、
注意 vsce 需要node 14以上
npm install -g @vscode/vsce

创建项目

1. 通过yo 脚手架工具创建项目

yo code

What type of extension do you want to create? New Extension (TypeScript)
What's the name of your extension? HelloWorld
ress <Enter> to choose default for all options below ###
 What's the identifier of your extension? helloworld
What's the description of your extension? LEAVE BLANK
Initialize a git repository? Yes
Bundle the source code with webpack? No
Which package manager to use? npm
Do you want to open the new folder with Visual Studio Code? Open with `code`

2. 调试/运行

点击左侧调试菜单，启动调试扩展

3. 打包&发布

官网教程
https://code.visualstudio.com/api/working-with-extensions/publishing-extension

1. 登录扩展发布账户

通过前面安装的@vscode/vsce脚手架，登录到上文在vscode扩展商店创建publisher账户

1. vsce login [extension publisher ID]
2. 根据提示输入在Azure DevOps中创建的个人访问令牌（ Personel Access Tokens）

2. 打包

打包后会在项目根目录生成vslx文件
vsce package

3. 发布

发布后、需要等待几分钟，插件市场才会显示
在发布时如果未指定插件版本号，则默认使用package.json中编写的version值
vsce publish [version code]

常见API

1. showInformationMessage、showWarningMessage、showErrorMessage

以下语法showInformationMessage、showWarningMessage、showErrorMessage通用

• 基础用法

vscode.window.showInformationMessage("消息");

• 显示为模态框

vscode.window.showInformationMessage("消息", {
    modal: true
});

• 添加模态框详细信息

vscode.window.showInformationMessage("消息", {
    detail: "详细信息",
    modal: true
});

• 添加自定义按钮

vscode.window
    .showInformationMessage(
        "是否删除此数据",
        {
            detail: "详细信息",
            modal: true
        },
        "取消",
        "确定"
    )
    .then((action) => {
        if (action == "取消") {
            vscode.window.showInformationMessage("已取消");
        } else {
            vscode.window.showInformationMessage("已删除");
        }
    });

2. vscode.open 命令

主要用于在 vscode 内部打开任何类型文件，它会自动触发相关扩展生态

vscode.commands.executeCommand("vscode.open", vscode.Uri.file("/Users/a.txt"));

3. vscode.workspace.getConfiguration(name,scope)

主要用于获取contributes.configuration.properties配置的属性

• 获取具体属性值可以通过返回值的get(varName)方法
• 更新具体属性值可以通过返回值的update(varName,varValue,true)方法

常见问题 —— FAQ

1. Make sure to edit the README.md file before you package or publish your extension.

1. 不能使用项目构建时的README.md必须修改文件
2. README.md不能存在http连接、必须使用https

2. 运行调试代码没有生效

1. 检查插件激活方式
2. 检查插件支持的最低vscode版本、如果高于本地vscode，需要降低版本

3. WebViewPanel 添加静态资源文件后未生效问题

问题原因：
由于 vscode 的安全策略限制，vscode 加载本地静态资源时，是根据WebViewPanel配置信息(options)中的localResourceRoots属性为根路径查找资源（即使在转换路径时传入的时本地资源的绝对地址）,所以localResourceRoots的地址必须是静态资源的父级目录

//创建WebViewPanel
const _panel = vscode.window.createWebviewPanel(
    this._viewType,
    this._title,
    column || vscode.ViewColumn.One,
    {
        enableScripts: true,
        localResourceRoots: [vscode.Uri.joinPath(context.extensionUri, "src", "assets")]
    }
);

//引入静态资源
const logoImageUri = _panel.webview.asWebviewUri(
    vscode.Uri.joinPath(this._extensionAssetsUri, "images", "logo.png")
);