手把手从0撸一个 vscode 插件，来创建文件模板

需求思考

• 为什么要开发这么一个 Vscode 插件？
• 插件的目的？
• 插件的最终结果展现？

引言

这里先说 插件的最终结果：通过鼠标右键右键文件夹后，在该目录下，产生一个模板文件！

剩下的两个问题后面说。

下面开始我们的闯关之路！

安装

开始安装，输入命令，这里选择 JavaScript，没有选择 TypeScript

npm install -g yo generator-code
yo code

开始调试

1.打开调试台

按 F5 产生一个新的 扩展开发宿主 的 vscode 调试台

2.进行调试

在新的 vscode 调试台，打开 命令面板

• win： ctrl + shift + p
• mac： command + shift + p

输入 Hello World

很尴尬，发现我们的vscode版本太低。。。

如果没有该提示，直接跳过下方 的这一步骤！

3.处理下 vscode 版本问题 （插曲）

如果你的 vscode 没有该提示，可以略过此步骤！

我们进行升级一下

发现无法升级

执行下面两条命令，退出并重启 vscode

注意 第二条命令 最后的是自己的 vscode 位置

sudo chown -R $USER ~/Library/Caches/com.microsoft.VSCode.ShipIt

xattr -dr com.apple.quarantine /Users/xxx/Visual\ Studio\ Code.app

再次 点击 检查更新，就可以看到 正在下载更新

下方也显示 正在下载更新

过一会后，这里，它更新应该不会超过20分钟（我也是用了一会，才发现下载好了）

点击后， vscode 会自动进行重启，退出并再次启动。

可以看到 vscode 已经更新好了。

此时小插曲完毕后，继续我们的 vscode 插件开发。

4.继续调试

从 F5 的位置处开始，可以看到输入 hello world ，下面会提示我们 Hello World，点击它。

• 这里可能会有疑问，为什么会有一个 Hello World，能不能换一个！
• 这是可以的，它的定义是在文件夹里的 package.json 文件中
• 
  
• 后面我们可以换个 title 名字，例如 myVscode
• 
  
• 可以看到 已经没有 Hello World，已经变成了 myVscode
• 
  
• 继续点击后操作
• 可以看到在 扩展开发宿主 上面会得到结果 Hello World from Hello World!
• 
  
• 为什么会得到的这个结果，能不能修改？
• 是可以的，它的出现是因为我们的文件夹里面的 extension.js 这个文件所提示的。
• 
  
• 尝试修改
• 我们可以尝试进行修改该内容，会得到一个新的提示。
• 注意：现在所有的调试，都是从 F5 开始后，打开 扩展开发宿主 的 vscode，再打开 命令行窗口，输入并执行 myVscode
• 
  
• 
  
• 可以看到我们新更改的，新的提示。
• 也可以更改提示框，现在是 info 提示框，也可以改成 error 的提示框
• 
  
• 
  

扩展解剖

1.三个关键点

• 激活事件
• 贡献点
• VS Code API

在 package.json 和 extension.js 这两个文件上对应的介绍

2.package.json 中的一些字段介绍

• name： 扩展的名字
• publisher：扩展发布者名
• <publisher>.<name> 是作为你这个扩展的唯一 ID。
• 我们目前的 package.json 是没有该字段，我们可以先自己添加该字段，后面发布也需要
• "publisher": "xxx", // 自己的专属id 复制代码
• activationEvents 激活事件
• contributes 贡献点
• engines.vscode 指定了扩展所依赖的 VS Code API 的最低版本

3.扩展调用流程：

通过调用 激活事件 activationEvents，进入 mian 对应的 入口文件，找到 activate 函数，之后调用 vscode 的注册命令 registerCommand 后，调用函数内部方法。

注意 require('vscode') 是引入 "@types/vscode" 这个包。

制作插件

1.添加配置

修改 package.json 中的 贡献点

  "contributes": {
    "commands": [
      {
        "command": "hello-world.helloWorld",
        "title": "myVscode"
      }
    ],
    "menus": {
      "explorer/context": [
        {
          "command": "hello-world.helloWorld",
          "group": "navigation",
          "when": "explorerResourceIsFolder"
        }
      ]
    }
  },

