如何开发一个 VS Code 代码块插件

You,•5 min read
文档
Back

如何开发一个 VS Code 代码块插件

创建项目

https://code.visualstudio.com/api/get-started/your-first-extension (opens in a new tab)

安装脚手架

npm install -g yo generator-code

脚手架生成项目

yo code

测试插件是否生效

进入项目后按下 F5 启动插件 会弹出来一个插件调试面板

再通过 ⇧⌘P 唤起命令行面板 执行插件提供的能力

开发/调试

开发插件文档 (opens in a new tab)

  1. 在extension.ts 文件中 将 "Hello World from HelloWorld!" 修改为 "Hello VS Code"
  2. 进入插件调试窗口 在命令行面板中搜索 reload 找到执行 Developer:Reload Window 重载窗口
  3. 再次运行 Hello World 指令 看提示文案是否改变

调试文档 (opens in a new tab)

插件剖析 Extension Anatomy

However, let's focus on package.json and extension.ts, which are essential to understanding the Hello World extension

Extension Manifest (opens in a new tab)

Each VS Code extension must have a package.json as its Extension Manifest (opens in a new tab).

Here are some most important fields

Extension Entry File (opens in a new tab)

The extension entry file exports two functions, activate and deactivate. activate is executed when your registered Activation Event happens. deactivate gives you a chance to clean up before your extension becomes deactivated

Wrapping Up

用户体验指南 UX Guidelines

https://code.visualstudio.com/api/ux-guidelines/overview (opens in a new tab)

语言插件开发

文档 (opens in a new tab)

使用 yo code 新建一个 New COde Snippets 快速生成一个项目脚手架

构建打包

构建打包插件文档 (opens in a new tab)

当你想本地打包或者单独分发而不是上架插件市场的时候

vsce (opens in a new tab), short for "Visual Studio Code Extensions", is a command-line tool for packaging, publishing and managing VS Code extensions

npm install -g @vscode/vsce

For extension authors, they can run vsce package in extension root folder to create such VSIX files.

For users who receive such a VSIX file, they can install the extension with code --install-extension my-extension-0.0.1.vsix.

vsce package

构建成功 ✅ 产出一份vsix文件产物

本地安装插件

code --install-extension my-extension-0.0.1.vsix

代码块生效了

应用市场下载安装

预发布

For extensions to publish a pre-release version, a pre-release flag needs to be passed in the package and publish step

vsce package --pre-release
vsce publish --pre-release
正式发布
vsce package
vsce publish

应用市场发布完成 ✅

插件升级版本

文档 (opens in a new tab)

You can auto-increment an extension's version number when you publish by specifying the SemVer (opens in a new tab) compatible number to increment: major, minor, or patch

## Patch 
vsce publish patch
## Feature 
vsce publish minor
## Breaking Change 
vsce publish major

创建Azure Devops 账号 管理插件

获取个人Token文档 (opens in a new tab)

创建账号地址 (opens in a new tab)

创建发布者

A publisher is an identity who can publish extensions to the Visual Studio Code Marketplace. Every extension needs to include a publisher name in its package.json file (opens in a new tab).

You can create a new publisher through the Visual Studio Marketplace publisher management page (opens in a new tab). You need to login in with the same Microsoft account you used to create the Personal Access Token (opens in a new tab) in the previous section.

创建好了 https://marketplace.visualstudio.com/manage/publishers/lzy940610 (opens in a new tab)

登陆成功

vsce login <publisher name>

测试 & 发布

测试插件文档 (opens in a new tab)

因为我这里是纯代码片段没有啥逻辑 就不用写 集成测试和单元测试了 如果是包含逻辑的插件肯定还是要写单元测试的

发布插件文档 (opens in a new tab)

Once you have made a high-quality extension, you can publish it to the VS Code Extension Marketplace (opens in a new tab) so others can find, download, and use your extension. Alternatively, you can package (opens in a new tab) an extension into the installable VSIX format and share it with other users

新发布流程

## step1: 手动升级插件版本
npm version patch|minor|major
## step2：手动构建打包插件
vsce package
## step3: 手动发布插件
vsce publish

如果不然这个顺序的话发布实际还是拿的老的构建产物

更新插件

References (opens in a new tab)

Extension manifest (opens in a new tab)

查看必要属性

功能开发

如何实现插件命令 ✅

1、声明命令 package.json -> contributes -> commands

{
 "contributes": {
  "commands": [
   {
    "command": "extension.hoc",
    "title": "生成页面模版（HOC）"
   }
  ]
 }
}

2、注册命令 vscode.commands.registerCommand

const hoc = vscode.commands.registerCommand('extension.hoc', () => {});

3、挂载命令 context.subscriptions.push(commandName)

context.subscriptions.push(hoc);

如何实现代码模版写入 ✅

import * as vscode from 'vscode';
import { PAGE } from './template';
 
export function activate(context: vscode.ExtensionContext) {
 
 const hoc = vscode.commands.registerCommand('extension.hoc', () => {
  const editor = vscode.window.activeTextEditor;
  if (editor) {
   const lineNum = 0;
   const tpl = PAGE;
   editor.edit((editBuilder) => {
   editBuilder.insert(new vscode.Position(lineNum, 0), tpl) // 插入
   setTimeout(() => {
    editor.document.save()
   }, 200)
   })
  } else {
   vscode.window.showErrorMessage('请在文件中执行命令～');
  }
 });
 
 context.subscriptions.push(hoc);
}

如何写入代码片段

code -> formate -> 展开copy -> vscode 再转换

![[Pasted image 20230215170415.png]]

如何实现支持本地json合并

待实现...

如何实现本地文件上传（PR）

待实现...

2026 © Lizhenyui.