editor

VS Code 插件开发: tolower

  1. 首先，读取文档中的内容。需要使用的 API 是 selection、selections、getText 等。
  2. 其次，对这些内容进行二次加工，这部分就是 business logic 了。
  3. 最后，修改编辑器内的内容。我们可以使用 edit 来修改文本，也可以直接修改 editor.selection 和 editor.selections 来改变光标的位置。

安装依赖

VS Code 的插件就是一个 Node.js 的应用。

1
2
3
4
# yeoman
npm -g install yo
# VS Code 的模板
npm install -g generator-code

创建 tolower 插件

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
# tolower
yo code tolower
     _-----_     ╭──────────────────────────╮
    |       |    │   Welcome to the Visual  │
    |--(o)--|    │   Studio Code Extension  │
   `---------´   │        generator!        │
    ( _´U`_ )    ╰──────────────────────────╯
    /___A___\   /
     |  ~  |
   __'.___.'__
 ´   `  |° ´ Y `

? What type of extension do you want to create?
  New Extension (TypeScript)
❯ New Extension (JavaScript)
  New Color Theme
  New Language Support
  New Code Snippets
  New Keymap
  New Extension Pack
(Move up and down to reveal more choices)

访问编辑器

既然是编辑器相关的命令，那么我们肯定需要能够访问到编辑器，以及其中的内容。首先我们要获取的就是：当前工作区内，用户正在使用的编辑器。

1
let editor = vscode.window.activeTextEditor;

如果你是手动敲入上面的代码，你可以看到 VS Code 提示的插件 API 建议。

有了这个编辑器，我们就能获取非常多的信息了。不过先别急，editor 这个变量并非一定总是有效的值，比如用户现在并没有打开任何文件，编辑器是空的，那么此时 editor 的值就是 undefined。所以， 在正式使用 editor 之前，我们要判断一下，editor 是否为 undefined，是的话就结束命令的运行。

1
2
3
if (!editor) {
    return;
}

接下来，我们可以输入 editor.，自动补全立刻给我们提示了不少的属性。

这其中几个值得一提的有如下：

  • document :也就是当前编辑器中的文档内容；
  • edit :用于修改编辑器中的内容；
  • revealRange :用于将某段代码滚动到当前窗口中；
  • selection :当前编辑器内的主光标；
  • selections :当前编辑器中的所有光标，第一个光标就是主光标，后面的则是用户创建出来的多光标；
  • setDecorations :设置编辑器装饰器

首先，我们要读取的信息就是当前的文档信息和主光标的信息。

1
2
let document = editor.document;
let selection = editor.selection;

有了这两个信息，读取光标选中的内容就简单了。

1
let text = document.getText(selection);

document 一共哪些 API 这里我就不介绍了，相信你可以自己探索，这里我们使用就是 getText，以获取某段代码。

1
let result = text.toLowerCase();

最后一步操作就是将原来编辑器内的文本进行替换了。此时我们就要用到 edit 这个 API 了。值得注意的是，这个 API 的第一参数，是一个 callback，callback 的参数是 editBuilder，也就是真正用于修改代码的对象。editBuilder 有以下几个 API：

  • delete
  • insert
  • replace
  • setEndOfLine

这里我们要使用的当然就是 replace 了。

1
editBuilder.replace(selection, result);

我们只需将原先的 selection 里的内容，替换成新的 result 即可。

快捷键

上面我们介绍了如何去书写一个命令，但是这只是完成了工作的一半，剩下的一半则是为这个命令绑定一个快捷键了。要完成快捷键的绑定，我们需要在 package.json 中的 contributes 片段添加一段新的配置：

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
"contributes": {
	"commands": [
		{
			"command": "extension.tolower",
			"title": "to lower"
		}
	],
	"keybindings": [
		 {
			 "key": "ctrl+l",
			 "command": "extension.tolower",
			 "when": "editorTextFocus"
		 }
	 ]
},

我们在 contributes 添加了新的字段 “keybindings” ，它的值是一个数组，里面就是所有的快捷键设置了。

我们给 “extension.sayHello” 这个命令，绑定了 ctrl+t ，同时只有当 editorTextToLower 为真时才会激活这个快捷键。此时如果我们运行这个插件，就可以直接使用 ctrl + l 来转换成小写。

运行插件

  1. F5
  2. 选中要转换成小写的文本
  3. 运行
    1. 命令
      1. Ctrl + Shift + P
      2. to lower
    2. 快捷键
      1. Ctrl + l

源码：https://github.com/Game2020/tolower

参考：玩转VS Code