使用脚手架新建一个插件 | VSCode 插件开发系列教程

大帅老猿
4,501 阅读2分钟

前言

每天打开 VSCode 的时间越来越多，有时候甚至并不是因为写代码打开它。因为有各种各样的插件：

  • 比如我们可以在VSCode里“养基”——韭菜盒子插件
  • 又比如我们可以养一位程序员鼓励师陪伴我们写代码——彩虹屁老婆
  • 我们还可以在VSCode里玩游戏摸鱼——小霸王

其实VSCode的插件也是由Javascript开发的，各位前端开发者们想不想试着自己开发一款插件呢？

系列教程计划

计划赶不上变化，随时迭代，欢迎留言

  • 使用脚手架新建一个插件 ☑️
  • 介绍 package.json 配置
  • TreeView
  • WebView
  • 监听代码输入
  • 把插件发布到市场

安装 VSCode 插件官方脚手架

npm install -g yo generator-code

使用脚手架

yo code

运行之后，会连续询问我们几个问题

新建插件工程

  1. 你要新建什么模板：

    1. 基于TS的插件

    2. 基于JS的插件

    3. 颜色主题

    4. 语言支持

    5. 代码片段

      ...

根据自己的喜好选择1或2即可，我们还需要继续回答一些问题

  1. 插件的名称
  2. 插件的id，最终会和你的开发者账号做拼接。比如大帅的开发者账号叫ezshine，最终会拼接为 ezshine.插件id
  3. 插件的介绍
  4. 是否开启类型检查
  5. 初始化git仓库（不是非要开启，以后手动开也行）
  6. 选择使用npm还是yarn来管理依赖

脚手架新建项目完成之后，我们可以cd到项目目录，使用 code . 在vscode中打开目录

运行和调试插件工程

现在按下F5或者从菜单中找到 Run > Start Debugging就可以运行并调试这个插件了。

脚手架新建的插件项目默认注册了一个激活命令，叫Hello World

我们使用ctrl(cmd) + shift + p呼出VSCode的命令面板，输入激活命令

回车之后，我们就可以看到插件工程代码里输出的信息了。

关注大帅搞全栈

近期文章（感谢掘友的鼓励与支持🌹🌹🌹）

avatar
文章
阅读
粉丝