功能问题:如何开发一个自己的 VS Code 插件?

大家好,我是大澈!

本文约1100+字,整篇阅读大约需要3分钟。

感谢关注微信公众号:"程序员大澈",免费领取"面试礼包"一份,然后免费加入问答群,从此让解决问题的你不再孤单!

1. 需求分析

不知道大家有没有这样一个疑问,就是我们每天都在用的 VS Code 插件,是怎么搞出来的?

如果我们自己也能搞一个出来,无论面试,还是个人提升,收益绝对是巨大的。

又或者,当我们用着插件商店里的某个插件不爽时,可以一怒之下,搞一个自己想要的功能插件。

当然,前提是你要知道该怎么搞。

所以,下面我们以一个小白的视角,一起来看看,如何开发一个属于自己的 VS Code插件吧!

2. 问题实现

从创建项目到打包发布,都做一个简单介绍,最后做小结。

2.1 安装依赖

先安装一下相关依赖工具。

bash 复制代码
# 安装插件脚手架
npm install -g yo generator-code

# 安装插件发布工具
npm install -g vsce

简单介绍一下,上面安装的这两个工具:

2.2 创建项目

输入以下命令,然后像创建Vue项目那样,填写所开发插件的信息,创建项目基本目录。

第一次创建项目可能有点慢,输入完命令后要耐心等待一会。

css 复制代码
yo code

项目基本目录结构如下:

2.3 编写代码

这里简单介绍两个最重要的文件,package.jsonextension.js

对于package.json,这个我们很熟悉,项目的配置文件,用来管理插件的信息、项目依赖等。

其中,最重要的配置就是下面红框这块,它的意思是注册一个 dache-vscode.helloWorld 的命令,并用命令名 Hello World 来触发。

对于 extension.js,它是项目所有代码的入口文件。

其中,下面红框这块,用来监听刚刚我们在 package.json 中注册的命令,当命令被触发时,执行内部回调。

2.4 调试运行

在 VSCode 中按下 F5 会进入调试状态,这时候会自动打开一个名为 扩展开发宿主 的新窗口。

再在新窗口中,按下 command + shift + pctrl + shift + p,在里面输入我们插件注册的命令名,按下回车就能触发回调。

插件回调执行效果如下:

2.5 打包发布

执行以下命令,打包生成 vsix 文件,这个 vsix 文件就是我们开发的插件啦。

如果执行打包命令报错,则在 REANME.md 文件中修改内容,把初始内容都删了就行。

最后,我们可以选择本地自己使用插件,也可以选择发布到插件商店。

如果本地自己使用,可以这样做:

如果发布到插件商店,可以登录 VS Code 插件商店,按提示填写相关信息后,进行发布。

发布传送门:https://marketplace.visualstudio.com/manage/createpublisher?managePageRedirect=true

2.6 小结

本文简单介绍了,如何一步步的开发一个自己的 VS Code 插件,并最终选择本地自己使用,或者发布到插件商店。

整个过程算是比较简单,但是真正制作一个可用的良心插件,还是不易的。

所以还是那句话,多尝试,少哔哔!

结语

建立这个平台的初衷:

  • 打造一个专注于前端功能问题的问答平台,让大家高效搜索处理同样问题。
  • 遇到有共鸣的问题,与众多同行朋友们一起讨论,一起沉淀成长。
  • 平台现拥有功能问题、技术资讯、实用干货3个专栏内容。

感谢关注微信公众号:"程序员大澈",免费领取"面试礼包"一份,然后免费加入问答群,从此让解决问题的你不再孤单!

相关推荐
今夜星辉灿烂1 分钟前
nestjs微服务-系列2
javascript·后端
Hilaku21 分钟前
用“人话”讲明白10个最常用的正则表达式
前端·javascript·正则表达式
LL.。32 分钟前
同步回调和异步回调
开发语言·前端·javascript
网络点点滴37 分钟前
Vue如何处理数据、v-HTML的使用及总结
前端·vue.js·html
LeQi1 小时前
当!important成为代码毒瘤:你的项目是不是也中了招?
前端·css·程序员
Mintopia1 小时前
B 样条曲线:计算机图形学里的 “曲线魔术师”
前端·javascript·计算机图形学
Mintopia1 小时前
Three.js 3D 世界中的噪声运动:当数学与像素共舞
前端·javascript·three.js
paopaokaka_luck1 小时前
基于SpringBoot+Vue的酒类仓储管理系统
数据库·vue.js·spring boot·后端·小程序
来碗疙瘩汤1 小时前
使用 Three.js 与 CSS3DRenderer 在 Vue3 中加载网页为 3D 模型
前端·javascript
打野赵怀真1 小时前
在TypeScript中装饰器有哪些应用场景?
前端·javascript