零基础入门vscode插件开发(以console.log加前缀为例)

前言

console.log是window上的一个常用方法，该函数可以把各种信息打印输出到浏览器控制台，以便开发者进行调试、定位问题。

在代码量很少的情况下，多次使用console.log，开发者还能勉强在控制台找到自己想要的信息。eg:

var student={
  name:"zhangsan",
  age:12
}
console.log(student.name)
var teacher={
  name:"zhangsan",
  age:21
}
console.log(teacher.name)
/**
*控制台输出
* zhangsan
* zhangsan
* 巧了，老师和学生同名了，没关系，控制台第一行输出的是学生姓名，第二行输出的是老师姓名，反正我能区分出来。
*/
复制代码

在代码量比较多、团队合作的项目中，大量的consol.log被调用，控制台简直惨不忍睹，信息虽然很多，但很难找到自己输出的那个，为了解决这个问题，很多开发者都会在打印信息的前面加上前缀进行区分。eg:

// 还用上面的student和teacher举栗
console.log("student.name=======",student.name)
console.log("teacher.name=======",teacher.name)
...
/**
*控制台输出
* student.name======= zhangsan
* teacher.name======= zhangsan
* 简直就是一个字，"清爽"
*/
复制代码

爽是爽了，可是还有一个问题，加前缀对于开发人员来说可是个体力活，写起来很累。于是就有了本次需求（实现这种加前缀打印的功能），因为现在大部分前端开发人员都使用vscode，所以就基于vscode编辑器开发这样一个插件，实现解决痛点并提高开发效率的小目标。

准备工作

1. npm install yo generator-code -g
2. yo code
3. 根据提示完成命令行交互

ok，一个vscode插件项目的脚手架就生成了！

目录结构介绍

整个目录结构比较简单，重点关注package.json和extension.js这两个文件。

目录

.
├── CHANGELOG.md 
├── README.md 
├── extension.js // 入口
├── jsconfig.json 
├── node_modules 
├── package-lock.json
├──