VsCode extension development （一）

参考官网文档:

https://code.visualstudio.com/api

环境准备

开始之前需要安装Node.js, npm和vscode
要生产ext还需要安装：
yeomen是一个客户端的脚手架工具，用来搭建新项目

npm install -g yo

vscode-generator-code是一个yeomen生成器

npm install -g generator-code

以上两个工具也可使用以下命令一次性安装

npm install -g yo generator-code

生成Ext

进入你需要生成Ext的文件夹打开cmd使用命令：

# 用来生成Ext的目录结构
yo code 

输入以上命令会有一些提示需要你填写：

• 你想创建什么类型的extension?
  可通过键盘上下键选择你想要创建的ext类型
• What’s the name of your extension? 扩展名称
• What’s the identifier of your extension? 默认
• What’s the description of your extension? 可写也可后面写
• Initialize a git repository?是否创建git仓库
• Bundle the source code with webpack?
• Which package manager to use?选择管理工具（npm或yarn）

回车后就会安装相关依赖
创建项目和安装相关依赖的过程，需要一会儿时间

查看项目目录结构

创建成功后就可以查看项目的目录结构

• .vscode文件夹存放程序运行和调试相关命令
• vsc-extension-quickstart.md文档介绍了插件的入门知识和运行方式，是项目创建后需要首先关注的点
• src文件夹中存放插件源代码，需要重点关注这一块（src/test存放插件 e2e 测试代码，暂时不用关注）
• package.json除了包含常规 node 项目配置属性外，还包含插件配置属性，也需要重点关注

使用以下命令打开项目

# 进入到项目目录下
cd VscDemoExt
# 使用vscode打开项目
code ./vscdemoext

Ext 开发最关键的两个文件package.json, src/extension.ts

package.json

{
  "name": "vscdemoext",
	"displayName": "VscDemoExt",
	"description": "",
	"version": "0.0.1",
	"engines": {
		"vscode": "^1.66.0"
	},
	"categories": [
		"Other"
	],
	"activationEvents": [
        "onCommand:vscdemoext.helloWorld"
	],
	"main": "./dist/extension.js",
	"contributes": {
		"commands": [
			{
				"command": "vscdemoext.helloWorld",
				"title": "Hello World"
			}
		]
	},
	"scripts": {
		"vscode:prepublish": "npm run package",
		"compile": "webpack",
		"watch": "webpack --watch",
		"package": "webpack --mode production --devtool hidden-source-map",
		"compile-tests": "tsc -p . --outDir out",
		"watch-tests": "tsc -p . -w --outDir out",
		"pretest": "npm run compile-tests && npm run compile && npm run lint",
		"lint": "eslint src --ext ts",
		"test": "node ./out/test/runTest.js"
	},
	"devDependencies": {
		"@types/vscode": "^1.66.0",
		"@types/glob": "^7.2.0",
		"@types/mocha": "^9.1.0",
		"@types/node": "14.x",
		"@typescript-eslint/eslint-plugin": "^5.16.0",
		"@typescript-eslint/parser": "^5.16.0",
		"eslint": "^8.11.0",
		"glob": "^7.2.0",
		"mocha": "^9.2.2",
		"typescript": "^4.5.5",
		"ts-loader": "^9.2.8",
		"webpack": "^5.70.0",
		"webpack-cli": "^4.9.2",
		"@vscode/test-electron": "^2.1.3"
	}
}

此文件中各个内容的含义：

• engines：说明该扩展将支持哪个版本的 VS Code / VSCodium。
• categories：设置扩展类型；你可以从 Languages、Snippets、Linters、Themes、Debuggers、Formatters、Keymaps 和 Other中选择。
• contributes：可用于与你的扩展一起运行的命令清单。
• main：扩展的入口点。
• activationEvents：指定激活事件发生的时间。具体来说，这决定了扩展何时会被加载到你的编辑器中。扩展是懒加载的，所以在激活事件触发之前，它们不会被激活。

extension.ts

// The module 'vscode' contains the VS Code extensibility API
// Import the module and reference it with the alias vscode in your code below
import * as vscode from 'vscode';

// this method is called when your extension is activated
// your extension is activated the very first time the command is executed
export function activate(context: vscode.ExtensionContext) {
	
	// 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 "vscdemoext" 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('vscdemoext.helloWorld', () => {
		// 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 World from VscDemoExt!');
	});

	context.subscriptions.push(disposable);
}

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

此文件实现以下两个功能

• 注册命令名称
• 执行命令功能

调式与开发Ext