如何快速开发 VsCode 插件（入门）？

轩帅

VsCode ，是微软所推出的一款免费的跨平台代码编辑器，用于 OS X，Linux 和 Windows；这款应用基于 Electron 开发，源码则由 TypeScript 编写。它自诞生伊始，就拥有一流性能；并且内置诸多功能比如：智能提示、从编辑器调试代码、内置 Git 命令、可扩展和可定制、以及与现有工具的轻量级集成，诸此等等；鉴于此它如众星捧月一般，深受开发者喜爱，你可以在其开源项目 Visual Studio Code 中一窥它的火热程度。

本文即在探讨：如何快速开发 VsCode 插件。

安装工具包

npm install -g yo generator-code

初始化项目生成

yo code

按照提示一步步选择即可；推荐选择，TypeScript ，不选 Webpack 构建。

重要文件说明

`package.json`

{
    "name": "nicelinks.site", // 插件名
    "displayName": "倾城之链", // 显示在应用市场的名字
    "description": "倾城之链，一款在线导航平台，专注优质、免费资源网站", // 具体描述
    "version": "0.1.0", // 插件的版本号
    "engines": {
        "vscode": "^1.60.0" // 最低支持的 vscode 版本
    },
    "categories": [
        "Other" // 扩展类别
    ],
    // 激活事件组，在哪些事件情况下被激活(*：启动 vscode，插件就会被激活)
    "activationEvents": [
        "onCommand:demo.helloWorld"
    ],
    // 插件的主入口文件
    "main": "./extension.js",
    "contributes": {
        // 命令
        "commands": [
            {
                "command": "extension.nicelinks.site",
                "title": "倾城之链"
            }
        ]
    },
    "scripts": {
        "lint": "eslint .",
        "pretest": "npm run lint",
        "test": "node ./test/runTest.js"
    },
    // 开发依赖项
    "devDependencies": {
        "@types/vscode": "^1.60.0",
        "@types/glob": "^7.1.3",
        "@types/mocha": "^8.2.2",
        "@types/node": "14.x",
        "eslint": "^7.27.0",
        "glob": "^7.1.7",
        "mocha": "^8.4.0",
        "typescript": "^4.3.2",
        "vscode-test": "^1.5.2"
    }
}

extension.js

该文件时其入口文件，即 package.json 中 main 字段对应的文件（可不叫 extension.js 这个名字，只需与 main 字段中的值对应即可）；该文件中将导出两个方法：activate（这是插件被激活时执行的函数）和 deactivate（这是插件被销毁时调用的方法，比如释放内存等）。

'use strict'
import * as vscode from 'vscode'
import { compile } from './helper/utils'

export const COMMAND_NAME = 'extension.nicelinks.site'

export function activate(context: vscode.ExtensionContext) {
    console.log('Congratulations, your extension "nicelinks.site" is now active!')
    context.subscriptions.push(
        vscode.commands.registerCommand(COMMAND_NAME, () => {
            // Do what you want to do
            vscode.window.showInformationMessage(`恭喜您，开启了 VsCode 插件开发旅程`, { modal: true })
        }
    )
)}

export function deactivate() {}

备注：如上代码中，注册的命令名，当与 package.json 中的 command 相匹配。

调试

打开 *.ts(js) 文件，按 F5 ，即可快速开始调试；成功开启调试，会打开的 Vscode 新窗口，基于快捷键 command shift p（Mac 系统），输入 command ，一切顺利的话，即可显现出您预期想要的内容。当然，您也可以在代码中插入 debugger，从而调试代码。

发布

插件开发完毕，可打包成 vsix 插件，自行安装使用；也可注册开发者账号，发布到官网应用市场；值得一提的是，VsCode 插件的发布，和 npm 一样，无需审核。

安装 vsce

npm i vsce -g

基于 vsce 打包

vsce package

项目创建

vsce create-publisher [Azure DeOps NAME]

项目发布

vsce publish

成功之后，会弹出一个链接，略等几分钟之后，即可点击链接查看你发布的插件。或者前往插件市场检索你的插件。