VSCode 扩展插件开发（一键创建模板文件）记录

[Bjkb]

故事的起源

将几个组件提取到公共组件之后， 开发效率从2小时开发一个基本的后台CRUD模块，提高到了不到 1 小时就能完成。于是，日常的开发就变成了 复制，粘贴，修改表单 fields，增加Router，增加对应菜单的权限key。然后一套写下来差不多 30，40分钟的样子，在暗自窃喜自己又提高了开发效率的一周后，突然感觉到了一阵的空虚，索然无味。重复的创建相同的文件夹，重复的修改文件name，重复的写相似的Router，简直让我感觉到崩溃
这重复的劳动，能不能一键就生成了，我只关注于业务代码的逻辑跟质量，行否？
这念头一起，瞬间四肢百骸 涌起一阵阵的波动，这，这，这，难道便是新的境界？

想法

背景

• 现存有几个后台系统都在开发维护中，这几个后台系统因为历史的一些原因，模板文件根本无法统一，所以还不如在本地保存一个当前项目的模板文件夹。

目标

• 输入一个文件夹的名字，一键生成模板文件。
• 替换 Page 文件中的PageName
• 替换 model文件 中的 namespace
• 在项目 Page 目录下的 index.js 文件中 export 创建的文件
• 在项目 configs 文件中，新增对应的权限 key
• 在项目 Layout 目录下新增对应的 Router

---

调研VSCode插件扩展

官方文档

在充分了解了各个项目的情况之后，选择使用VSCode 插件扩展的方式，去实现这一次的功能。

官方的文档对开发扩展有详细的文档说明，所以下面就大概提一下

环境安装

npm i -g yo generator-code  // 官方插件开发脚手架
yo code // 执行脚手架命令

根据步骤创建一个New Extension

这边选的是JavaScript，所以下文都是JavaScript的

这个新建的Hello Word扩展，点击调试，就能运行了，这里需要注意的是 package.json 中vscode的版本

打包成.vsix文件

npm i -g vsce
vsce vscode-plugin-demo

如果没有vscode的 Access Token需要申请一个 vscode 推送准备

Node.js开发准备

由于 VSCode 的扩展里面，内置了 Node.js ，所以 fs 模块就能直接用了

遇到的问题，以及解决

• 本来想直接使用 inquirer 这个交互式工具去完成的，结果直接写 命令调用是没用的，需要通过 VSCode 提供的 vscode.window.createTerminal 的命令去创建一个终端，执行自己的 shell 代码。在查看API的过程中，发现可以直接利用input弹框获取输入值，所以就用弹框的形式了

• 在创建文件夹的时候，需要获取 项目的根路径 ，当时还折腾了下，都不太满意，没想到VSCode里面就直接有命令可以使用获取到。

• 对Page/index.js文件内容进行添加操作的时候，需要获取对应的行数，进行添加。思考了下，将fs.readFile 读取出来的字符串以\r\n的方式进行数组分割，再匹配最后一个 export的位置，然后进行插入

大概的操作

• 使用 shelljs 命令，cp 模板文件，放到对应的文件路径下面，判断文件是否存在，给出提示。
• 使用 Node.js 的 fs模块，去读写文件。然后修改文件名，增加对应的语句等...

---

结语

• VSCode 开发扩展极其的方便，几乎是0学习成本
• 本来以为很复杂的东西，3天就完成了，一键就可以生成模板。
• 现在写一个基本的后台 CRUD 模块，复制，粘贴修改文件的5-10分钟统统省略掉了，又提高了一截开发效率。
• 后续准备将更多的便利性操作集成到 VSCode扩展里。比如扩展公共组件的 参数提示之类的。