vscode插件开发流程

介绍

这是一个简单的vscode的开发流程总结，目的是达到开发一个简单的vscode插件并打包，vscode安装自我开发的插件并运行

开始

插件代码生成器

需要一个生产插件代码，去生成我们的插件开发基础代码。

npm install -g yo generator-code

安装好之后执行命令yo code初始化项目结构。

项目结构

.
├── .gitignore                  //配置不需要加入版本管理的文件
├── .vscode                     // VS Code的整合,目前我知道launch是断电调试部分
│   ├── launch.json
│   ├── settings.json
│   └── tasks.json
├── .vscodeignore                //配置不需要加入最终发布到拓展中的文件
├── README.md
├── src                         // 源文件
│   └── extension.ts            // 如果我们使用js来开发拓展，则该文件的后缀为.js
├── test                        // test文件夹
│   ├── extension.test.ts       // 如果我们使用js来开发拓展，则该文件的后缀为.js
│   └── index.ts                // 如果我们使用js来开发拓展，则该文件的后缀为.js
├── node_modules
│   ├── vscode                  // vscode对typescript的语言支持。
│   └── typescript              // TypeScript的编译器
├── out                         // 编译之后的输出文件夹(只有TypeScript需要，JS无需)
│   ├── src
│   |   ├── extension.js
│   |   └── extension.js.map
│   └── test
│       ├── extension.test.js
│       ├── extension.test.js.map
│       ├── index.js
│       └── index.js.map
├── package.json                // 该拓展的资源配置文件
├── tsconfig.json               // 
├── typings                     // 类型定义文件夹
│   ├── node.d.ts               // 和Node.js关联的类型定义
│   └── vscode-typings.d.ts     // 和VS Code关联的类型定义
└── vsc-extension-quickstart.md 

package.json 结构

{
	"name": "testvscode",
	"displayName": "testVscode",
	"description": "this is a test vscode",
	"version": "0.0.1",

	"engines": {
		"vscode": "^1.34.0"
	},
	"categories": [
		"Other"
	],
	"activationEvents": [
		"onCommand:extension.helloWorld"//这种是通过输入命令来触发执行的，也
	],
	"main": "./out/extension.js",
	"contributes": {
		"commands": [
			{
				"command": "extension.helloWorld",//定义指令名称
				"title": "Hello World"//就是通过在vscode里面按F1，输入这个title去执行extension.helloWorld这一个指令
			}
		]
	},
	"scripts": {
		"vscode:prepublish": "npm run compile",
		"compile": "tsc -p ./",
		"watch": "tsc -watch -p ./",
		"postinstall": "node ./node_modules/vscode/bin/install",
		"test": "npm run compile && node ./node_modules/vscode/bin/test"
	},
	"devDependencies": {
		"typescript": "^3.3.1",
		"vscode": "^1.1.28",
		"tslint": "^5.12.1",
		"@types/node": "^10.12.21",
		"@types/mocha": "^2.2.42"
	}
}

 

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 "testvscode" 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', () => {
		// The code you place here will be executed every time your command is executed
		// extension.helloWorld 这里在package中定义了的
		// Display a message box to the user
		vscode.window.showInformationMessage('this is a test!');//窗口显示提示
	});//这里注册了命令事件，

	context.subscriptions.push(disposable);//定义好的vscode注册推送到订阅。
}

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

插件制作过程

整个插件制作围绕package.json和extensiong.ts来完成的，

• 第一步

  在package.json里面配置

  "activationEvents": [
  		"onCommand:extension.helloWorld"//这种是通过输入命令来触发执行的，也
  	],
  	"main": "./out/extension.js",
  	"contributes": {
  		"commands": [
  			{
  				"command": "extension.helloWorld",//定义指令名称
  				"title": "Hello World"//就是通过在vscode里面按F1，输入这个title去执行extension.helloWorld这一个指令
  			}
  		]
  	},
  

• 第二步

  	let disposable = vscode.commands.registerCommand('extension.helloWorld', () => {
  		// The code you place here will be executed every time your command is executed
  		// extension.helloWorld 这里在package中定义了的
  		// Display a message box to the user
  		vscode.window.showInformationMessage('this is a test!');//窗口显示提示
  	});//这里注册了命令事件，
  
  	context.subscriptions.push(disposable);//定义好的vscode注册推送到订阅。
  

发布

npm install -g vsce 安装插件发布工具

发布有两种方式

• 第一种

  发布到marketplace.visualstudio.com，这种方式是提供一个所有人都可以访问的插件，我目前不需要这样，只是自我开发阶段，这一步省略讨究。

• 第二种

  打包成.vsix，发送给别人即可在别人的vscode上安装该插件

  vsce package

注意

1. 在package里面必须填写publisher ，这个publisher如果不填写会报错误在打包的时候。
2. 项目的readme.md必须修改，打包时候也会报错。

项目demo地址:(https://gitee.com/cgsx/vs-plugin)