作为一个靠代码作为“生计”的开发者,bug 写的好不好,编辑器真的很重要!那么 Visual Studio Code 这个大名你肯定不会陌生。作为一个老厉害的编辑器,它的过人之处简单讲讲来说有这么几点:
-
首先,它的设计者是一个很有名的工程师:Eric Gamma。20年前,他是《设计模式:可复用面向对象软件的基础》的作者之一,这本书在开发社区的地位被视为面向对象软件开发的指路明灯(瞻望大佬)。
-
其次,对于写 JavaScript 的人来说,虽然市面上有很多大大小小不同的编辑器,比如 sublime、atom、webstorm 等等,VS Code 与他们区别在于他比 sublime 开源,比 atom 更快,比 webstorm 更轻。
一、介绍
VS Code 全名 Visual Studio Code 是微软开源的一款编辑器,GitHub 上标星 115k(11 万)。它是基于 TypeScript 编写,总计代码数量在 30 万以上,大型知名开源项目。
项目地址:https://github.com/microsoft/vscode
我们先来简单看一下它的产品定位吧~可以看到,项目作者对它的定位属于轻量级的编辑器,所以要求它轻量、响应速度快,适用于多种语言等等。VS Code 的编辑能力来自于一款同样来自微软叫做 monaco 的开源 Web 编辑器,同时为了实现跨平台的需求又引入了 Electron:一个使用 JavaScript,HTML 和 CSS 构建跨平台的桌面应用程序。
![图片](https://static.doc-tr.net/mp-images/b8/b8012748df4d2bf2303949681269d154.jpg?)
正因为有了清楚的定位和方向,才会有了更加清晰的边界。或许你很疑惑,他是怎么支持多种语言的又做到轻量级的?那我们不得不来看一下它的多进程架构。
-
VS Code 有一个主进程入口,负责一些窗口管理、进程间通信、自动更新等全局任务; -
渲染进程,顾名思义负责一个 Web 页面的渲染; -
插件宿主进程,每个插件的代码都运行在一个独立且隔离的 Node 环境的宿主进程中,插件无法访问 UI; -
Debug 进程,用于调试; -
语言服务,是一种重要的特殊拓展,可以为许多编程语言提供编辑体验,还可以实现 VS Code 支持的自动补充,错误检查(诊断),跳转到定义以及许多其他的语言功能。
![图片](https://static.doc-tr.net/mp-images/c4/c47e2aa2719b201b49a0c9fc937de876.jpg?)
最核心的部分就是它的插件系统,为编辑器的拓展带来了更加个性化的开源定制。只要你能找到强大的 VS Code 插件组合在一起,那你的编辑器一定是一个高级且高效率的工作好帮手。
先来看一下,VS Code 大致有哪些可供我们拓展的能力。
![图片](https://static.doc-tr.net/mp-images/40/40715b6b7362a73cdc3a0d5e165f9db9.jpg?)
有没有心痒痒地想自己动手搞一个 VS Code 插件?下面就带大家做一个入门级的 VS Code 插件。
二、环境准备
首先你搞个 Node.js 和 Git。
其次「全局(-g)」安装 Yeoman(现代 Web 应用程序脚手架工具)和 VS Code Extension Generator 这两个官方指定的工具脚手架(生成 VS Code 插件项目的工具)。
npm install -g yo generator-code
当你看到下面的信息就说明安装成功了:
![图片](https://static.doc-tr.net/mp-images/b3/b3a2bdacb0a72097a346e1229888e975.jpg?)
三、初始化项目结构
依赖环境搞好了,接下来就要用到 Yeoman 这个工具来帮我们快速创建项目结构啦!可能有很多人对这个脚手架不熟悉,简单的说,Yeoman 是一个通用的脚手架系统,它允许创建任何类型的应用程序。你可以用它快速开始新项目。所以不仅仅是 JavaScript 这个语言,Java,Python,C#等都可以用它来生成项目,只要有对应的生成器就可以。那我们进行下一步,在命令行中输入 yo code
。
![图片](https://static.doc-tr.net/mp-images/37/378c4d51562b2234894ec20c992e2805.jpg?)
让我们来分析一下这几个选项的意思,其实和字面意思一样,从上到下:
-
新的插件(Typescript) -
新的插件(JavaScript) -
新的主题颜色 -
新的语言支持 -
新的代码片段 -
新的键值绑定 -
新的插件包 -
新的语言包(本土化)
你可以看到这个工具支持创建多种类型的项目,我们今天先从插件(Extension)入手,所以第一个和第二个的区别就是,你要是会用 TypeScript 就选第一个,也是官方推荐的一个;要是不想写各种麻烦的类型定义和类型校验,就选第二个 JavaScript。这一次我们选 JavaScript 来做一个简单的入门, 随后你会需要填写一系列初始化的信息如下:
![图片](https://static.doc-tr.net/mp-images/41/41b1ff94c49491b715a0e6b07f33e3e3.jpg?)
注释如下:
-
What type of extension do you want to create?(创建哪一种类型的扩展?) -
What's the name of your extension?(扩展的名称?应该全部为小写字母,没有空格) -
What's the identifier of your extension?(扩展的标示?) -
What's the description of your extension?(扩展的描述是什么?) -
Initialize a git repository?(是否初始化 git 仓库?) -
Which package manager to use? (因为我们装的是 npm,所以选 npm 就行了,如果你有 yarn,你也可以选 yarn) -
使用哪一种包管理器(来下载各种 npm 包)
四、搞一个简单的 VS Code 插件
前面的准备的差不多啦!那我们就要开始开「绿皮小火车」啦。
进入刚创建的文件目录 cd test-extension
,文件目录:
![图片](https://static.doc-tr.net/mp-images/7b/7bbc17867ab12a701ab27dd1d87c7908.jpg?)
或许你觉得文件目录嘛,一看就知道了,不就是几个配置信息或者项目说明嘛,但是这里面的配置信息「非常重要」x3,重要到你可能少一个配置或者配置的不对,功能就出不来。所以我们还是稍微花点笔墨聊聊这里的信息。
首先你可以在 package.json
文件里面,看到自己在前一个步骤里面设置的各个值,配置内的各个主要的含义如下,这里有个小点注意一下,如果你的 VS Code 比较旧,且更新不了最新的,你就把下面的 engines
设置的版本低一点,比如我就改成了 ^1.52.0
确保一定能兼容目前的 VS Code 编辑器就可以 :
{
"name": "test-extension", // 插件的名字
"displayName": "test-extension", // 在插件市场展示的名字
"description": "vscode extension sample", // 插件描述
"version": "0.0.1", // 插件版本
"engines": { // 最低支持 vscode 的版本
"vscode": "^1.52.0"
},
"categories": [ // 插件的类别,用于在插件市场做区分
"Other"
],
"activationEvents": [ // 插件激活的事件列表,可以有多个触发机制,所以是数组形式
"onCommand:test-extension.helloWorld"
],
"main": "./extension.js", // 插件主入口
"contributes": { // 贡献点,用于拓展插件功能的配置项,这里不会细讲,先用 command 举例
"commands": [
{
"command": "test-extension.helloWorld",
"title": "Hello World"
}
]
},
"scripts": {
"lint": "eslint .",
"pretest": "npm run lint",
"test": "node ./test/runTest.js"
},
"devDependencies": {
"@types/vscode": "^1.55.0",
"@types/glob": "^7.1.3",
"@types/mocha": "^8.0.4",
"@types/node": "^12.11.7",
"eslint": "^7.19.0",
"glob": "^7.1.6",
"mocha": "^8.2.1",
"typescript": "^4.1.3",
"vscode-test": "^1.5.0"
}
}
熟悉了配置之后,我们再来看一下插件的入口文件 extsnsion.js
,里面主要有两个主要的函数,一个是 activate
表示激活插件时的处理,一般是注册命令等一些初始化的操作;另一个是 deactivate
,表示插件失活的时候做的处理,其实听名字你也应该有体感,这就是插件的生命周期里的两个钩子函数嘛。
// 引了 vscode 这个模块,这样你就可以用它里面的很多很多功能啦
const vscode = require('vscode');
/**
* @param {vscode.ExtensionContext} context
*/
function activate(context) {
console.log('Congratulations, your extension "test-extension" is now active!');
let disposable = vscode.commands.registerCommand('test-extension.helloWorld', function () {
vscode.window.showInformationMessage('Hello World from test-extension!');
});
context.subscriptions.push(disposable);
}
function deactivate() {}
module.exports = {
activate,
deactivate
}
我们来分析一下上面这段代码,你可以看到里面 registerCommand
了一个命令,是不是有种似曾相识的感觉?没错,就是上面在 package.json
里面有提到的那个 command
,让我们摘出来一起看看:
...,
// package.json
"contributes": { // 贡献点,用于拓展插件功能的配置项,这里不会细讲,先用 command 举例
"commands": [
{
"command": "test-extension.helloWorld",
"title": "Hello World"
}
]
},
...
...
// extension.js
function activate(context) {
console.log('Congratulations, your extension "test-extension" is now active!');
let disposable = vscode.commands.registerCommand('test-extension.helloWorld', function () {
vscode.window.showInformationMessage('Hello World from test-extension!');
});
context.subscriptions.push(disposable);
}
...
这样看起来是不是很直观了?在 package.json
里面设置的 command
的值,就是 extension.js
里面 registerCommand
的值。那这几行命令是什么意思呢?让我们一起来运行看看:
![图片](https://static.doc-tr.net/mp-images/30/30890e805b496544e57b41e7fac21a88.jpg?)
他会帮你打开一个新的 VS Code 编辑器,插件只会加载到这个编辑器中。现在我们使用调用快捷键(MacOS) command+p ,输入 >Hello World
(不区分大小写):
![图片](https://static.doc-tr.net/mp-images/0a/0aa6b8cc256a6902c102f9b0801ff745.jpg?)
回车一下,你会发现在右下角一个不起眼的角落里输出了这么一个提示:
![图片](https://static.doc-tr.net/mp-images/ba/ba64608c650c1a45b085484e7edd8595.jpg?)
我相信聪明的你们结合代码一定已经恍然大悟了对不对!不知道你们有没有这个疑问,上面那个 console.log
去哪里看?别急,我们回到插件代码的那个编辑器中,仔细看下面这边,他会在我们输入上面的命令之后才出现,因为在 package.json
里面我们配置插件的激活时机就是 onCommand:test-extension.helloWorld
:
![图片](https://static.doc-tr.net/mp-images/1d/1dc1ff4ca5b5a3db3f33a1a41ff246b7.jpg?)
那我们现在抱着「刻意学习」的思路,改一下上面的代码,比如把 test-extension
改成 test
:
...,
// package.json
"activationEvents": [
"onCommand:test.helloWorld"
],
...,
"contributes": {
"commands": [
{
"command": "test.helloWorld",
"title": "Hello World"
}
]
},
...
// extension.js
...
function activate(context) {
console.log('我在这里!!');
let disposable = vscode.commands.registerCommand('test.helloWorld', function () {
vscode.window.showInformationMessage('我改变了 command 的名字!');
});
context.subscriptions.push(disposable);
}
...
再按照上面说的触发方法再来一遍,发现依旧是可以的!所以这里的名字只是一个命名空间,你可以改成你想要的任何名字,来适用于比较复杂的插件体系。既然是个命名空间,那其实不要这个前缀也可以。
五、实现一个属于自己的插件
前面介绍了那么多,大家有没有发现其实这个体系也不难,有大佬在前面铺路,其实我们只要按照规则“填空”就好了,那现在我们就来实现一个小小的功能——加一个按钮和他的点击事件。
修改我们的 package.json
如下,因为当前我希望插件加载的时候就已经订阅了按钮的点击事件,所以这里我们可以把 activationEvents
改成 *
,这样的话我们的插件在一开始就可以激活并注册事件了:
...,
"activationEvents": [
"*",
],
"contributes": {
"commands": [
{
"command": "test.helloWorld",
"title": "Hello World"
},
// 注册一下按钮点击的事件,再配一个小图标
{
"command": "test.button",
"title": "按钮",
"icon": {
"light": "./media/light/preview.svg",
"dark": "./media/dark/preview.svg"
}
}
],
// 在这里加一下下面这个配置
"menus": {
"editor/title": [
{
"command": "test.button",
"group": "navigation"
}
]
}
},
...
然后回到我们的 extension.js
里面增加一个简单的消息提醒:
function activate(context) {
console.log('我在这里!!');
let disposable = vscode.commands.registerCommand('test.helloWorld', function () {
vscode.window.showInformationMessage('我改变了 command 的名字!');
});
// 新增一个按钮的点击命令操作内容
let button = vscode.commands.registerCommand('test.button', function () {
vscode.window.showInformationMessage('按钮点击');
});
// 记得这个新的命令也要放进去订阅一下
context.subscriptions.push(disposable, button);
}
看一下效果:
![图片](https://static.doc-tr.net/mp-images/70/703728d88370d31735cf474dbbfc7dce.jpg?)
是不是很简单的就自定义了 VS Code 的样式?那我们现在就来分析一下我们上面做的事情。首先,我们修改了 package.json
里的配置,增加了一个 menus
,这个 menus 是什么呢?答案是菜单。菜单项定义包含选择时应调用的命令以及该项应显示的条件(when
),所以你也可以给这个菜单项显示加个显示的逻辑,比如我们规定在打开 javascript
文件时才显示这个按钮:
{
"contributes": {
"menus": {
"editor/title": [
{
"when": "resourceLangId == javascript",
"command": "test.button",
"group": "navigation"
}
]
}
}
}
![图片](https://static.doc-tr.net/mp-images/e5/e55813bd5ee8d4ad8f1ca2a4d5b93542.jpg?)
![图片](https://static.doc-tr.net/mp-images/d1/d142321fe6e708e24b93c7765bedf228.jpg?)
而 group
的含义呢,是用来定义菜单项的排序和分组的。来自官网的一个图,表示不同的 group
之间存在的顺序关系,当然这个菜单不是上面我们写的那个,而是 editor/context
,所以不同的菜单之间的 group
其实是有细微差别的,但是大体都差不多,而 navigation
的显示优先级是最高的:
![图片](https://static.doc-tr.net/mp-images/02/021421ee5eaba4b3be92dc96a5749eb6.jpg?)
我们也可以加一个这个看看:
"menus": {
"editor/title": [
{
"command": "test.button",
"group": "navigation",
"when": "resourceLangId == javascript"
}
],
"editor/context": [
{
"command": "test.button",
"group": "navigation",
"when": "resourceLangId == javascript"
}
]
}
效果是一样的:
![图片](https://static.doc-tr.net/mp-images/bf/bfe63c9ca11db7d48ee446c313d5c560.jpg?)
如果你好奇还有哪些菜单,我这里简单整理「翻译」了一下官网的内容(仅常见菜单非全部):
配置菜单项的名称 | 菜单位置 |
---|---|
commandPalette | 全局命令面板 |
explorer/context | 资源管理器上下文菜单 |
editor/context | 编辑器右键上下文菜单 |
editor/title | 编辑器标题栏,不配置图片就显示文字 |
editor/title/context | 编辑器标题右键上下文菜单 |
debug/callstack/context | 调试栈视图的上下文菜单 |
debug/toolbar | 调试工具栏 |
scm/title | SCM 标题菜单 |
view/title | 看标题菜单 |
touchBar | macOS 触摸栏 |
timeline/title | 时间轴视图标题菜单栏 |
extension/context | 扩展程序视图上下文菜单 |
六、做个总结
从上面的简单例子可以看出,VS Code 不仅可以支持我们自定义想要的命令,也允许我们在「限定范围内」对编辑器进行个性化的拓展。为什么说是限定范围呢?因为按官网的话来说,目前插件体系有下面这些局限性:
插件不具备访问 VS Code UI 的 DOM 的能力。所以不能将自定义的 CSS 应用于 VS Code 或将 HTML 元素添加到 VS Code UI 的扩展中去。这样的限制在于:
-
确保用户的操作在可控范围内,保证操作的一致性 -
防止因为底层 Web 技术的更迭导致对一些已存在的插件会有影响 -
保证开发人员可以继续在原有插件基础上进行一如往常的迭代,而不用再去打破原有的规则重新学习
其实我们今天的内容只是工作区拓展很小一部分内容,要学习这个庞大的体系,还是要不断的努力学习呀!下一次,我们来走进「声明类语言特性」,想知道编辑器里的自动提示和补全是怎么做到的嘛?
VS Code · 编程开发 · 业界资讯
文章评论