如何快速开发 VsCode 插件?

前端开发 May 11, 2022

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"
    }
}

其中,值得说明是 activationEvents 字段,指明该插件在何种情况下才会被激活,因为只有激活后插件才能被正常使用;更多内容,VsCode 官方文档有做详细说明:Activation Events。另外,通过扩展注册 contributes,可用来扩展 Visual Studio Code 中的各项技能,其有多个配置,详情可参见官方说明:Contribution Points

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

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

猜您可能感兴趣的文章

Tags

Great! You've successfully subscribed.
Great! Next, complete checkout for full access.
Welcome back! You've successfully signed in.
Success! Your account is fully activated, you now have access to all content.