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

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

前言

每天打开 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的命令面板,输入激活命令

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

关注大帅搞全栈

近期文章(感谢掘友的鼓励与支持🌹🌹🌹)

分类:
前端
标签: