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"
}
]
},
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"
}
]
},
I am trying to add a simple configuration to my VSCode extension, but I can't find the correct information.
I just want that the user have a string input field, that has a default value, and read it from my typescript code through the vscode library
Can someone provide me and example about which file should I add, where, and how to consume? also if more configurations are needed.
Thanks!
Ok, found
I need to add into my package.json
...
"contributes": {
"commands": [
...
],
"configuration": {
"title": "My Extension",
"properties": {
"myExtension.myProperty": {
"type": "string",
"default": "default",
"description": "description"
}
}
}
},
and consume
vscode.workspace.getConfiguration('myExtension').myProperty;
I am building a VS Code extension starting from this page. Now I want to hide in the palette menu the command extension.timerStart after I run it. I have read this page, didn't helped. I have the code bellow for package.json. How do I make the varFromMyExtension===false part work?
"contributes": {
"commands": [
{
"command": "extension.timerStart",
"title": "Timer Start"
}
],
"menus": {
"commandPalette": [
{
"command": "extension.timerStart",
"when": "varFromMyExtension===false"
}
]
}
I think it is not possible to access variables from your extension directly in a when clause. However you can access any configuration of the settings.json.
From the docs (at the bottom of the chapter):
Note: You can use any user or workspace setting that evaluates to a boolean here with the prefix "config.".
So when your extension contributes a boolean configuration called varFromMyExtension you should be able to use it in the when clause. This configuration then can be manipulated programmatically, too.
So your package.json would probably contain something like this (not tested):
"contributes": {
"commands": [
{
"command": "extension.timerStart",
"title": "Timer Start"
}
],
"menus": {
"commandPalette": [
{
"command": "extension.timerStart",
"when": "!config.myextension.varFromMyExtension"
}
]
},
"configuration": {
"type": "object",
"title": "Indicates whether ...",
"properties": {
"myextension.varFromMyExtension": {
"title": "My title.",
"description": "My description",
"type": "boolean",
"default": false,
"pattern": "(true|false)"
}
}
}
}
But bare in mind that the user can see and edit this setting, too.
My goal is to create a collection of Snippets that will be available in the VSCode Marketplace. These snippets will be for 3 languages (html, css, and JS). This will be helpful for anyone who works on the specific framework, but especially my team.
I know that I can scope snippets (How can I add language-agnostic snippets in vscode?) to multiple languages. I also know that according to the docs I'm supposed to have a contributes object that has a snippets array in it. In my package.json for my vsc-extension the default is like the below:
"contributes": {
"snippets": [
{
"language": "markdown",
"path": "./snippets/markdown.json"
}
]
}
Is it correct for me to then update my package.json to something like:
"contributes": {
"snippets": [
{
"language": "html",
"path": "./snippets/snippets.json"
},
{
"language": "javacript",
"path": "./snippets/snippets.json"
}
]
}
and then have my snippets declare their own scope ("scope": "html")?
The way I went about this was to create a file for each type of snippet: php-snippets.json, js-snippets.json, etc. and then add those files to the snippets array.
"contributes": {
"snippets": [
{
"language": "php",
"path": "./snippets/php-snippets.json"
},
{
"language": "javascript",
"path": "./snippets/js-snippets.json"
}
]
}
One piece of information I left out from my question is that I used the Yo generator to create my snippet project. This was the recommended action in the documentation.
This worked. I added several languages to the snippets array in contributes as seen below.
"contributes": {
"snippets": [
{
"language": "html",
"path": "./snippets/snippets.json"
},
{
"language": "javacript",
"path": "./snippets/snippets.json"
}
,
{
"language": "scss",
"path": "./snippets/snippets.json"
}
]
}
Then inside snippets/snippets.json there is one large object that contains all of my snippets. You can see an example of that below. The key lines for each are "scope": "html and "scope": "scss".
"Each Helper": {
"scope": "html",
"prefix": "each",
"body": [
"{{#each $1}}",
" $2",
"{{/each}}"
],
"description": "Creates each helper -- handlebars"
},
"Break Point Small": {
"scope": "scss",
"prefix": "bps",
"body": [
"",
"#include breakpoint(\"small\") {// 551px and up",
" $1",
"}"
],
"description": "Tablet Break Point --Stencil"
},
I suppose I should have just tried it after not being able to find the answer here or in documentation.