editor

VS Code 插件开发: Hello World

2020/01/21

安装依赖

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

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

创建第一个插件： Hello World

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
# hello world
yo code hello_world
     _-----_     ╭──────────────────────────╮
    |       |    │   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. 前两个是通过编程来提供插件功能，你可以选择 TypeScript 或者 JavaScript，结果都是类似的
  2. 因为 TypeScript 最后也需要被编译成 JavaScript 再发布；
  3. 第三个是主题插件，你可以将你自己创建的主题分享给其他人；
  4. 第四个是语言支持，也就是语法高亮、语言定义等；
  5. 第五个是代码片段的分享；
  6. 第六个则是分享快捷键；
  7. 第七个就是对多个插件进行组合分享。

查看代码

1
2
cd hello-world
code .
  • package.json VS Code 的插件就是一个 Node.js 的应用，
    • package.json 里记录了这个 Node.js 应用的信息。同时，插件的信息也会被记录在这个文件内。
  • extension.js 这个文件是当前插件的全部代码。
  • .vscode 脚手架工具已经为我们提供了调试配置、任务配置等，有了它们，我们就不用自己花时间书写了。

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
37
38
{
	"name": "hello-world",
	"displayName": "hello_world",
	"description": "Vs code plugin hello world",
	"version": "0.0.1",
	"engines": {
		"vscode": "^1.41.0"
	},
	"categories": [
		"Other"
	],
	"activationEvents": [
		"onCommand:extension.helloWorld"
	],
	"main": "./extension.js",
	"contributes": {
		"commands": [
			{
				"command": "extension.helloWorld",
				"title": "Hello World"
			}
		]
	},
	"scripts": {
		"test": "node ./test/runTest.js"
	},
	"devDependencies": {
		"@types/glob": "^7.1.1",
		"@types/mocha": "^5.2.7",
		"@types/node": "^12.11.7",
		"@types/vscode": "^1.41.0",
		"eslint": "^6.6.0",
		"glob": "^7.1.5",
		"mocha": "^6.2.2",
		"typescript": "^3.6.4",
		"vscode-test": "^1.2.2"
	}
}
  1. engines
    • 指定了运行这个插件需要的 VS Code 版本
  2. activationEvents
    • 指定了什么情况下这个插件应该被加载并且激活
  3. contributes
    • 这个插件给 VS Code 添加了一个 command，这个 command 的 id 是 “extension.sayHello”， 跟 extension.js 中写的一样。而这个命令的名字，叫做 Hello World。

extension.js

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
37
// The module 'vscode' contains the VS Code extensibility API
// Import the module and reference it with the alias vscode in your code below
const vscode = require('vscode');

// this method is called when your extension is activated
// your extension is activated the very first time the command is executed

/**
 * @param {vscode.ExtensionContext} context
 */
function activate(context) {

	// Use the console to output diagnostic information (console.log) and errors (console.error)
	// This line of code will only be executed once when your extension is activated
	console.log('Congratulations, your extension "hello-world" is now active!');

	// The command has been defined in the package.json file
	// Now provide the implementation of the command with  registerCommand
	// The commandId parameter must match the command field in package.json
	let disposable = vscode.commands.registerCommand('extension.helloWorld', function () {
		// The code you place here will be executed every time your command is executed

		// Display a message box to the user
		vscode.window.showInformationMessage('Hello 2020 GameDevLog!');
	});

	context.subscriptions.push(disposable);
}
exports.activate = activate;

// this method is called when your extension is deactivated
function deactivate() {}

module.exports = {
	activate,
	deactivate
}

运行插件

  1. F5
  2. Ctrl + Shift + P
  3. Hello World

参考：玩转VS Code