服务器之家:专注于VPS、云服务器配置技术及软件下载分享
分类导航

PHP教程|ASP.NET教程|Java教程|ASP教程|编程技术|正则表达式|C/C++|IOS|C#|Swift|Android|VB|R语言|JavaScript|易语言|vb.net|

服务器之家 - 编程语言 - 编程技术 - 使用VSCode 创建一个插件

使用VSCode 创建一个插件

2020-08-22 20:15geek 编程技术

相信大家对vscode应该都不陌生,VSCode是微软出的一款轻量级代码编辑器,免费而且功能强大,以功能强大、提示友好、不错的性能和颜值俘获了大量开发者的青睐,对JavaScript和NodeJS的支持非常好,自带很多功能,例如代码格式化,

vscode 创建一个插件,如何创建一个插件,vs code 的插件既然是一个 node.js 应用,那么官方自然也会提供了基于 npm 的工具链来帮助你创建和维护插件。
首先你需要的是 yeoman,一个脚手架工具。通过 yeoman 你可以快速创建代码模板,如下所示:

npm install -g yeoman

然后你需要安装 vs code 的模板:

npm install -g generator-code

有了脚手架,你就可以创建一个 vs code 的插件模板了。接下来运行:

yo code myextension

请注意,第三个参数将是你新创建的插件的文件夹名字。
使用VSCode 创建一个插件

由上图,你可以看到有七个插件模板:

前两个是通过编程来提供插件功能,你可以选择 typescript 或者 javascript,结果都是类似的,因为 typescript 最后也需要被编译成 javascript 再发布;第三个是主题插件,你可以将你自己创建的主题分享给其他人;第四个是语言支持,也就是语法高亮、语言定义等;第五个是代码片段的分享;第六个则是分享快捷键;第七个就是对多个插件进行组合分享。

关于主题(color theme)、快捷键(keymap)、代码片段(code snippet)的分享,我会在下一讲进行介绍。语言支持之后也会涉及。今天,我们先讲述第二个选项 “new extension (javascript)”。

使用VSCode 创建一个插件

接下来,你会依次被提示输入插件的名字、介绍、想要用哪个账号发布、是否要打开 type check以及是否要使用 git 等。你可以暂时按照我的样例进行输入,之后也可以再根据需要修改。

输入全部问题后,脚本就会自动地创建文件,安装需要的 dependencies。全部结束后,脚本会提示你,可以运行下面的脚本打开这个插件的代码。

cd myextension code .

使用VSCode 创建一个插件

vs code 的脚手架,默认为我们创建了不少的文件。不过像 .gitignore、.eslintrc.json、readme.md 这些文件的作用想必你已经比较熟悉了。对于这个插件而言,最重要的是下面几个文件:

package.json 我上面提到了,vs code 的插件就是一个 node.js 的应用,package.json 里记录了这个 node.js 应用的信息。同时,插件的信息也会被记录在这个文件内。 extension.js 这个文件是当前插件的全部代码。 .vscode 脚手架工具已经为我们提供了调试配置、任务配置等,有了它们,我们就不用自己花时间书写了。

好了,下面我们来看看 extension.js 和 package.json。看完它们,你就对 vs code 插件是如何运行的有很好的理解的。

extension.js的内容在删除了所有的注释后,如下:

 

?
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
const vscode = require('vscode');
 
function activate(context) {
  console.log('congratulations, your extension "myextension" is now active!');
  let disposable = vscode.commands.registercommand('extension.sayhello', function () {
    vscode.window.showinformationmessage('hello world!');
  });
 
  context.subscriptions.push(disposable);
}
exports.activate = activate;
 
function deactivate() {
}
exports.deactivate = deactivate;

第一,我们引用了 vscode 这个库。通过引用这个库,我们就能够使用 vs code 的插件 api 了。

第二,我们创建了 activate 函数并且将其输出。vs code 的插件进程在激活这个插件时,就是调用这个被输出(export)的函数。也就是说,这个函数,就是这个插件的入口。

相对应的就是 deactivate 函数,当我们禁用这个插件或者关闭 vs code 时,这个函数就会被调用了。
下面我们再来看看 activate 这个函数:

 

