2.1 第一个插件

项目初始化

通过 yeoman 可以快速初始化一个 VS Code 插件项目。

npm install -g yo generator-code

安装后执行 yo code 选择 New Extension 并填写相关信息来创建第一个插件项目。

项目结构

.
├── .vscode
│   ├── launch.json     // 插件加载和调试的配置
│   └── tasks.json      // 配置TypeScript编译任务
├── .gitignore          // 忽略构建 out 和 node_modules 等不需要提交的文件
├── README.md           // README 将会展示在市场的插件详情页中
├── src
│   └── extension.ts    // 入口文件
│   └── ...             // 插件源代码
├── package.json        // 插件配置
├── tsconfig.json       // TypeScript配置

入口文件

import * as vscode from 'vscode';

// 插件激活后 VS Code 会立刻调用下述方法
export function activate(context: vscode.ExtensionContext) {

    // 调用 registerCommand 方法注册命令
    let hello = vscode.commands.registerCommand('HelloWorld', () => {
        
        // 每次执行 HelloWorld 命令将会调用该方法
        vscode.window.showInformationMessage('Hello World!');
    });

    context.subscriptions.push(hello);
}

extension.ts

插件配置

{
    "name": "helloworld",
    "displayName": "HelloWorld",
    "description": "HelloWorld example for VS Code",
    "version": "0.0.1",
    "publisher": "panmenglin",
    "repository": "xxx",
    "engines": {
        "vscode": "^1.48.0"
    },
    "categories": ["Other"],
    "activationEvents": ["onCommand:HelloWorld"],
    "main": "./out/extension.js",
    "contributes": {
        "commands": [
            {
                "command": "HelloWorld",
                "title": "Hello World"
            }
        ]
    },
    "scripts": {
        "vscode:prepublish": "npm run compile",
        "compile": "tsc -p ./",
        "watch": "tsc -watch -p ./",
    },
    "devDependencies": {
        "@types/glob": "^7.1.3",
        "@types/mocha": "^8.0.0",
        "@types/node": "^14.0.27",
        "@types/node-fetch": "^2.5.7",
        "@types/vscode": "^1.48.0",
        "@typescript-eslint/eslint-plugin": "^3.8.0",
        "@typescript-eslint/parser": "^3.8.0",
        "eslint": "^7.6.0",
        "glob": "^7.1.6",
        "mocha": "^8.0.1",
        "typescript": "^3.8.3",
        "vscode-test": "^1.4.0"
    },
    "dependencies": {
        "chalk": "^4.1.0",
        "isomorphic-fetch": "^2.2.1",
        "mv": "^2.1.1",
        "node-fetch": "^2.6.0",
        "ora": "^5.0.0",
        "rimraf": "^3.0.2",
        "targz": "^1.0.1"
    }
}

package.json

开发调试

执行菜单栏 Run -> Start Debugging 即可进入调试模式，预览插件效果。

支持编辑器内打断点和日志调试等。