使得 我们的 myVscode 只存在 文件夹的右键菜单中，且置顶显示。

• 继续进入调试，之后在 扩展开发宿主 的 vscode 上打开任意一个文件夹，之后右键 可看到 myVscode 并且可以执行。
• 
  
• 
  

2.创建模板

• 创建src目录，目录结构 如下图所示
• 
  
• 编写文件代码
• 由于 没有安装相关插件，这里直接使用 Commonjs 方式进行
• src/template/index.js
• const myTemplate = ` <template> <div></div> </template> <script setup> import { onMounted } from 'vue' const handleData = () => { console.log('handle data!') } onMounted(() => { handleData() }) </script> <style scoped> </style> ` module.exports = myTemplate 复制代码
• src/index.js
• const myTemplate = require('./template/index') const config = { myTemplate: myTemplate } module.exports = config 复制代码
• 模板的话，大家这里可以 自定义 个性化自己的模板

3.编写插件代码

我们这里再次返回 extension.js 文件中

• 引入模块
• 进行引入 node 的 fs 模块，和我们自己写的 config 文件
• const fs = require('fs') const config = require('./src/index') 复制代码
• 编写插件代码
• 这里代码展示，我放图片，我写的代码不是很好，大家可以用自己的方式写写看，而且自己写更有助于理解
• 
  
• 注意：我们执行命令后 会返回一个值，这里我用 args，关于如何查看 args 里面的内容，如果能有一个 跟 chrome 浏览器一样的 控制台就好了。
• 刚好 vscode 里面有！这里我们打开 vscode 调试控制台
• 
  
• 我们 在 扩展开发宿主 的 vscode 上面，执行我们的命令后，可以看到我们打印的 arg 参数是什么！
• 而且我们的 文件也创建 出来了！
• 
  
• 
  

至此 我们的插件已经 开发完成!

下一步，打包，发版！

发版

打包

• 安装
• 先安装 npm install -g vsce
• 执行 vsce package 命令，得到一个 vsix 结尾的文件
• 
  

发版

发版的流程较为麻烦，还请大家一起动手实践。

• 获取个人访问令牌
• 先在这个网站里 Azure DevOps 登录自己的账号，然后创建组织，组织名，随便起！
• 注意：组织的名称 不一定必须与 发布者名称相同
• 
  
• 
  
• 选择 个人访问令牌 后，点击 New Token ，填写相关信息后，将会得到 Token
• 注意：大家记得复制 Token ！！！
• 
  
• 
  
• 
  
• 创建发布者
• 我们需要 创建发布者 ，填写自己的 Name 即可
• 
  
• 注意：需要在我们的 package.json 中添加 publisher 字段
• 
  
• 登录存储个人访问令牌 vsce login <publisher name>,下面会让你输入刚刚复制好的 Token 信息
• 
  
• 发布扩展
• 终于到了我们发布扩展，输入命令 vsce publish！
• 尴尬，发现我们的 hello-world 被人占了
• 那只能修改 package.json 中的 name 字段， 改成 hello-world2，再次发布！
• 
  
• 查看发布结果
• 此时我们的发布页面上已经存在 发布的项目！而且 vscode 插件库里，有我们的 hello-world2
• 
  
• 
  
• 使用
• 已经迫不及待 安装一手 自己写的插件，然后使用一下。
• 对自己项目中的文件，右键 执行 myVscode，成功出现我们创建的文件！
• 
  

完结撒花

总结

此次项目 关于 手动开发一款自己的 Vscode 插件。

• 为什么要开发这么一个 Vscode 插件？
• 一是 尝试：对我来说，是个比较新的东西，对这一领域比较好奇，勇于尝试！
• 二是 繁琐：每次在项目中，都要新建一份文件，重新弄一份一模一样的。自动化来提高工作效率！
• 插件的目的？
• 提升自己的一些额外经验，克服很多看起来很难的东西，其实只有用心去研究，都是可以去得到解决的！