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?
Related
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 writing a logic gate simulator and have decided to make a VSCode extension for the language it uses. So far, I have a folder named lgc that contains the extension. Inside that folder there are the following:
package.json:
{
"name": "Lgc",
"version": "0.1.0",
"engines": {
"vscode": ">=0.9.0-pre.1"
},
"publisher": "AwesomeCronk",
"contributes": {
"languages": [{
"id": "lgc",
"aliases": ["lgc", "Lgc", "LGC"],
"extensions": [".lgc",".ttb"]
}],
"grammars": [{
"language": "lgc",
"scopeName": "source.lgc",
"path": "./syntaxes/lgc.tmLanguage.json"
}]
}
}
syntaxes/lgc.tmLanguage.json:
{
"$schema": "https://raw.githubusercontent.com/martinring/tmlanguage/master/tmlanguage.json",
"name": "Lgc",
"patterns": [
{
"include": "#keywords"
}
],
"repository":
{
"keywords":
{
"paterns":
[
{
"name:": "keyword.gate.lgc",
"match": "a"
}
]
}
},
"scopeName": "source.lgc"
}
This is a test that should highlight any instance of the letter a as keywords. When I copy this folder to $Home/.vscode/extensions/, and restart VSCode with a .lgc file open, it is not highlighted at all. All the text is white. The status bar shows lgc as the language, so I know VSCode is detecting the language properly. Why doesn't it highlight?
I think you have a typo in your syntaxes/lgc.tmLanguage.json file:
"paterns":
Should be:
"patterns":
Your package.json creates a View in the Explorer, say "Test"...
"views": {
"explorer": [
{
"id": "Test",
"name": "Test"
}
]
}
... is it possible in the extension's JS to access that View?
Something like this...
ThisView=vscode.window.getViewById("Test");
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"
}
]
},
I want for vscode to understand that the language in between <go> tags in a html file should be validated as golang code.
So given:
<go>
// I want to get intellisense and syntax highlighting for golang here
</go>
I currently have the following insides grammars in package.json:
{
"scopeName": "go.html.injection",
"path": "./syntaxes/go.tmLanguage.json",
"injectTo": [
"text.html"
],
"embeddedLanguages": {
"source.go": "go"
}
}
and in syntaxes/go.tmLanguage.json:
{
"scopeName": "go.html.injection",
"injectionSelector": "L:text.html",
"patterns": [
{
"include": "#go-tag"
}
],
"repository": {
"go-tag": {
"begin": "<go>",
"end": "<\/go>",
"name": "go"
}
}
}
Inspecting it using the debug gives it the name go as a textmate scope but the language is still set to html. How can I set the language of the match to golang:
Inspecting the content of script tags show the language set to javascript so this should be possible? I also realise that then the match includes the <go> tag so I understand I now need to add pattern matching and evaluation for that.
Update 20/02/20:
After referring to the vscode svelte extension I figured out how to get syntax highlighting for the tag and innerHTML using this inside syntaxes/go.tmLanguage.json (same package.json):
{
"scopeName": "go.html.injection",
"injectionSelector": "L:text.html",
"patterns": [
{
"include": "#go-tag"
}
],
"repository": {
"go-tag": {
"begin": "(<)(go)",
"beginCaptures": {
"1": {
"name": "punctuation.definition.tag.begin.html"
},
"2": {
"name": "entity.name.tag.html"
},
"3": {
"name": "punctuation.definition.tag.end.html"
}
},
"end": "(<\/)(go)(>)",
"endCaptures": {
"1": {
"name": "punctuation.definition.tag.begin.html"
},
"2": {
"name": "entity.name.tag.html"
},
"3": {
"name": "punctuation.definition.tag.end.html"
}
},
"patterns": [
{
"contentName": "source.go",
"begin": "(>)",
"beginCaptures": {
"1": {
"name": "punctuation.definition.tag.end.html"
}
},
"end": "(?=</go>)",
"patterns": [
{
"include": "source.go"
}
]
}
]
}
}
}
I can now see that vscode is correctly highlighting syntax for the tag and using the imported golang syntax tokens. However it is still displays the language as "html".