草庐IT

VSCode 插件开发（一）：Hello World

狄仁杰666 2023-03-28 原文

前言

来啦老铁！

这几天琢磨着研究点什么，后来找到一个研究点，那就是：

  • VSCode 插件开发！

玩好 VSCode 插件开发，应该能让自己的工作效率得到提升，可以期待一下~

我们一起来看看怎么开始 VSCode 插件开发的吧~

学习路径

  1. 安装插件开发脚手架；
  2. 使用插件开发脚手架创建插件项目；
  3. 快速试用 Hello World 插件项目；
  4. 对插件效果稍做解读；
  5. 对插件做简单改动并验证；

1. 安装插件开发脚手架；

npm install -g yo generator-code
安装 Yeoman 和 VS Code Extension Generator

2. 使用插件开发脚手架创建插件项目；

接下来我们利用 yo 和 generator-code 模块配合而成的脚手架，开始创建我们的 VSCode 插件项目。

  • 执行命令：

yo code

  • 根据脚手架提示选择和填入相关信息：

根据脚手架提升选择和填入项目信息

  • 在选项选择完成后，会进行项目依赖的安装：

最后安装项目依赖

  • 项目依赖安装完成后，可以根据提示打开插件项目：

根据提示打开插件项目

温馨提示：

想要有这个打开插件项目的提示（Open with 'code'），则需要事先在 VSCode 内 command+shift+p 选择执行：
Shell Command: Install 'code' command in PATH。

这跟很多其他介绍 VSCode 插件开发的文章内，使用 code 命令打开项目的前提一样（如命令：code case2script 可用 VSCode 打开我们的 case2script 项目）。

Shell Command: Install 'code' command in PATH
  • 打开项目后，项目结构如：
项目结构

其实这是个简单的、完整的、可运行的插件项目，接下来我们先来看看这个插件项目工作起来是怎么样子的~

3. 快速试用 Hello World 插件项目；

我们这里先不做任何改动，也不做任何代码介绍，先看看这个最基础的插件运行效果。

  • 打开 Extension Developer Host 窗口；

（打开方式有 2 种）

1. 键盘按 F5 打开新窗口（这个麻烦点，不推荐）；

众所周知，mac 默认没有 F5 按键（至少我的电脑没有），那按个寂寞？方法是：

a. 点击电脑的系统偏好：System Preferences；

系统偏好

b. 选择 Keyboard；

Keyboard

c. 勾选 Use F1, F2, etc. ... 选项；

i勾选 Use F1, F2, etc. ... 选项

d. 按住键盘的 fn 键，在键盘上方的 Touch Bar 上可以看到 F1、F2、、、F12 , 点击 F5 键；

点击 F5 键
2. 借助 VSCode 工具（简单，推荐）；

直接在插件项目内的调试入口内点击调试按钮即可；

点击调试按钮

两种方式都能打开 Extension Developer Host 窗口，可见，第 2 种方式更简单，用它用它用它！

Extension Developer Host 窗口

我们可以在这个窗口任意打开一个项目或文件用于学习演示~

  • 运行插件项目；

a. 在Extension Developer Host 窗口内使用键盘组合键：Command+Shift+P (windows 机器是 Ctrl+Shift+P)，然后搜索我们的 Hello World 插件：

搜索 Hello World 插件

b. 点击使用我们的 Hello World 插件：

点击使用 Hello World 插件

c. 则在 VSCode 右下角则会看到一个提示，这就是我们的插件工作效果：

VSCode 右下角看到提示

温馨提示：

这里笔者刚开始遇到一个匪夷所思的问题：死活找不到我们的 Hello World 插件~

网上也没有找到任何有关这方面的介绍，后来怀疑 VSCode 版本问题，于是找到 VSCode 的设置，设置内的版本更新方面的入口，当时刚好有一个更新（未截图），点击后关闭了 VSCode 进行更新（速度很快），更新后自动打开 VSCode，这时候就能找到我们的 Hello World 插件了~

更新 VSCode

记录一下这个小坑~

4. 对插件效果稍做解读；

  • 首先是插件名字何来？

插件名字声明和绑定关系在 package.json 表示，其中：
a. contributes: 是对插件的一些配置，比如图标，菜单、快捷键设置等，例如 title 为我们能在 VSCode 的命令面板中搜索到的插件名字（Command+Shift+P 命令打开的搜索入口）；

