VSCode 插件开发（一）：Hello World

前言

来啦老铁！

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

• VSCode 插件开发！
  

玩好 VSCode 插件开发，应该能让本身的工作服从得到提拔，可以等待一下~
我们一起来看看怎么开始 VSCode 插件开发的吧~

学习路径

• 安装插件开发脚手架；
  
• 使用插件开发脚手架创建插件项目；
  
• 快速试用 Hello World 插件项目；
  
• 对插件结果稍做解读；
  
• 对插件做简单改动并验证；
  

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

• 起首，我们实行以下下令安装 Yeoman 和 VS Code Extension Generator：
  

npm install -g yo generator-code

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 项目）。

• 打开项目后，项目结构如：
  

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

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

我们这里先不做任何改动，也不做任何代码先容，先看看这个最根本的插件运行结果。

• 打开 Extension Developer Host 窗口；
  

（打开方式有 2 种）
1. 键盘按 F5 打开新窗口（这个贫苦点，不保举）；

众所周知，mac 默认没有 F5 按键（至少我的电脑没有），那按个寂寥？方法是：
a. 点击电脑的体系偏好：System Preferences；
b. 选择 Keyboard；
c. 勾选 Use F1, F2, etc. ... 选项；
d. 按住键盘的 fn 键，在键盘上方的 Touch Bar 上可以看到 F1、F2、、、F12 , 点击 F5 键；
2. 借助 VSCode 工具（简单，保举）；

直接在插件项目内的调试入口内点击调试按钮即可；
两种方式都能打开 Extension Developer Host 窗口，可见，第 2 种方式更简单，用它用它用它！
我们可以在这个窗口恣意打开一个项目或文件用于学习演示~

• 运行插件项目；
  

a. 在Extension Developer Host 窗口内使用键盘组合键：Command+Shift+P (windows 呆板是 Ctrl+Shift+P)，然后搜索我们的 Hello World 插件：
b. 点击使用我们的 Hello World 插件：
c. 则在 VSCode 右下角则会看到一个提示，这就是我们的插件工作结果：
温馨提示：

这里笔者刚开始遇到一个匪夷所思的题目：死活找不到我们的 Hello World 插件~
网上也没有找到任何有关这方面的先容，厥后猜疑 VSCode 版本题目，于是找到 VSCode 的设置，设置内的版本更新方面的入口，当时刚好有一个更新（未截图），点击后关闭了 VSCode 举行更新（速率很快），更新后自动打开 VSCode，这时间就能找到我们的 Hello World 插件了~
记载一下这个小坑~

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 右下角能看到这个提示的缘故起因：

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

• 我们可以稍做修改，看下结果，如：
  

• 点击 reload 即可重新加载插件：
  

• 点击 reload 即可重新加载插件：
  

后续，我们可以在如许的根本上举行功能性开发、发布插件到插件市场等，下一篇文章可期~
本领有限，接待指正、相互交换，感谢~

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

感谢~