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"
}
]
},
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?
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);
}
Steps to Reproduce:
1.Create a new sample project by selecting New Language support.
2.Now add the following code in package.json to register 3 new languages.
"languages": [
{
"id": "db2_z",
"aliases": ["Db2Z"],
"extensions": [".spsql", ".sql",".z"],
"configuration": "./language-configuration.json"
},
{
"id": "db2_i",
"aliases": ["Db2i"],
"extensions": [".spsql", ".sql",".i"],
"configuration": "./language-configuration.json"
},
{
"id": "db2_luw",
"aliases": ["Db2Luw"],
"extensions": [".spsql", ".sql",".luw"],
"configuration": "./language-configuration.json"
}
]
3.Now when I run the extension it displays only one language type while saving. But while selecting the language mode it shows three languages.
Please check the attached screenshots.
But while saving we can see only one language.
I tried all the things but unable to figure out the problem.
Thanks.
According to language overview
"You can add new file extensions to an existing language with the files.associations setting."
"files.associations": {
"*.php4": "php",
"*.php5": "php"
}
"files.associations": {
"**/somefolder/*.*": "php"
}
I have developed a modal pop up window by using the link https://learn.microsoft.com/en-us/azure/devops/extend/develop/using-host-dialog?view=azure-devops and provided option to open the pop up under Actions option. When pop opens it keeps on opening multiple pages continuously. Is there any solution to stop it and open only one instance of the window?
dialogService.openDialog(contributionId, dialogOptions).then(function(dialog){}
The above is the code to call the pop window.
contribution:
"contributions": [
{
"id": "registration-form",
"type": "ms.vss-web.action",
"description": "The content to be displayed in the dialog",
"targets": ["ms.vss-work-web.work-item-context-menu"],
"properties": {
"text": "ValidateDialog",
"title": "ValidateDialog",
"toolbarText": "ValidateDialog",
"uri": "registration-form.html"
}
}
],
"scopes": [
"vso.work"
],
"files": [
{
"path": "register_main.js",
"addressable": true
},
{
"path": "register-form.html",
"addressable": true
},
{
"path": "node_modules/vss-web-extension-sdk/lib/VSS.SDK.min.js",
"addressable": true
}
]
I have use following option to call the dialog:
https://learn.microsoft.com/en-us/azure/devops/extend/develop/using-host-dialog?view=azure-devops#showing-the-dialog-advanced
created html file with registration-form.html :
https://learn.microsoft.com/en-us/azure/devops/extend/develop/using-host-dialog?view=azure-devops#dialog-contents
I want to conditionally create a contribution to the activitybar section for a viewContainer for my extension code review.
I thought it can my be achieved by adding this section to the package.json file:
"viewsContainers": {
"activitybar": [
{
"id": "code-review",
"title": "Code Review",
"icon": "images/icon-sidebar.svg",
"when": "codeReview:displayCodeReviewExplorer"
}
]
},
But unfortunately it seems not to work as the view is always displayed and the when part seems not to be executed.
Here is the commit I created:
https://github.com/d-koppenhagen/vscode-code-review/commit/aa13034533bc5dd2a5a8bb2743db60505cd3bd52
So the general goal is to just activate the view when a specific file is present.
Otherwise, the view and of course the activitybar button should not be visible.
Any hint / suggestions / solution? PR's are also very welcome 🙂
Thanks in advance! 🙏
Okay, I fixed it with this commit:
https://github.com/d-koppenhagen/vscode-code-review/commit/830a7b922ec0e89fdaa75b4966a5348ffe84388d
The when clause must be part of the views section instead of viewsContainers -> activityBar:
"viewsContainers": {
"activitybar": [
{
"id": "code-review",
"title": "Code Review",
"icon": "images/icon-sidebar.svg"
}
]
},
"views": {
"code-review": [
{
"id": "code-review.list",
"name": "Comment Explorer",
"when": "codeReview:displayCodeReviewExplorer"
}
]
},