VS Code 插件能做什么
- 改變 VS Code 的顏色和圖標(biāo)主題——主題
- 在 UI 中添加自定義組件和視圖——擴(kuò)展工作臺(tái)
- 創(chuàng)建 Webview恶复，使用 HTML/CSS/JS 顯示自定義網(wǎng)頁(yè)——Webview 指南
- 支持新的編程語(yǔ)言——語(yǔ)言插件概覽
- 支持特定運(yùn)行時(shí)的調(diào)試——調(diào)試插件指南
初始化項(xiàng)目
安裝腳手架录别，生成 VS Code 插件項(xiàng)目
# 安裝
yarn global add yo generator-code
# 生成一個(gè)可以立馬開(kāi)發(fā)的項(xiàng)目
yo code
進(jìn)入你生成的項(xiàng)目中，按下 F5酱酬，你會(huì)看到一個(gè)插件發(fā)開(kāi)主機(jī)窗口，其中就運(yùn)行著插件云矫。
在命令面板(Ctrl+Shift+P) 中輸入Hello World命令膳沽，并回車，如果你看到了 Hello World 提示彈
窗让禀，恭喜你挑社，你的第一個(gè)簡(jiǎn)單的插件就創(chuàng)建成功了 ！
How this work
Hello World插件包含了 3 個(gè)部分：
- 注冊(cè)
onCommand激活事件:onCommand:extension.helloWorld巡揍，所以用戶可以在輸入Hello World命令后激活插件痛阻。 - 使用
contributes.commands發(fā)布內(nèi)容配置，綁定一個(gè)命令 IDextension.helloWorld腮敌，然后Hello World命令就可以在命令面板中使用了阱当。 - 使用
commands.registerCommandVS Code API 將一個(gè)函數(shù)綁定到你注冊(cè)的命令 IDextension.helloWorld上。
打開(kāi) src/extension 文件糜工，我們可以看到處理 hello world 命令的函數(shù)
import * as vscode from "vscode";
// 插件激活
export function activate(context: vscode.ExtensionContext) {
// 注冊(cè)命令弊添，即在命令面板中顯示的命令
let disposable = vscode.commands.registerCommand("ext.helloWorld", () => {
// 顯示 hello world 彈窗
vscode.window.showInformationMessage("Hello World from ext!");
});
// 訂閱
context.subscriptions.push(disposable);
}
export function deactivate() {}
此外，在 package.json 文件中可以看到命令注冊(cè)相關(guān)的配置
{
"activationEvents": ["onCommand:ext.helloWorld"],
"contributes": {
"commands": [
{
"command": "ext.helloWorld",
"title": "Hello World"
}
]
}
}
簡(jiǎn)單的 Hello World 插件已經(jīng)蘊(yùn)含了開(kāi)發(fā) VS Code 插件的關(guān)鍵點(diǎn)：
- 激活事件：決定插件激活的時(shí)機(jī)
- 發(fā)布內(nèi)容配置：注冊(cè)插件的能力捌木，如命令油坝，UI，調(diào)試
- VS Code API： 使用 VS Code API 實(shí)現(xiàn)插件的能力
大體上钮莲，插件就是通過(guò)組合發(fā)布內(nèi)容配置和 VS Code API 擴(kuò)展 VS Code 的功能免钻。
命令
命令會(huì)觸發(fā) VS Code 中注冊(cè)過(guò)的行為，命令是插件與用戶交互的重要渠道崔拥，VS Code 插件的諸多功能都需要結(jié)合命令實(shí)現(xiàn)邏輯极舔。
新建命令
使用 vscode.commands.registerCommand 創(chuàng)建新的命令，并綁定處理邏輯
import * as vscode from "vscode";
export function activate(context: vscode.ExtensionContext) {
const command = "myExtension.sayHello";
const commandHandler = (name?: string = "world") => {
console.log(`Hello ${name}!!!`);
};
const cmd = vscode.commands.registerCommand(command, commandHandler);
context.subscriptions.push(cmd);
}
執(zhí)行命令
執(zhí)行命令的路徑有多種
- 使用
vscode.commands.executeCommand('commandId', args) - 用戶通過(guò)命令面板執(zhí)行
- 通過(guò)配置綁定命令觸發(fā)執(zhí)行链瓦，如右鍵菜單綁定命令觸發(fā)執(zhí)行
僅通過(guò) registerCommand 注冊(cè)的命令可以通過(guò)executeCommand 執(zhí)行拆魏，但不會(huì)顯示在命令面板中盯桦，需要在 package.json中配置對(duì)應(yīng)的命令配置項(xiàng)(contribution)：
{
"contributes": {
"commands": [
{
"command": "myExtension.sayHello",
"title": "Say Hello"
}
]
}
}
命令激活場(chǎng)景
面向用戶的命令需要配置命令激活的場(chǎng)景，否則無(wú)法被觸發(fā)渤刃。
{
"activationEvents": ["onCommand:myExtension.sayHello"]
}
讓菜單項(xiàng)只顯示在命令面板中
注冊(cè)的命令默認(rèn)顯示在命令面板中拥峦。要想控制命令的可見(jiàn)性，我們提供了一個(gè)commandPalette菜單配置卖子，在這個(gè)配置中略号，你可以定義一個(gè)when控制是否在命令菜單中顯示。
下面的片段只在編輯器中選中了什么東西的時(shí)候才會(huì)在命令面板中顯示出 "Hello World"：
{
"contributes": {
"menus": {
"commandPalette": [
{
"command": "myExtension.sayHello",
"when": "editorLangId == markdown"
}
]
}
}
}
內(nèi)置命令
VS Code API 也提供了一些內(nèi)置命令洋闽，我們可以調(diào)用這些命令實(shí)現(xiàn)一些系統(tǒng)級(jí)的能力
-
vscode.openFolder打開(kāi)文件夾 -
vscode.open打開(kāi)提供的資源玄柠，如 URL，文件等
樹(shù)視圖（Tree View）
樹(shù)視圖是 VS Code 中比較常見(jiàn)的功能诫舅，我們常用的資源管理器就是一種樹(shù)視圖羽利。插件可以使用樹(shù)視圖支持簡(jiǎn)單的 UI 操作。
視圖容器與樹(shù)視圖
視圖容器包含了一列視圖(views)刊懈，這些視圖又包含在內(nèi)置的視圖容器中这弧。
目前只可以配置活動(dòng)欄（activitybar），下面的示例展示了活動(dòng)欄中的云開(kāi)發(fā)視圖容器是如何配置的:
- 配置視圖容器：在
package.json中的contributes.viewsContainers中配置以下字段-
id: 新視圖容器的名稱 -
title: 展示給用戶的視圖容器名稱虚汛，它會(huì)顯示在視圖容器上方 -
icon: 在活動(dòng)欄中展示的圖標(biāo)
-
- 配置樹(shù)視圖：在
package.json中的contributes.views中給視圖配置一個(gè) Id 外加一個(gè)名稱
{
"contributes": {
"viewsContainers": {
"activitybar": [
{
"id": "tcb",
"title": "云開(kāi)發(fā) Toolkit",
"icon": "assets/logo.svg"
}
]
},
"views": {
"tcb": [
{
"id": "tcb.views.function",
"name": "已部署云函數(shù)"
},
{
"id": "tcb.views.help",
"name": "幫助"
}
]
}
}
動(dòng)態(tài)創(chuàng)建樹(shù)視圖
某些情況下匾浪，樹(shù)視圖可能需要?jiǎng)討B(tài)展示，則可以使用 createTreeView 創(chuàng)建動(dòng)態(tài)的樹(shù)視圖泽疆。FtpTreeDataProvider 需要實(shí)現(xiàn) vscode.TreeDataProvider 定義的方法户矢，
vscode.window.createTreeView("ftpExplorer", {
treeDataProvider: new FtpTreeDataProvider(),
});
樹(shù)視圖操作
我們可以配置視圖下述位置的操作：
-
view/title: 標(biāo)題位置顯示的操作 -
view/item/context: 每個(gè)視圖項(xiàng)的操作
例如
{
"contributes": {
"menus": {
"view/title": [
{
"command": "tcb.refresh",
"group": "navigation"
}
],
"view/item/context": [
{
"command": "tcb.viewFunction",
"group": "group@order"
}
]
}
}
}
發(fā)布插件
當(dāng)完成了一個(gè)高質(zhì)量的插件后，我們可以將它發(fā)布到 VS Code 擴(kuò)展市場(chǎng)殉疼，這樣其他人就可以找到梯浪、下載并使用我們的插件了∑澳龋或者挂洛，我們可以將擴(kuò)展打包為可安裝的 VSIX 格式，直接分享給其他用戶使用眠砾。
安裝 VSCE
VSCE虏劲，即 Visual Studio Code Extensions，是一個(gè)用于打包褒颈、發(fā)布和管理 VS Code 插件的命令行工具柒巫。
# 安裝
npm install -g vsce
# 將插件打包成 .vsix 文件
vsce package
發(fā)布檢查
在發(fā)布插件到市場(chǎng)前，最好檢查一下插件的配置是否符合規(guī)范
- README：介紹你的插件谷丸，幫助他人更好的了解這個(gè)插件
- name：插件的名稱堡掏，必須用全小寫(xiě)，無(wú)空格的字母組成
- version：SemVer 版本模式兼容
- publisher：發(fā)行方名稱
- displayName：插件市場(chǎng)所顯示的插件名稱
- icon：插件的 Logo
- description：簡(jiǎn)單地描述一下你的插件是做什么的
- keywords：關(guān)鍵字?jǐn)?shù)組刨疼，這樣用戶可以更方便地找到你的插件
- main：插件入口
發(fā)布
在你檢查完插件信息泉唁，準(zhǔn)好好發(fā)布后鹅龄，你可以使用下面的命令直接將插件發(fā)布到市場(chǎng)中
vsce publish
更新
vsce 支持通過(guò) SemVer 語(yǔ)義標(biāo)識(shí)符：major，minor亭畜，patch 增量更新插件版本號(hào)扮休。例如，你想把插件從 1.0.0 更新到 1.1.0拴鸵，那么加上minor：
vsce publish minor
插件 package.json 的 version 會(huì)先更新玷坠，然后才發(fā)布插件
參考文檔
-
VS Code API
-
When 語(yǔ)法
