VSCode插件开发

ZhuYuanxiang 2020-04-23 00:00:00
Categories： Tags：

Preface

( 这里就是个对 微软开发文档 的翻译，和网上 其他文档 的总结 )

动机 : 定制化插件，代码中写入自己需要的部分，简化 VSCode 安装了过多的插件，还可以管理自定义插件的代码和版本，也可以发布到 Market

Initialize Environtent

Developing Plugins

New Project

1
npm install -g yo generator-code
1
2
3
4
5
6
7
8
9
10
yo code

# ? What type of extension do you want to create? New Extension ( JavaScript )
# ? What's the name of your extension? HelloWorld
### 下面的选择全部直接「回车」使用默认值 ###

# ? What's the identifier of your extension? helloworld
# ? What's the description of your extension? LEAVE BLANK
# ? Initialize a git repository? Yes
# ? Which package manager to use? npm
1
code ./helloworld

Modify Code

1
vscode.window.showInformationMessage('Hello World from VSCode!');

Advanced Project

1
2
3
4
5
6
7
8
"contributes": {
    "commands": [
    {
        "command": "helloworld.helloWorld",
        "title": "Hello World extension"
    }
    ]
},
1
2
3
4
5
6
7
8
9
// extend.js
function activate(context) {
    // 增加下面的内容
    let disposable_0 = vscode.commands.registerCommand('helloworld.HelloTime', function() {
        var date = new Date();
        vscode.window.showInformationMessage(date.getFullYear() + "-" + date.getMonth() + "-" + date.getDate() + " " + date.getHours() + ":" + date.getMinutes());
    });
    context.subscriptions.push(disposable_0);
}
1
2
3
4
5
6
7
8
9
10
11
12
13
14
// package.json
"activationEvents": [
    // 增加下面的内容
    "onCommand: helloworld.HelloTime"
],
"contributes": {
    "commands": [
        // 增加下面的内容
        {
            "command": "helloworld.HelloTime",
            "title": "Hello Time"
        }
    ]
},
1
2
3
4
5
6
7
8
// extend.js
function activate(context) {
    // 增加下面的内容
    let disposable_1 = vscode.commands.registerCommand('helloworld.HelloErrorWorld', function() {
        vscode.window.showErrorMessage('Hello World from VSCode!');
    });
    context.subscriptions.push(disposable_1);
}
1
2
3
4
5
6
7
8
9
10
11
12
13
14
// package.json
"activationEvents": [
    // 增加下面的内容
    "onCommand: helloworld.HelloErrorWorld"
],
"contributes": {
    "commands": [
        // 增加下面的内容
        {
            "command": "helloworld.HelloErrorWorld",
            "title": "Hello Error World"
        }
    ]
},

Debug Code

注 : 工具的作用是有限的，长期的开发经验才是关键

Code Architecture

1
2
3
4
5
6
7
.├──.vscode│├── launch.json // 载入和调试插件的配置文件
│└── tasks.json // 编译 TypeScript 的配置文件 ( JavaScript 不生成这个文件 )
    ├──.gitignore // git 管理时忽略掉 编译输出 和 node 模块
├── README.md // 描述插件功能的文件
├── src│└── extension.ts // 插件的源代码
├── package.json // 插件的 manifest
├── tsconfig.json // TypeScript 的配置文件 ( JavaScript 不生成这个文件 )

Deploying Plugins

Packing Plugins

1
npm install -g vsce
1
2
3
4
5
6
7
8
# 进入插件的安装目录
$ cd myExtension
$ vsce package
# myExtension.vsix generated
# 打包生成后缀为 vsix 的文件
$ vsce publish
# <publisherID>.myExtension published to VS Code MarketPlace
# 发布打包后的文件到 Market，也可以直接在 VSCode 上安装这个插件

Deploying in Market

注 1：发布后，市场反应有点慢，别着急。特别是更新版本的时候，更需要等一等。

注 2：欢迎大家测试我的 Pangu-Markdown-VScode

Common Errors

2020 年 04 月日记
主要 GitHub 项目列表