快速编写一个vs code 插件

目标 创建 components或pages 文件的vscode 插件

1. 创建脚手架工程

• 安装脚手架

  npm install -g yo generator-code

• cd到工作目录后，运行 yo code, 选择ts开发一个新的插件，按提示输入插件名后安装工程依赖

  

• 完成之后的工程目录，插件编写三大个部分：

  • package.json 文件
    

• 在 extension.ts 中给要写的功能用 vscode.commands.register... 给 Activation Event 或 Contribution Point 中配置的事件绑定方法或者设置监听器。位于入口文件（默认是 extension.ts）的 activate() 函数中。

  

2. 插件工程调试

​ 按F5就可以打开一个新的 VSCode，然后就可以在这个新的 VSCode 中进行插件测试。

​ 效果如果所示：

​ 至此，可以看到扩展插件已经正常的运行了，接下来可以来编写文件实现创建react脚手架的pages/components下的组件模板。

3. 添加插件配置功能

命令command

​ package.json增加自定义的命令， 运行之后如果所示。

菜单 menus

​ 新增菜单，在package.json中的contributes新增 menus配置

​ 编辑器上下文菜单：

​ 资源管理器上下文菜单：

增加快捷键keybindings

​ 新增创建组件命令的快捷键，在package.json中的contributes新增 keybindings配置

获取输入

​ extension.ts 文件中注册自定义的命令extension.createComponent，同时希望获取用户输入的自定义的组件名及指定文件位置

​ ctrl+alt+n 或编辑器区域右键点击选中创建之后输入组件名test-demo，文件位置src/pages

​ 至此， 已经为插件添加了一系列的vs code 相关的功能配置，接下来是准备创建的模板部分功能。

4. 准备模版文件

​ 页面/组件应当包含三要素(index.ts入口，ComponetName.tsx页面/组件本身，ComponetName.less页面/组件的样式)

1. 组件的模板 pascalCase 命名 /src/templates/componentsTemplate.ts

2. less 样式模板 /src/templates/lessTemplate.ts

3. index 入口模板 /src/templates/indexTemplate.ts

   4. 创建目录及文件 ， 新增依赖 fs vscode loash , 相应代码实现逻辑

​ 5. 插件运行结果：test-demo 在 src/pages目录下， 新创建了组件。

​ src/components中创建组件testDemo

​ 插件调试成功之后，下一步就是要考虑使用的问题。接下来就是发布插件及在vs code 中扩展程序下载与使用。

5. 打包发布

1. 使用vsce 工具 npm i vsce -g
2. 注册微软的账号及获取token
3. 创建发布者 https://aka.ms/vscode-create-publisher
4. 发布：vsce publish

更多参考实现

vscode 官方文档