你的第一个扩展

  1. 安装Yeoman和VS Code Extension Generator: npm install -g yo generator-code
  2. 命令行输入yo code运行脚手架,并进行自定义:
    20190613161441.png
    此时的目录结构如下:
    20190614103801.png
  3. 此时在新项目中按F5会打开调试模式,在新弹窗中输入命令Hello World,会弹出弹窗,这是初始项目自带的命令

开发插件

以上只是演示官方demo,现在开始走一下开发流程,首先让我们修改一下提示信息:

  • extension.js中修改Hello WorldHello VS Code
  • 在debugger窗口中按ctrl+r刷新页面,或者运行reload window
  • 再次输入指令Hello World

应该看到如下效果:

extension.js

// 模块'vscode'包含VS Code扩展API
const vscode = require('vscode');
// 您的扩展将在第一次执行命令时被激活
// 当你的扩展被激活时,触发activated方法,activated方法只执行一次
/**
 * @param {vscode.ExtensionContext} context
 */
function activate(context) {
	console.log('Congratulations, your extension "git-watch" is now active!');
	// 该指令被定义在package.json文件contributes属性中
	// 现在使用registerCommand注册命令
	// registerCommand的第一个参数必须与package.json中的command匹配
	let disposable = vscode.commands.registerCommand('extension.helloWorld', function () {
		vscode.window.showInformationMessage('Hello VS Code');
	});
	context.subscriptions.push(disposable);
}
exports.activate = activate;
// 当你的扩展停用时会调用该方法
function deactivate() {}
module.exports = {
	activate,
	deactivate
}

package.json

{
	"name": "git-watch",
	"displayName": "git-watch",
	"description": "",
	"version": "0.0.1",
	"engines": {
		"vscode": "^1.35.0"
	},
	"categories": [
		"Other"
	],
	"activationEvents": [
		"onCommand:extension.helloWorld"
	],
	"main": "./extension.js",
	"contributes": {
		"commands": [{
            "command": "extension.helloWorld",
			"title": "Hello World"
		}]
	},
	"scripts": {
		"postinstall": "node ./node_modules/vscode/bin/install",
		"test": "node ./node_modules/vscode/bin/test"
	},
	"devDependencies": {
		"typescript": "^3.3.1",
		"vscode": "^1.1.28",
		"eslint": "^5.13.0",
		"@types/node": "^10.12.21",
		"@types/mocha": "^2.2.42"
	}
}

Hello World扩展内部解析