「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.创建模板

编写文件代码

由于没有安装相关插件，这里直接使用 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 插件？

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

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

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

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