“改造” VS Code 编辑器,一起写个插件吧!

 “改造” VS Code 编辑器,一起写个插件吧!

作者:HelloGitHub-小夏(首发于 HelloGitHub 公众号

作为一个靠代码作为“生计”的开发者,bug 写的好不好,编辑器真的很重要!那么 Visual Studio Code 这个大名你肯定不会陌生。作为一个老厉害的编辑器,它的过人之处简单讲讲来说有这么几点:

首先,它的设计者是一个很有名的工程师:Eric Gamma。20年前,他是《设计模式:可复用面向对象软件的基础》的作者之一,这本书在开发社区的地位被视为面向对象软件开发的指路明灯(瞻望大佬)。

 “改造” VS Code 编辑器,一起写个插件吧!

其次,对于写 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 构建跨平台的桌面应用程序。

 “改造” VS Code 编辑器,一起写个插件吧!

正因为有了清楚的定位和方向,才会有了更加清晰的边界。或许你很疑惑,他是怎么支持多种语言的又做到轻量级的?那我们不得不来看一下它的多进程架构。

VS Code 有一个主进程入口,负责一些窗口管理、进程间通信、自动更新等全局任务;

渲染进程,顾名思义负责一个 Web 页面的渲染;

插件宿主进程,每个插件的代码都运行在一个独立且隔离的 Node 环境的宿主进程中,插件无法访问 UI;

Debug 进程,用于调试;

语言服务,是一种重要的特殊拓展,可以为许多编程语言提供编辑体验,还可以实现 VS Code 支持的自动补充,错误检查(诊断),跳转到定义以及许多其他的语言功能。

 “改造” VS Code 编辑器,一起写个插件吧!

最核心的部分就是它的插件系统,为编辑器的拓展带来了更加个性化的开源定制。只要你能找到强大的 VS Code 插件组合在一起,那你的编辑器一定是一个高级且高效率的工作好帮手。

先来看一下,VS Code 大致有哪些可供我们拓展的能力。

 “改造” VS Code 编辑器,一起写个插件吧!

有没有心痒痒地想自己动手搞一个 VS Code 插件?下面就带大家做一个入门级的 VS Code 插件。

二、环境准备

首先你搞个 Node.js 和 Git。

其次「全局(-g)」安装 Yeoman(现代 Web 应用程序脚手架工具)和 VS Code Extension Generator 这两个官方指定的工具脚手架(生成 VS Code 插件项目的工具)。

npm install -g yo generator-code

当你看到下面的信息就说明安装成功了:

 “改造” VS Code 编辑器,一起写个插件吧!

三、初始化项目结构

依赖环境搞好了,接下来就要用到 Yeoman 这个工具来帮我们快速创建项目结构啦!可能有很多人对这个脚手架不熟悉,简单的说,Yeoman 是一个通用的脚手架系统,它允许创建任何类型的应用程序。你可以用它快速开始新项目。所以不仅仅是 JavaScript 这个语言,Java,Python,C#等都可以用它来生成项目,只要有对应的生成器就可以。那我们进行下一步,在命令行中输入 yo code。

 “改造” VS Code 编辑器,一起写个插件吧!

让我们来分析一下这几个选项的意思,其实和字面意思一样,从上到下:

新的插件(Typescript)

新的插件(JavaScript)

新的主题颜色

新的语言支持

新的代码片段

新的键值绑定

新的插件包

新的语言包(本土化)

内容版权声明:除非注明,否则皆为本站原创文章。

转载注明出处:https://www.heiqu.com/zywssj.html