Vscode API - Custom View Container Not Showing - visual-studio-code

I am currently writing a vs-code FTP type extension, which requires me to use the "TreeView". I have found this link:
https://code.visualstudio.com/api/extension-guides/tree-view
Which guides you through adding a tree view to the sidebar. However I am having trouble getting this off the ground, Step one on the above mentioned guide already does not seem to add the icon to my vscode sidebar? Thus holding from making any progress...
Obviously I am misunderstanding something! I am rather new to TypeScript and have trouble following others code on this subject. Please could anyone just help me getting the first step working?
This is my package.json contributes:
"contributes": {
"commands": [
{
"command": "extension.helloWorld",
"title": "Hello World"
}
],
"viewsContainers": {
"activitybar": [
{
"id": "live-workspace",
"title": "Live-Workspace",
"icon": "./src/Treeview/laptop.svg"
}
]
}
}
From what I understand this should place a "functionless" icon on the sidebar? Am I understanding this wrong? Is there more to be done to achieve this? Thanks!

A view container will only show up if it contains at least one view. It works for me once I also add the following to the contributes section:
"views": {
"live-workspace": [
{
"id": "exampleView",
"name": "Example View"
}
]
}

Related

How can I set the vscode extension custom icon in activity bar to the first?

I added one icon to the activity bar, and it works well.
I need to put it at the top of the activity bar (at the top for Resource Management), how can I reach the requirement?
Now the code like this: Is there any option can change the order?
"viewsContainers": {
"activitybar": [
{
"id": "thingio_sidebar",
"title": "ThingIO Options",
"icon": "media/dep.svg"
}
]
}

Extending an existing VSCode syntax highlighter with new elements

I am working on a new flavor of Markdown that introduces some new syntactical elements. I have manually modified the markdown.tmLanguage.json file bundled with VSCode to implement some syntax highlighting for them. I would now like to create a VSCode extension that provides the new additions to Markdown's syntax highlighting.
However, I do not really think that copy-pasting the original Markdown syntax highlighting logic just to add a few things on top is a good idea -- is there a way to create a .json syntax highlighting file that inherits (for lack of a better word) the existing syntax highlighting from another file?
For example, here's some pseudocode:
{
"version": "1.0.0",
"name": "My Markdown Flavor",
"extends": "markdown.tmLanguage.json", // <- PSEUDOCODE
"repository": { "... insert my extensions here ..." }
}
Is that possible? Or do I have to copy-paste the entire markdown.tmLanguage.json file?
I figured it out -- it is sufficient to include text.html.markdown as the last pattern:
{
"$schema": "https://raw.githubusercontent.com/martinring/tmlanguage/master/tmlanguage.json",
"name": "Majsdown",
"patterns": [
{
"include": "#majsdown_inject_expression"
},
{
"include": "#majsdown_execute_statement"
},
{
"include": "text.html.markdown"
}
],
// ...

Why is VSCode latex snippet not working (// character)?

I want to have create the following snippets:
"fraction": {
"prefix": ["//"],
"body": [
"\\frac{$1}{$2}",
],
"description": "Fraction"
},
I have many snippets in my latex.json file and all seem to work fine but this one doesn't, any idea why this could be the case?

How can one hightlight a word after a specific token?

I'm trying to make a VSC extension to hightlight a custom language and I face a problem: I need to hightlight a variable identifier in a specific way only if it's right after an opening paren (it's a lisp like).
So far, I've tried multiple variations of this (in my .tmLanguage.json, under the repository field):
"builtins": {
"patterns": [
{
"begin": "\\(([a-zA-Z_][a-zA-Z0-9_\\?:']*)",
"beginCaptures": {
"1": { "name": "entity.name.function.arkscript" }
},
"name": "entity.name.function.afterparen.arkscript"
},
{
"name": "keyword.operator.ark",
"match": "(\\+|\\-|\\*|/|<|>|<=|>=|!=|=|#)"
}
]
},
I know for sure that in the beginCaptures, the "0" is refering to everything, thus "1" must be the thing I matched, but using the scope inspector, I can see it's doesn't work for (hello "test"). The string is colored correctly but hello has the scope of a variable, not of a builtin.
If anyone knows a way around please let me know

Custom button is not showing in the VS code editor title menu bar

In an extension I want to add a button to display in the VS code editor title menu bar when it opens a synapse XML document.In order to that, I added the following command in commands of package.json file,
{
"command": "webview.show",
"title": "Show Diagram",
"category": "Webview",
"icon": {
"light": "./resources/images/icons/design-view.svg",
"dark": "./resources/images/icons/design-view-inverse.svg"
}
}
and in the package.json file I added the following editor/title,
"menus": {
"editor/title": [
{
"when": "resourceLangId == SynapseXml",
"command": "webview.show",
"group": "navigation"
}
],
}
But when I run the extension and opens a synapse XML document, it will not showing the button in the editor title menu bar.
Further I followed following documentation also,
https://code.visualstudio.com/api/references/contribution-points#contributes.menus
How can I display the button in VS code editor title menu bar?
I added your command and menu entry to an extension I'm making and the button appears where it should (all be it without an image in my screenshot as I don't have the icon). In my screenshot it is the empty space on the left of the ying-yang button - the tooltip is visible though on mouse over. I just removed the "where" test so I would guess that resourceLangId is not what you think it is or maybe the icons path is wrong so it looks like it isn't there as in my screenshot
For anyone still having the same issue:
In my case, using the correct context name field (editorLangId) to match the language ID in the when clause of the command fixed the issue.
https://code.visualstudio.com/api/references/when-clause-contexts#available-contexts
"menus": {
"editor/title": [
{
"when": "editorLangId == SynapseXml",
"command": "webview.show",
"group": "navigation"
}
]
}