插件名字声明和绑定关系

b. activationEvents: 配置触发 extendion.js 文件中 active 钩子函数的事件，例如：

vscode.commands.registerCommand('case2script.helloWorld'...

c. 其他待详细了解~

  • 插件为我们做了什么事情？

extendion.js 中的这行代码为我们注册了一个命令，命令名 case2script.helloWorld 与 package.json 中的 contributes 内的 command 匹配，代表这个插件能够展示一个 information message: Hello World from case2script!

注册命令

也就是为什么我们在使用了插件之后，在 VSCode 右下角能看到这个提示的原因：


VSCode 右下角看到提示

5. 对插件做简单改动并验证；

  • 我们可以稍做修改，看下效果，如：
稍做修改
  • 点击 reload 即可重新加载插件：
重新加载插件
  • 点击 reload 即可重新加载插件：
重新加载插件

后续，我们可以在这样的基础上进行功能性开发、发布插件到插件市场等，下一篇文章可期~

能力有限，欢迎指正、互相交流，感谢~

如果本文对您有帮助，麻烦点赞、关注！

感谢~

VSCodeHellosectionimagesupload

有关VSCode 插件开发（一）：Hello World的更多相关文章

  1. ruby - 如何每月在 Heroku 运行一次 Scheduler 插件？ - 2

    在选择我想要运行操作的频率时，唯一的选项是“每天”、“每小时”和“每10分钟”。谢谢!我想为我的Rails3.1应用程序运行调度程序。 最佳答案 这不是一个优雅的解决方案，但您可以安排它每天运行，并在实际开始工作之前检查日期是否为当月的第一天。 关于ruby-如何每月在Heroku运行一次Scheduler插件？，我们在StackOverflow上找到一个类似的问题： https://stackoverflow.com/questions/8692687/

  2. ruby-on-rails - 无法使用 Rails 3.2 创建插件？ - 2

    我对最新版本的Rails有疑问。我创建了一个新应用程序(railsnewMyProject)，但我没有脚本/生成，只有脚本/rails，当我输入ruby./script/railsgeneratepluginmy_plugin"Couldnotfindgeneratorplugin.".你知道如何生成插件模板吗？没有这个命令可以创建插件吗？PS:我正在使用Rails3.2.1和ruby​​1.8.7[universal-darwin11.0] 最佳答案 随着Rails3.2.0的发布，插件生成器已经被移除。查看变更日志here.现在

  3. ruby - 使用 C 扩展开发 ruby​​gem 时，如何使用 Rspec 在本地进行测试？ - 2

    我正在编写一个包含C扩展的gem。通常当我写一个gem时，我会遵循TDD的过程，我会写一个失败的规范，然后处理代码直到它通过，等等......在“ext/mygem/mygem.c”中我的C扩展和在gemspec的“扩展”中配置的有效extconf.rb，如何运行我的规范并仍然加载我的C扩展？当我更改C代码时，我需要采取哪些步骤来重新编译代码？这可能是个愚蠢的问题，但是从我的gem的开发源代码树中输入“bundleinstall”不会构建任何native扩展。当我手动运行rubyext/mygem/extconf.rb时，我确实得到了一个Makefile(在整个项目的根目录中)，然后当

  4. Ruby Sinatra 配置用于生产和开发 - 2

    我已经在Sinatra上创建了应用程序，它代表了一个简单的API。我想在生产和开发上进行部署。我想在部署时选择，是开发还是生产，一些方法的逻辑应该改变，这取决于部署类型。是否有任何想法，如何完成以及解决此问题的一些示例。例子:我有代码get'/api/test'doreturn"Itisdev"end但是在部署到生产环境之后我想在运行/api/test之后看到ItisPROD如何实现？ 最佳答案 根据SinatraDocumentation:EnvironmentscanbesetthroughtheRACK_ENVenvironm

  5. ruby - 是否可以覆盖 gemfile 进行本地开发？ - 2

    我们的git存储库中目前有一个Gemfile。但是，有一个gem我只在我的环境中本地使用(我的团队不使用它)。为了使用它，我必须将它添加到我们的Gemfile中，但每次我checkout到我们的master/dev主分支时，由于与跟踪的gemfile冲突，我必须删除它。我想要的是类似Gemfile.local的东西，它将继承从Gemfile导入的gems，但也允许在那里导入新的gems以供使用只有我的机器。此文件将在.gitignore中被忽略。这可能吗？ 最佳答案 设置BUNDLE_GEMFILE环境变量:BUNDLE_GEMFI

  6. ruby - 在 Windows 机器上使用 Ruby 进行开发是否会适得其反？ - 2

    这似乎非常适得其反，因为太多的gem会在window上破裂。我一直在处理很多mysql和ruby​​-mysqlgem问题(gem本身发生段错误，一个名为UnixSocket的类显然在Windows机器上不能正常工作，等等)。我只是在浪费时间吗？我应该转向不同的脚本语言吗？ 最佳答案 我在Windows上使用Ruby的经验很少，但是当我开始使用Ruby时，我是在Windows上，我的总体印象是它不是Windows原生系统。因此，在主要使用Windows多年之后，开始使用Ruby促使我切换回原来的系统Unix，这次是Linux。Rub

  7. ruby-on-rails - 在 Rails 开发环境中为 .ogv 文件设置 Mime 类型 - 2

    我正在玩HTML5视频并且在ERB中有以下片段:mp4视频从在我的开发环境中运行的服务器很好地流式传输到chrome。然而firefox显示带有海报图像的视频播放器，但带有一个大X。问题似乎是mongrel不确定ogv扩展的mime类型，并且只返回text/plain，如curl所示:$curl-Ihttp://0.0.0.0:3000/pr6.ogvHTTP/1.1200OKConnection:closeDate:Mon,19Apr201012:33:50GMTLast-Modified:Sun,18Apr201012:46:07GMTContent-Type:text/plain

  8. 世界前沿3D开发引擎HOOPS全面讲解——集3D数据读取、3D图形渲染、3D数据发布于一体的全新3D应用开发工具 - 2

    无论您是想搭建桌面端、WEB端或者移动端APP应用，HOOPSPlatform组件都可以为您提供弹性的3D集成架构，同时，由工业领域3D技术专家组成的HOOPS技术团队也能为您提供技术支持服务。如果您的客户期望有一种在多个平台（桌面/WEB/APP，而且某些客户端是“瘦”客户端）快速、方便地将数据接入到3D应用系统的解决方案，并且当访问数据时，在各个平台上的性能和用户体验保持一致，HOOPSPlatform将帮助您完成。利用HOOPSPlatform，您可以开发在任何环境下的3D基础应用架构。HOOPSPlatform可以帮您打造3D创新型产品，HOOPSSDK包含的技术有：快速且准确的CAD

  9. 【鸿蒙应用开发系列】- 获取系统设备信息以及版本API兼容调用方式 - 2

    在应用开发中，有时候我们需要获取系统的设备信息，用于数据上报和行为分析。那在鸿蒙系统中，我们应该怎么去获取设备的系统信息呢，比如说获取手机的系统版本号、手机的制造商、手机型号等数据。1、获取方式这里分为两种情况，一种是设备信息的获取，一种是系统信息的获取。1.1、获取设备信息获取设备信息，鸿蒙的SDK包为我们提供了DeviceInfo类，通过该类的一些静态方法，可以获取设备信息，DeviceInfo类的包路径为：ohos.system.DeviceInfo.具体的方法如下：ModifierandTypeMethodDescriptionstatic StringgetAbiList​()Obt

  10. Vscode+Cmake配置并运行opencv环境(Windows和Ubuntu大同小异) - 2

    之前在培训新生的时候，windows环境下配置opencv环境一直教的都是网上主流的vsstudio配置属性表，但是这个似乎对新生来说难度略高(虽然个人觉得完全是他们自己的问题)，加之暑假之后对cmake实在是爱不释手，且这样配置确实十分简单(其实都不需要配置)，故斗胆妄言vscode下配置CV之法。其实极为简单，图比较多所以很长。如果你看此文还配不好，你应该思考一下是不是自己的问题。闲话少说，直接开始。0.CMkae简介有的人到大二了都不知道cmake是什么，我不说是谁。CMake是一个开源免费并且跨平台的构建工具，可以用简单的语句来描述所有平台的编译过程。它能够根据当前所在平台输出对应的m

随机推荐