「Offer 驾到，掘友接招！我正在参与2022春招系列活动-项目经验复盘，点击查看 征文活动详情

手把手从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 插件？

  一是 尝试：对我来说，是个比较新的东西，对这一领域比较好奇，勇于尝试！

  二是 繁琐：每次在项目中，都要新建一份文件，重新弄一份一模一样的。自动化来提高工作效率！

• 插件的目的？

  提升自己的一些额外经验，克服很多看起来很难的东西，其实只有用心去研究，都是可以去得到解决的！