指标 创立 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
  1. less 款式模板 /src/templates/lessTemplate.ts

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

    1. 创立目录及文件 ， 新增依赖 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 官网文档