「这是我参与11月更文挑战的第13天，活动详情查看：2021最后一次更文挑战」
背景
最近一直在探讨学习，vscode插件在效能提升上的应用场景。并且在团队（40+前端团队）输出了一些正向的实战应用型的小产品，帮助团队成员减少重复性的工作，能够更专注于代码质量以及业务，并且得到了广大组员的认可。趁着最近火热，输出些文章记录下，大体章节如下（后续会增加）：
- 创建一个Hello World应用
- 插件模板代码如何生成的？
- 插件机制以及vscode插件能力边界
- vscode树结构详解
- vscode虚拟文档详解
- vscode配置监听以及如何实现自定义监听？
- 实战：vscode插件提效：代码片段生成器
- 实战：vscode插件提效：根据swagger api生成接口typescript声明
- 实战：vscode插件提效：根据swagger api生成接口请求模板service
- vscode构建和发布
正文
在上篇文章，我们运行了命名行脚本：npm install -g yo generator-code，并通过执行yo code生成了插件的模板代码。
那这一步都执行了什么事情呢？
1. 查看包源码
要看模板代码是否如何生成的，首先我们得先了解yo和generator-code都是什么？那么第一步，我们要到npm管理的全局安装包路径看看下载下来的代码是什么。那如何快速查看安装路径呢？
npm root -g
执行如上脚本，会在终端打印出目录，我的mac默认安装地址是：/usr/local/lib/node_modules，进入当前目录就可以查看所有的全局安装包了。当然，查看全局安装包也可以通过命名行：
npm ls -g
如上化红框便是vscode插件所需要的3个核心包，这里vsce包后续发布构建章节的时候再说明。本章节，只看yo和generator-code两个包。
2. yo包能力
查看一个包是干什么的，具备什么能力，通过package.json文件大体能得知五六。
如上，我们得知这个包是可执行脚本文件。
其实关于这个包，不用多说，它是大命名顶顶的: yeoman，一个通用型脚手架，用于生成项目模板代码。执行yo code，实际上是通过yeoman能力在本地创建了模板代码，这份模板代码来源于generator-code。
3. generator-code包
这个包的源码目录结构如下：
大体介绍下
app/目录下的文件：
index.js这个生成器的入口文件prompts.js用于向用户展示交互问题，并收集交互数据env.js获取vscode版本和插件依赖templates模板文件目录
这个包知道它是干什么，能干什么即可，向查看具体源码可自行去查看业务代码。
下面我们看看如何自定义一个yeoman的生成器。
4. 自定义generator包
- 创建以generator-为开头的npm包(npm init)
- 安装yeoman-generator依赖
- 按照规范创建目录结构，默认执行app目录下的generator
// 目录1:
generator-demo/
generator/
app/
index.js
router
index.js
package.json
// 目录2:
generator-demo/
app
index.js
router
index.js
package.json
使用目录2的package.json需要进行配置：
// package.json要进行声明
{
files: ['app', 'router']
}
- 自定义包app/index.js中实现生成器
定义匿名类并对yeoman提供的Generator基类进行实现
const Generator = require('yeoman-generator');
module.exports = class extends Generator{
initianlizing(){
//初始化，比如：检查状态，获取配置等
}
prompting(){
//向用户展示交互问题，并收集交互数据
}
configuring(){
//编辑/配置项目文件（一般是以'.'开头的配置文件,例如.editorconfig）
}
default(){
//未匹配任何生命周期方法的非私有方法均在此环节*自动*执行
}
writing(){
//输出预置的模板文件
}
conflicts(){
//处理冲突(内部调用，一般不用处理）
}
install(){
//进行依赖的安装(支持多种工具：npm,bower,yarn)
}
end(){
//结束动作，执行清除操作，如（清屏）等
}
}
- 本地调试：
yo **，需要进行npm link将包创建软链接到全局环境，可以让npm进行检索到执行
总结
通过本篇文章，我们能知道yo和generate-code具备什么能力，都能干什么，插件生成模板代码是怎么回事，以及如何去自定义模板生成器。
