如何开发一个vscode插件

一、前言

前端开发者对于vscode想必不陌生，它插件市场中拥有很多开发者开发的插件，让这个编辑器能力的潜力变得无限可能。如果你觉得vscode的功能不能满足你的要求，你完全可以自己去开发拓展一个插件，来增强自己vscode的功能。

二、需求

我现在有一个需求，就是可以快速复制文件夹或者文件的名称。

image.png

这个该怎么做呢。让我们左手开发吧。

三、安装脚手架

npm install -g yo generator-code

运行生成器，填好下方配置，比如插件名啥的。这里我选择的开发方式是typescript

yo code

# ? What type of extension do you want to create? New Extension (TypeScript)
# ? What's the name of your extension? copyFileOrDirName
### Press <Enter> to choose default for all options below ###

# ? What's the identifier of your extension? helloworld
# ? What's the description of your extension? LEAVE BLANK
# ? Enable stricter TypeScript checking in 'tsconfig.json'? Yes
# ? Setup linting using 'tslint'? Yes
# ? Initialize a git repository? Yes
# ? Which package manager to use? npm

code ./copyFileOrDirName

四、 开发插件

image.png

先看看构建好的目录，主要文件就是package.json和extension.ts（因为我选择的语言是typescript

4.1 配置

package.json

{
  "name": "CopyFileOrDirName",
    "displayName": "copy file or directory name", // 展示名称
    "repository": "https://github.com/HunterXing/copyfilename", // 残酷地址
    "description": "copy file or directory name", // 插件的描述
    "version": "0.0.2", // 插件的版本
    "publisher": "xingheng",
    "engines": {
        "vscode": "^1.67.0" 
    },
    "categories": [
        "Other"
    ],
    "activationEvents": [
        "onCommand:copyname.copy"
    ],
    "main": "./out/extension.js", // 入口文件
    "contributes": { // 这里面是个人认为最最重要配置
        "commands": [ // 注册命令
            {
                "command": "copyname.copy",
                "title": "copy file or directory name"
            }
        ],
        "keybindings": [ // 快捷键
      {
        "command": "copyname.copy",
        "key": "ctrl+win+c",
        "mac": "cmd+ctrl+c",
        "when": "listFocus" // 当列表激活的时候起作用
      }
    ],
        "menus": { // 右键会出出现的目录
      "explorer/context": [
        {
          "command": "copyname.copy",
          "group": "navigation"
        }
      ]
    }
    },
    "scripts": {
        "vscode:prepublish": "npm run compile",
        "compile": "tsc -p ./",
        "watch": "tsc -watch -p ./",
        "pretest": "npm run compile && npm run lint",
        "lint": "eslint src --ext ts",
        "test": "node ./out/test/runTest.js"
    },
    "devDependencies": {
        "@types/vscode": "^1.67.0",
        "@types/glob": "^7.2.0",
        "@types/mocha": "^9.1.1",
        "@types/node": "14.x",
        "@typescript-eslint/eslint-plugin": "^5.21.0",
        "@typescript-eslint/parser": "^5.21.0",
        "eslint": "^8.14.0",
        "glob": "^8.0.1",
        "mocha": "^9.2.2",
        "typescript": "^4.6.4",
        "@vscode/test-electron": "^2.1.3"
    }
}

以上主要的配置就是 package.json中的主要内容，我已经加以注释

• main 定义了整个插件的主入口，，可以新建 src 文件夹，将 extension.ts 已到 src 文件夹下面。

• contributes.commands 注册了名为 copyname.copy 的命令，并在 src/extension.ts 实现。

• 定义完命令之后，还需要在 activationEvents 上添加 onCommand:copyname.copy

4.2 实现

接下来我们在 src/extension.ts 中实现

// The module 'vscode' contains the VS Code extensibility API
// Import the module and reference it with the alias vscode in your code below
import * as vscode from 'vscode';

// this method is called when your extension is activated
// your extension is activated the very first time the command is executed
export function activate(context: vscode.ExtensionContext) {
    
    // Use the console to output diagnostic information (console.log) and errors (console.error)
    // This line of code will only be executed once when your extension is activated
    console.log('Congratulations, your extension "copyname" is now active!');

    // The command has been defined in the package.json file
    // Now provide the implementation of the command with registerCommand
    // The commandId parameter must match the command field in package.json
  // 这块就是注册的命令名称，需要和package.json的activationEvents中的命令一致，下面是具体实现
    let disposable = vscode.commands.registerCommand('copyname.copy', (e) => {
    // 得到文件或者文件夹名称，并且复制到剪切板上
      const name = e ? e?.fsPath?.split('/').pop() :                    vscode.window.activeTextEditor?.document.fileName.split('/').pop();
        const proc = require('child_process').spawn('pbcopy'); 
    proc.stdin.write(name);
        proc.stdin.end();
    // 复制成功后给一个提示
        vscode.window.showInformationMessage(`copied '${name}' to the clipboard `);
    });

    context.subscriptions.push(disposable);
}

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

4.3 调试/测试

image.png

我们只需要点击 Run Extension 即可，此时将打开一个新的vscode 窗口，显示Extension Development Host

image.png

可以看到我们右键的菜单上成功多了一个功能。点击后成功给出提示，并能粘贴

image.png

至此，一个简单的功能便完成了。

五、发布插件

5.1 安装vsce

npm install vsce -g

5.2 打包

打包成 vsix 文件

vsce package

5.3 发布

打开发布市场 官方网站 , 创建自己的发布账号，然后记录下自己的个人 token， 即可开始发布。

vsce publish

输入自己的账号，和 token 之后就可以发布了。等待几分钟后就可以在网页看到自己的项目

image.png

在vscode中也可以搜索到

image.png

参考

VS Code 插件开发文档
vscode Extension API