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've looked around - and could not find a way to automatically do this. so:
I have some syntax highlighting I built in vim I want to transfer over to vscode. and I'm getting stuck on at least 2 parts.
so far here's where I'm at: I've build a vscode language extension - set up some basic syntax rules, and have that copied over to the vscode config folder.
the parts I'm having trouble with - I could use some clarity in what some fields mean - naming conventions.
and nested parsing of syntax, things only appearing in other elements.
below is the bit I added on top of the vim-markdown syntax.
syntax region spokenWord start=/\v"/ skip=/\v\\./ end=/\v"/ contained
syntax region thoughtWord start=/\v'/ skip=/\v\\./ end=/\v'/ contained
syntax region codeWord start=/\v`/ skip=/\v\\./ end=/\v`/ contained contains=objkw,spokenWord,thoughtWord,action,description,executekw
syntax region action start=/\v*/ skip=/\v\\./ end=/\v*/ contained
syntax region description start=/\~/ skip=/\v\\./ end=/\~/ contained
syntax match executekw "[e][x][e]\s" contained
syntax match objkw "[.][\w]+" contained
syntax region BLOCK start=/{/ skip=/\s+/ end=/}/ contains=spokenWord,thoughtWord,codeWord,action,description
highlight link spokenWord String
hi thoughtWord ctermfg=red
hi codeWord ctermfg=gray
highlight link action function
highlight link description Statement
hi BLOCK guibg=#FF00FF ctermfg=magenta cterm=bold guifg=#00FF00
hi exepm ctermfg=green
hi objP ctermfg=red
hi fntk ctermfg=blue
hi fnnm ctermfg=130
hi executekw ctermfg=130
hi objkw ctermfg=130
which results in this look:
what I have so far for the vs code syntax is as follows:
{
"$schema": "https://raw.githubusercontent.com/martinring/tmlanguage/master/tmlanguage.json",
"name": "MDX",
"patterns": [
{
"include": "#keywords"
},
{
"include": "#strings"
},
{
"include":"#thought"
},
{
"include":"#action"
},
{
"include":"#description"
},
{
"include":"#code"
},
{
"include":"#block"
},
{
"include":"#object"
}
],
"repository": {
"keywords": {
"patterns": [{
"name": "keyword.control.markdownextened",
"match": "\\b(EXE|IF|WHILE|FOR|RETURN)\\b"
}]
},
"strings": {
"name": "string.quoted.double.markdownextened",
"begin": "\"",
"end": "\"",
"patterns": [
{
"name": "constant.character.escape.markdownextened",
"match": "\\\\."
}
]
},
"thought":{
"name": "thought.quoted.single.markdownextened",
"begin": "'",
"end": "'",
"patterns": [
{
"name": "constant.character.escape.markdownextened",
"match": "\\\\."
}
]
},
"action":{
"name": "action.asterisk.markdownextened",
"begin": "*",
"end": "*",
"patterns": [
{
"name": "constant.character.escape.markdownextened",
"match": "\\\\."
}
]
},
"description":{
"name": "action.tilde.markdownextened",
"begin": "~",
"end": "~",
"patterns": [
{
"name": "constant.character.escape.markdownextened",
"match": "\\\\."
}
]
},
"code":{
"name": "action.grave.markdownextened",
"begin": "`",
"end": "`",
"patterns": [
{
"name": "constant.character.escape.markdownextened",
"match": "\\\\."
}
]
},
"block":{
"name": "action.braces.markdownextened",
"begin": "{",
"end": "}",
"patterns": [
{
"name": "constant.character.escape.markdownextened",
"match": "\\\\."
}
]
},
"object":{
"name": "action.object.markdownextened",
"patterns": [
{
"name": "action.object.markdownextened",
"match": "/[.][\\w]/"
}
]
}
},
"scopeName": "source.markdown"
}
I could not find a guide anywhere on converting vim syntax highlighting into vscode syntax highlighting. I'll be reading though the documentation until I figure this out - but would love some help!
Are you wanting to do a one off conversion
or a tool to continuously convert a large amount of highlighters?
I doubt there will be many, if at all any, large public vim to vscode converters tools
I am going to assume your vscode example above is working
and you have read up on pages like
Your First Extension Visual Studio Code Extension
Syntax Highlight Guide Visual Studio Code Extension
Writing a TextMate Grammar Some Lessons Learned
oniguruma/RE at master kkos/oniguruma
I would highly suggest looking at other people's highlighters Where are extensions installed?
and download a TextMate syntax highlighter
TextMate Languages or (my own) Text Mate Language Syntax Highlighter
Colours are defined by your current theme
Your theme defines colours based on the scopename that you give to each token in your highlighter
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 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
How can one change mark properties (not field encodings or values) with vega-lite selections ?
For example, to highlight selected bars with a layer mark {type: bar, fill: none, stroke, black}.
I think I found an answer in the interactive bar select highlight example
It may not be directly possible to change mark properties via selection but one can conditionally set fillOpacity and strockWidth encodings channel with a selection.
Releveant piece of code is :
"fillOpacity": {
"condition": {"selection": "select", "value": 1},
"value": 0.3
},
"strokeWidth": {
"condition": [
{
"test": {
"and": [
{"selection": "select"},
"length(data(\"select_store\"))"
]
},
"value": 2
},
{"selection": "highlight", "value": 1}
],
"value": 0
}