?
1
2
3
4
5
6
7
8
function activate(context) {
  console.log('congratulations, your extension "myextension" is now active!');
  let disposable = vscode.commands.registercommand('extension.sayhello', function () {
    vscode.window.showinformationmessage('hello world!');
  });
 
  context.subscriptions.push(disposable);
}`

这个函数首先输出了 log,告诉我们插件已经被成功激活了。接着,我们使用 vscode.commands.registercommand注册一个名为 extension.sayhello的命令,这个命令的实现,是 registercommand的第二个参数,我们通过调用 vscode.window.showinformationmessage ,在界面上调出一个提示框,内容则是 hello world!

不过,光有 extension.js ,这个插件是无法运行的。vs code 会根据条件来激活插件,而这个激活条件写在了 package.json 中,那么我们一起来看下package.json。

 

?
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
{
  "name": "myextension",
  "displayname": "myextension",
  "description": "my extension",
  "version": "0.0.1",
  "publisher": "rebornix",
  "engines": {
    "vscode": "^1.29.0"
  },
  "categories": [
    "other"
  ],
  "activationevents": [
    "oncommand:extension.sayhello"
  ],
  "main": "./extension",
  "contributes": {
    "commands": [
      {
        "command": "extension.sayhello",
        "title": "hello world"
      }
    ]
  },
  "scripts": {
    "postinstall": "node ./node_modules/vscode/bin/install",
    "test": "node ./node_modules/vscode/bin/test"
  },
  "devdependencies": {
    "typescript": "^2.6.1",
    "vscode": "^1.1.21",
    "eslint": "^4.11.0",
    "@types/node": "^8.10.25",
    "@types/mocha": "^2.2.42"
  }
}

上面这个文件,跟普通的 npm 的 package.json 只有三处不同。

第一处是 engines。

"vscode": "^1.29.0"

它指定了运行这个插件需要的 vs code 版本。比如 “^1.29.0” 就是说明,要安装运行这个插件必须要使用 vs code 1.29 及以上版本。

第二处是 activationevents。

 

?
1
2
3
"activationevents": [
  "oncommand:extension.sayhello"
]

这个属性指定了什么情况下这个插件应该被加载并且激活。在我们这个例子里,激活条件是,当用户想要运行 “extension.sayhello” 这个命令时,就激活这个插件。
这个机制能够保证,当我们需要使用这个插件的时候,这个插件才被激活,尽可能地保证性能和内存使用的合理性。

第三处是 contributes。

 

?
1
2
3
4
5
6
7
8
"contributes": {
  "commands": [
    {
      "command": "extension.sayhello",
      "title": "hello world"
    }
  ]
},

这个属性指定了,我们这个插件给 vs code 添加了一个 command,这个 command 的 id 是 “extension.sayhello”, 跟 extension.js 中写的一样。而这个命令的名字,叫做 hello world。

如果不写这个属性的话,vs code 是不会把这个命令注册到命令面板中的,我们也就没法找到这个命令并且执行了。

原文链接:https://geek-docs.com/vscode/vscode-plugin-dev/vscode-create-a-plug-in.html

延伸 · 阅读

精彩推荐
  • 编程技术简单、好懂的Svelte实现原理

    简单、好懂的Svelte实现原理

    本文会围绕一张流程图和两个Demo讲解,正确的食用方式是用电脑打开本文,跟着流程图、Demo一边看、一边敲、一边学...

    魔术师卡颂4822021-11-10
  • 编程技术让开发效率倍增的 VS Code 插件

    让开发效率倍增的 VS Code 插件

    今天来分享一些提升开发效率的实用 VS Code 插件!Better Comments 扩展可以帮助我们在代码中创建更人性化的注释,有不同形式和颜色的注释供我们选择。 ...

    前端充电宝7132022-04-21
  • 编程技术AIOps,SRE工程师手中的利器

    AIOps,SRE工程师手中的利器

    AIOps开始成为一种极为重要的站点可靠性工程工具。它能够高效吸纳观察数据、参与数据以及来自第三方工具的数据,判断系统运行状态并保证其处于最佳...

    至顶网5962021-03-08
  • 编程技术Delphi - Indy idMessage和idSMTP实现邮件的发送

    Delphi - Indy idMessage和idSMTP实现邮件的发送

    这篇文章主要介绍了Delphi - Indy idMessage和idSMTP实现邮件的发送,本文通过实例代码给大家介绍的非常详细,具有一定的参考借鉴价值,需要的朋友可以参考下...

    JJ_JeremyWu6592020-09-22
  • 编程技术2021年值得关注的React PDF 库

    2021年值得关注的React PDF 库

    今天,许多网络应用程序为其用户提供内置的PDF浏览选项。然而,选择一个并不容易,因为它们的功能远远超过显示PDF。在这篇文章中,我将评估5个React的...

    TianTianUp5222021-06-21
  • 编程技术用户态 Tcpdump 如何实现抓到内核网络包的?

    用户态 Tcpdump 如何实现抓到内核网络包的?

    在网络包的发送和接收过程中,绝大部分的工作都是在内核态完成的。那么问题来了,我们常用的运行在用户态的程序 tcpdump 是那如何实现抓到内核态的包...

    开发内功修炼11612021-09-08
  • 编程技术从Context源码实现谈React性能优化

    从Context源码实现谈React性能优化

    这篇文章主要介绍Context的实现原理,源码层面掌握React组件的render时机,从而写出高性能的React组件,源码层面了解shouldComponentUpdate、React.memo、PureComponen...

    魔术师卡颂5312020-12-20
  • 编程技术真正聪明的程序员,总有办法不加班

    真正聪明的程序员,总有办法不加班

    工作效率提升了,就可以少加班了,聪明的程序员,总会有一堆可以提升编码效率的工具?当一种工具满足不了工作需求,就去探索新的,今天纬小创就给...

    今日头条12482021-03-04