一、背景
书写代码时，经常需要看到值的具体信息，才能确定代码的走向。然而又不习惯于使用debug，所以总是进行console.log操作，虽然vscode提供了一个代码片段，但是书写起来还是有些麻烦，要输入长长的变量名称，必要时还要打印一个标识。能不能通过插件解决这个问题呢？
二、功能
1. 插入打印语句模板
2. 选中变量，按照模板插入打印语句
3. 自动识别当前行的变量，插入该变量的打印语句
4. 一键删除console
三、实现
1.下载官方脚手架
yarn global add yo generator-code
2.利用脚手架生成代码
yo code
# ? What type of extension do you want to create? New Extension (TypeScript)
# ? What's the name of your extension? qkConsole
### Press <Enter> to choose default for all options below ###
# ? What's the identifier of your extension? qkConsole
# ? What's the description of your extension? LEAVE BLANK
# ? Initialize a git repository? No
# ? Bundle the source code with webpack? No
# ? Which package manager to use? yarn
# ? Do you want to open the new folder with Visual Studio Code? Open with `code`
3.编码
balabala................(后续介绍)
4.上传插件
注意：使用同一个邮箱注册，并且package.json中的publisher字段要和marketplace上的publisher ID一致
npm install -g @vscode/vsce
命令行中使用Azure DevOps上的token登录
vsce login publisherId
vsce publish
或者
vsce package
然后将打包出的文件手动上传到marketplace
四、使用
在vscode插件仓库中搜索qkConsole，下载即可。
