作者：HelloGitHub-小夏
作为一个靠代码作为“生计”的开发者，bug写得好不好，编辑器真的很重要！那么VisualStudioCode这个大名你肯定不会陌生。作为一个老厉害的编辑器，它的过人之处简单讲讲来说有这么几点：
首先，它的设计者是一个很有名的工程师：EricGamma。20年前，他是《设计模式：可复用面向对象软件的基础》的作者之一，这本书在开发社区的地位被视为面向对象软件开发的指路明灯（瞻望大佬）。其次，对于写JavaScript的人来说，虽然市面上有很多大大小小不同的编辑器，比如sublime、atom、webstorm等等，VSCode与他们区别在于他比sublime开源，比atom更快，比webstorm更轻。一、介绍
VSCode全名VisualStudioCode是微软开源的一款编辑器，GitHub上标星k（11万）。它是基于TypeScript编写，总计代码数量在30万以上，大型知名开源项目。
我们先来简单看一下它的产品定位吧～可以看到，项目作者对它的定位属于轻量级的编辑器，所以要求它轻量、响应速度快，适用于多种语言等等。VSCode的编辑能力来自于一款同样来自微软叫做monaco的开源Web编辑器，同时为了实现跨平台的需求又引入了Electron：一个使用JavaScript，HTML和CSS构建跨平台的桌面应用程序。
正因为有了清楚的定位和方向，才会有了更加清晰的边界。或许你很疑惑，他是怎么支持多种语言的又做到轻量级的？那我们不得不来看一下它的多进程架构。
VSCode有一个主进程入口，负责一些窗口管理、进程间通信、自动更新等全局任务；渲染进程，顾名思义负责一个Web页面的渲染；插件宿主进程，每个插件的代码都运行在一个独立且隔离的Node环境的宿主进程中，插件无法访问UI；Debug进程，用于调试；语言服务，是一种重要的特殊拓展，可以为许多编程语言提供编辑体验，还可以实现VSCode支持的自动补充，错误检查（诊断），跳转到定义以及许多其他的语言功能。
最核心的部分就是它的插件系统，为编辑器的拓展带来了更加个性化的开源定制。只要你能找到强大的VSCode插件组合在一起，那你的编辑器一定是一个高级且高效率的工作好帮手。
先来看一下，VSCode大致有哪些可供我们拓展的能力。
有没有心痒痒地想自己动手搞一个VSCode插件？下面就带大家做一个入门级的VSCode插件。
二、环境准备
首先你搞个Node.js和Git。
其次「全局（-g）」安装Yeoman（现代Web应用程序脚手架工具）和VSCodeExtensionGenerator这两个官方指定的工具脚手架（生成VSCode插件项目的工具）。
npminstall-gyogenerator-code当你看到下面的信息就说明安装成功了：
三、初始化项目结构
依赖环境搞好了，接下来就要用到Yeoman这个工具来帮我们快速创建项目结构啦！可能有很多人对这个脚手架不熟悉，简单的说，Yeoman是一个通用的脚手架系统，它允许创建任何类型的应用程序。你可以用它快速开始新项目。所以不仅仅是JavaScript这个语言，Java，Python，C＃等都可以用它来生成项目，只要有对应的生成器就可以。那我们进行下一步，在命令行中输入yocode。
让我们来分析一下这几个选项的意思，其实和字面意思一样，从上到下：
新的插件（Typescript）新的插件（JavaScript）新的主题颜色新的语言支持新的代码片段新的键值绑定新的插件包新的语言包（本土化）你可以看到这个工具支持创建多种类型的项目，我们今天先从插件（Extension）入手，所以第一个和第二个的区别就是，你要是会用TypeScript就选第一个，也是官方推荐的一个；要是不想写各种麻烦的类型定义和类型校验，就选第二个JavaScript。这一次我们选JavaScript来做一个简单的入门，随后你会需要填写一系列初始化的信息如下：
注释如下：
Whattypeofextensiondoyouwanttocreate?（创建哪一种类型的扩展？）Whatsthenameofyourextension?（扩展的名称？应该全部为小写字母，没有空格）Whatstheidentifierofyourextension?（扩展的标示？）Whatsthedescriptionofyourextension?（扩展的描述是什么？）Initializeagitrepository?（是否初始化git仓库？）Whichpackagemanagertouse?（因为我们装的是npm，所以选npm就行了，如果你有yarn，你也可以选yarn）使用哪一种包管理器（来下载各种npm包）四、搞一个简单的VSCode插件
前面的准备得差不多啦！那我们就要开始开「绿皮小火车」啦。
进入刚创建的文件目录cdtest-extension，文件目录：
或许你觉得文件目录嘛，一看就知道了，不就是几个配置信息或者项目说明嘛，但是这里面的配置信息「非常重要」x3，重要到你可能少一个配置或者配置的不对，功能就出不来。所以我们还是稍微花点笔墨聊聊这里的信息。
首先你可以在package.json文件里面，看到自己在前一个步骤里面设置的各个值，配置内的各个主要的含义如下，这里有个小点注意一下，如果你的VSCode比较旧，且更新不了最新的，你就把下面的engines设置的版本低一点，比如我就改成了^1.52.0确保一定能兼容目前的VSCode编辑器就可以:
熟悉了配置之后，我们再来看一下插件的入口文件extsnsion.js，里面主要有两个主要的函数，一个是activate表示激活插件时的处理，一般是注册命令等一些初始化的操作；另一个是deactivate，表示插件失活的时候做的处理，其实听名字你也应该有体感，这就是插件的生命周期里的两个钩子函数嘛。
我们来分析一下上面这段代码，你可以看到里面registerComman了一个命令，是不是有种似曾相识的感觉？没错，就是上面在package.json里面有提到的那个