I am writing a VSCode extension which has a view container with a WebviewView added to it.
"contributes": {
"commands": [
{
"command": "showView",
"title": "Show view"
}
],
"viewsContainers": {
"panel": [
{
"id": "mycontainer",
"title": "My Container",
"icon": "media/app.svg"
}
]
},
"views": {
"mycontainer": [
{
"type": "webview",
"id": "myview",
"name": "MyView"
}
]
}
},
In showView command implementation. I want to programmatically make the view myview to display in VSCode UI. How to do that?
You can focus on a view in the sidebar by using the view's id and executing the focus command:
vscode.commands.executeCommand("myview.focus")
VSCode exposes a focus command on every view registered.
Your example view has ID myview so you want to call the myview.focus command.
You can verify this by opening File->Prefs->Keyboard Shortcuts and searching for myview.
To test the command, try adding the following in your extension activate function. It will create a clickable button on the bottom statusbar that will focus your sidebar view.
activate = function (workspace) {
const statusBarItem = vscode.window.createStatusBarItem(vscode.StatusBarAlignment.Right, 10);
statusBarItem.command = 'myview.focus';
statusBarItem.text = 'MYVIEW';
statusBarItem.show();
workspace.subscriptions.push(statusBarItem);
}
Related
I'm trying to add my own command in a Visual Studio Code extension in the upper "view/title" row. For example, like the built-in "Extension"-View:
I couldn't figure out from the menu-contributions API how this works. I specified a custom ViewContainer in the package.json, which in turn contains multiple views:
{
"viewsContainers": {
"activitybar": [
{
"id": "my-view",
"title": "My View",
"icon": "media/logo.png"
}
]
},
"views": {
"my-view": [
{
"id": "profiles",
"name": "Profiles"
},
{
"id": "templates",
"name": "Templates"
}
]
}
}
Since I have a command that goes across all views, I would like to have the button at the height of the ViewsContainer (as in the image). Is that possible?
How can I create a panel section like the one that Gitlens has (see the screenshot below)? I've looked over the documentation and the Github examples presented here and I could not find anything on how to create this.
I want to have a button there next to TERMINAL and when I press on it to present a webview.
I have managed to do this by creating a viewContainer in the contributes object.
"viewsContainers": {
"panel": [
{
"id": "myPanel",
"title": "Colors",
"icon": "images/views/history.svg"
}
]
},
and then I create a view that uses the viewContainer.
"contributes": {
"views": {
"myPanel": [
{
"type": "webview",
"id": "calicoColors.colorsView",
"name": "Calico Colors"
}
]
},
How to add toggle menu to 'view/title' with VSCode extension?
Like "✓ Open Editors".
I'd really appreciate it if you could show me the sample code or an example.
I want to change 'Minify' to '✓ Minify'!
We have no control of the space in front of the menu item. And we can't use theme icons in the command title. The icon of a command is used when the menu entry is used in the group navigation and may another.
Simulate a checkmark with a Unicode character.
Create 2 menu entries, one with and one without the checkmark and use a when with a context variable to show one of the menu entries.
"activationEvents": [
"onCommand:myext.minify",
"onCommand:myext.restore"
],
"contributes": {
"commands": [
{
"command": "myext.minify",
"title": " Minify"
},
{
"command": "myext.restore",
"title": "✓ Minify"
}
],
"menus": {
"view/title": [
{
"command": "myext.minify",
"when": "view == krews && !myext:isMinified"
},
{
"command": "myext.restore",
"when": "view == krews && myext:isMinified"
}
]
}
}
Set a context variable with the state of the checkmark.
const setMinifyContext = (isMinified) => {
vscode.commands.executeCommand('setContext', 'myext:isMinified', isMinified);
};
context.subscriptions.push(
vscode.commands.registerCommand('myext.minify', () => {
setMinifyContext(true);
})
);
context.subscriptions.push(
vscode.commands.registerCommand('myext.restore', () => {
setMinifyContext(false);
})
);
setMinifyContext(false);
I am trying to add a button to the 'editor/title' section which runs my command. With my current configuration, my command name appears when unfolding the menu by clicking the 3 buttons. What I want is to have an icon presented (like for the split editor button), which runs my command.
From the documentation I found that it should be possible to supply an svg file for the icon, but I prefer to use an icon from the product icons. This way the icon can change along with the theme.
Is that even possible, or am I just configuring it incorrectly?
This is the config I have so far:
"contributes": {
"commands": [
{
"command": "my-extension.my-command"
"title": "My Command",
"icon": "preview" // <-- this refers to the icon from 'product icons'
}
],
"menus": {
"editor/title": [
{
"when": "resourceExtname == .xyz",
"command": "my-extension.my-command"
}
]
}
}
This should works:
"contributes": {
"commands": [
{
"command": "my-extension.my-command"
"title": "My Command",
"icon": "$(preview)" // <-- the syntax for using a 'product icon' is $(iconIdentifier)
}
],
}
I have a VS Code extension that analyses custom JSON and YAML files. So in the project's package.json, there is this:
"activationEvents": [
"onLanguage:yaml",
"onLanguage:json",
"onCommand:extension.sidePreview"
],
Whenever someone opens one of these files, I'd like to add a "show preview" icon in the top right corner of the editor:
So I added the corresponding icon resources to the project, and:
"contributes": {
"commands": [
{
"command": "extension.sidePreview",
"title": "Preview file",
"icon": {
"dark": "./resources/open-preview-dark.svg",
"light": "./resources/open-preview-light.svg"
}
}
],
"menus": {
"editor/title": [
{
"command": "extension.sidePreview",
"when": "true"
}
]
},
But this doesn't work... I don't see any icon.
I'd also like to ensure that this button and command are only available when my function isCustomFile in server.ts returns true. Is there a way of doing this?
That's because you added the wrong section under menus.
You are supposed to add editor/title instead.
Reference