开发一个自己的VSCode插件

news2024/12/24 3:10:43

1、前言

对于一个前端开发者来说，开发工具，最常用的应该就是VSCode了，因为它免费，速度快，提供了丰富了插件等优点，使得越来越多的前端开发者都来使用它了，在开发的时候如果有丰富的插件提供支持，那么我们写代码的速度会快很多，体验也有很好，有时候我们有一些自己的需求，那么可以自己尝试开发一款自己的插件来提升自己的效率，以下会讲到如何开发自己的一个插件，VSCode官方也提供了很多api，大家有时间可以多去研究一下。

以下是官方文档：Your First Extension | Visual Studio Code Extension API

如果你不知道如何下手，也可以通过微软官方对应的示例代码跑起来，去研究下对应的示例代码，代码示例地址如下所示：

github地址：GitHub - microsoft/vscode-extension-samples: Sample code illustrating the VS Code extension API.

2、快速开始

首先，我们需要提前安装Node和Git的环境，安装完之后，执行以下命令来安装对应的脚手架：

npm install -g yo generator-code

完成上面的安装后，可以通过以下命令生成基本的代码文件：

yo code

运行之后，可以选择对应的扩展类型，进行创建。

在插件的开发过程中，会经常改动文件，可以运行pnpm watch命令，用来监听文件的改动，以及打包运行。

注：所以在调试插件之前，进行启动，否则在调试窗口，自定义的命令会不生效。

3、文件目录

name-transform
├─ 📁.vscode
│  ├─ 📄extensions.json
│  ├─ 📄launch.json
│  ├─ 📄settings.json
│  └─ 📄tasks.json
├─ 📁src
│  ├─ 📁test
│  │  └─ 📄extension.test.ts
│  └─ 📄extension.ts
├─ 📄.eslintrc.json
├─ 📄.gitignore
├─ 📄.vscode-test.mjs
├─ 📄.vscodeignore
├─ 📄CHANGELOG.md
├─ 📄package.json
├─ 📄README.md
├─ 📄tsconfig.json
├─ 📄vsc-extension-quickstart.md
└─ 📄webpack.config.js

4、调试插件

在VSCode工具左侧，运行和调式图标，然后再点击绿色的小三角按钮或者快捷键（F5）就可以运行了。

执行完成之后，会弹出一个新的VSCode窗口，看到扩展开发宿主字样，说明调试窗口就开启成功了。。。

通过快捷键“Ctrl+Shift+P”，然后输入“Hello world”，选中条目，窗口下方会有对应的提示！如下所示：

5、编辑插件

开发插件的文件，位于src\extension.ts，extension.ts是开发的入口文件，如果代码量就直接在这个文件中写，代码量比较大可以在其他文件中写，最后从当前文件中进行引用就行。

6、插件功能实现

在开发过程中，可能有这样的需求，在写代码的时候，需要写命名规范的代码，那么就需要对应自己命名的代码进行转换。

1、定义命令

首先，需要在pageage.json定义，所需要的命令，如下图所示：

然后需要配置，在编辑区域选中，进行转换。配置如下所示：

在这里定义完所有的自定义的命令之后，就需要在入口文件（extension.ts）写每个命令对应的逻辑代码。

2、功能代码

把所有命令名定义成一个常量对象，如下所示：

把所有命令，循环进行注册，如下所示：

然后写选中替换的功能逻辑，如下所示;

最后transformFun函数是具体的替换逻辑，根据不同的命令，返回对应的字符串。

2.1、添加右键菜单

添加右键菜单进行转换，需要在package.json中进行配置。如下所示：

2.2 添加快捷键

添加快捷键功能，也需要在package.json中进行配置，部分示例如下所示：

到这里功能基本上就开发完了哈，完成之后可以看看实际效果是什么样子的。

7、发布插件

首先，我们需要把自己开发好的插件进行打包（.vsix），需要安装vsce，这个包，vsce是“Visual Studio Code Extensions”的缩写，是一个用于打包、发布和管理VS Code扩展的命令行工具。

安装

确保你已经安装Nodejs，然后运行如下命令：

npm install -g @vscode/vsce

使用

然后就可以进行打包和发布了。

$ cd myExtension
$ vsce package
# name-transform-0.0.1 生成了
$ vsce publish
# <publisher id>.name-transform 发布到 VS Code 插件市场了

发布扩展

您可以通过两种方式发布扩展：

自动使用vsce publish命令：
```
vsce publish
```
这种方式需要进行登录，必须使用vsce login命令提供您的个人访问令牌
手动使用vsce package将扩展打包为可安装的VSIX格式，然后将其上传到Visual Studio Marketplace发布者管理页面：
这种方式需要提前准备以下信息：
```
1、要有一个微软的账户
2、能够访问google的网络，如果没有，在创建发布者的时候，在点击“创建按钮”的时候，页面会没反应。
```
在创建发布者页面填写必填项，如下所示：