乐趣区

关于visual-studio-code:快速编写一个vs-code-插件

jiezi

指标 创立 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 官网文档

退出移动版