vscode 扩展插件开发——入门篇

概述

行文内容包括以下几点：

15 分钟快速搭建一个最简单的 vscode 插件环境和代码
了解如何将开发好的插件发布到 vscode 的插件市场
快速浏览 vscode 插件开发的相关 API

安装工具

# 安装需要的包
npm install -g yo generator-code

# 安装发布工具
npm install -g vsce
复制代码

hello world

初始化项目

# 执行以下命令
yo code
复制代码

基本上一路往下点就 ok

调试插件

按 F5 启动调试，在调试界面再按 F1 执行该插件定义的命令

解读 extension.ts

extension.ts 文件是 vscode 插件的入口文件

PS：你通过“初始化项目”生成的 extension.ts 里面应该都是英文注释，以下简单翻译了一下

import * as vscode from 'vscode';

/**
 * 一旦你的插件激活，vscode会立刻调用下述方法
 *    只会在你的插件激活时执行一次
 */
export function activate(context: vscode.ExtensionContext) {
	// 注册一个命令，当该命令被执行时，弹出提示框
	let disposable = vscode.commands.registerCommand('hello-world-vscode.helloWorld', () => {
		vscode.window.showInformationMessage('Hello World from hello-world-vscode!');
	});

  // 监听上面注册的命令
	context.subscriptions.push(disposable);
}

// this method is called when your extension is deactivated
export function deactivate() {}
复制代码

package.json 部分字段解释

{
  "name": "hello-world-vscode", // 插件名
  "displayName": "hello-world-vscode", // 显示在应用市场的名字
  "description": "", // 插件描述
  "version": "0.0.1", // 插件的版本号
  "engines": {
    // 最低支持的vscode版本
    "vscode": "^1.64.0"
  },
  "categories": [
    "Other"
  ],
  // 激活事件组，用来定义插件在什么时候被激活
  "activationEvents": [
        "onCommand:hello-world-vscode.helloWorld"
  ],
  // 插件的主入口文件(PS：因为刚刚选了使用 webpack 打包，所有入口是打包出来的文件)
  "main": "./dist/extension.js",
  // 贡献点这个比较重要，基本所有配置都在这里，保存通过哪些命令触发插件、插件配置信息等等
  // 详情可参考官方文档：https://code.visualstudio.com/api/references/contribution-points
  "contributes": {
    "commands": [
      {
        "command": "hello-world-vscode.helloWorld",
        "title": "Hello World"
      }
    ]
  },
  "scripts": {
    。。。
  },
  "devDependencies": {
    。。。
  }
}
复制代码

发布插件

PS：按以下步骤尝试前请先对照日期，如果已经隔了好几年，可能下文相关网页的呈现会有偏差。如果出现偏差，最好还是对照官方文档解决问题

先去 azure 创建账号

azure

登录完点击以下链接，或者再次访问 azure

进去后，创建组织：（组织命名随便命，不一定要跟项目一致）

获取 Personal Access Token

点击上图位置后，出现下图：

点击 New Token

按上图，输入内容（PS：Name 输入自己记得住的就 ok，最好统一同一个）

创建好后复制保存好这个 Personal Access Token（PS：一定要记得保存下来）

创建发布者

访问创建发布者页面publisher

按上图，填写内容（PS：Name 最好跟上一步一样，好记一点）

vsce login

# 命令行执行，<publisher name>换成上一步“创建发布者”中的 Name 即可
vsce login <publisher name>
复制代码

然后再输入“获取 Personal Access Token” 得到的 Personal Access Toke，输入到命令行中：

在 package.json 中添加 publisher 字段

输入在 “vsce login” 使用的 Name 即可

使用命令发布

如果是第一次发布插件，要修改 README.md 文件才行，随便改一点内容就 ok

执行命令：

# 命令行执行，执行后一路按 y 就 ok
vsce publish
复制代码

查看插件发布情况

访问插件管理

API 简介

commands，可以执行 vscode 注册的命令，包括官方的命令和第三方的命令 window，管理当前窗口，也可以调用与用户交互的功能（如showInformationMessage） workspace，可以获得当前项目的路径等信息

PS：vscode 更新迭代挺快的，最好还是直接看官方文档

参考

VS Code 插件开发文档
- 翻译内容不是很全，建议还是看官方英文文档
官方英文文档