安装
npm install -g yo generator-code
yo code
? What type of extension do you want to create? New Extension (TypeScript)
? What's the name of your extension? () vscode-dawn
? What's the identifier of your extension? (vscode-dawn)
? What's the description of your extension? ()
? Initialize a git repository? (Y/n) n
? Bundle the source code with webpack? (y/N) n
? Which package manager to use? (Use arrow keys)
? Which package manager to use? npm
code ./vscode-dawn
VSCode
打开当前项目vscode-dawn
,按F5。项目将编译并在Extension Development Host
窗口中运行这个扩展插件。
使用快捷键Ctrl+Shift+P,打开命令面板,输入Hello World
。执行此命令。在右下角可以看到通知信息 Hello World from HelloWorld!
开发
入口文件extension.ts
入口文件导出两个函数activate
和deactivate
。当注册的事件被触发,activate
函数会执行。
import * as vscode from 'vscode';
// 在第一次执行命令时,才会激活扩展程序。
// 当扩展程序被激活的时候,会调用此方法。
export function activate(context: vscode.ExtensionContext) {
}
// 当扩展程序停用,调用此方法
export function deactivate() {}
清单文件package.json
每个扩展程序都有一个清单文件,package.json
。它有Node.js
相关的字段,例如scripts
、dependencies
。也有VS Code
特定的字段,例如publisher
、activationEvents
、 contributes
。
几个比较重要的字段:
name
和publisher
:VS Code
用<publisher>.<name>
作为扩展程序唯一的ID。main
:扩展程序入口activationEvents
和contributes
:前者是一系列事件声明集合。后者是扩展功能集合。engines.vscode
:指定了扩展程序所依赖的VS Code API的最小版本
// 表示VS Code一启动就会触发`activate`函数执行。
{
"activationEvents": [
"*"
],
}
// VS Code 启动完成,触发事件。不会减慢VS Code启动
{
"activationEvents": [
"onStartupFinished"
],
}
配置命令
注册不同的命令,打开Terminal,执行对应的命令行。
"contributes": {
"commands": [
{
"command": "vscode-dawn.dn.init",
"title": "dn init",
"category": "Dawn"
},
{
"command": "vscode-dawn.dn.dev",
"title": "dn dev",
"category": "Dawn"
},
],
},
const COMMANDS = {
'vscode-dawn.dn.init': 'dn init',
'vscode-dawn.dn.dev': 'dn dev',
'vscode-dawn.dn.test': 'dn test',
'vscode-dawn.dn.build': 'dn build',
'vscode-dawn.dn.publish': 'dn publish',
'vscode-dawn.dn.update': 'dn update',
'vscode-dawn.dn.help': 'dn --help'
};
export function activate(context: vscode.ExtensionContext) {
const disposables = Object.keys(COMMANDS).map(key => {
return vscode.commands.registerCommand(key, () => {
if (comindline.includes('init')) {
// 提示信息
vscode.window.showInformationMessage('Dawn 初始化项目');
} else if (comindline.includes('dev')) {
vscode.window.showInformationMessage('Dawn 启动中...');
}
// 创建Terminal
const terminal: vscode.Terminal = vscode.window.createTerminal(`Dawn Terminal #${NEXT_TERM_ID++}`);
// 默认开启Terminal
terminal.show();
// 执行命令行
terminal.sendText(comindline);
});
});
context.subscriptions.push(...disposables);
}
打开命令面板,可以看到注册好的命令。
在状态栏增加入口
export function activate(context: vscode.ExtensionContext) {
let myStatusBarItem = vscode.window.createStatusBarItem(vscode.StatusBarAlignment.Left, 1);
myStatusBarItem.text = 'Dawn';
myStatusBarItem.tooltip = 'Show Dawn Command Line';
myStatusBarItem.command = 'vscode-dawn.showDawn'; // 执行命令
context.subscriptions.push(myStatusBarItem);
myStatusBarItem.show();
}
点击弹出快捷选择面板
export function activate(context: vscode.ExtensionContext) {
let disposable = vscode.commands.registerCommand('vscode-dawn.showDawn', () => {
vscode.window.showQuickPick(COMMADN_TYPE).then(item => {
if (item && item.label) {
executeCommand(item.label.substr(item.label.indexOf('dn')));
}
});
});
context.subscriptions.push(disposable);
}
构建发布
注意:确保在package.json
中配置了publisher
# 安装
npm i -g vsce
# 打包,生成vsix文件。确保在package.json中配置了publisher
vsce package
#Executing prepublish script 'npm run vscode:prepublish'...
#> vscode-dawn@0.0.2 vscode:prepublish D:\WebProject\vscode-dawn
#> npm run compile
#> vscode-dawn@0.0.2 compile D:\WebProject\vscode-dawn
#> tsc -p ./
# DONE Packaged: D:\WebProject\vscode-dawn\vscode-dawn-0.0.2.vsix (12 files, 12.67KB)
上传扩展包,地址:https://marketplace.visualstudio.com/manage
最后
提示:使用之前请先安装阿里云构建工具Dawn