How can one hightlight a word after a specific token? - visual-studio-code

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

Related

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"
}
],
// ...

How do I define a custom snippet using VScode "Surround" extension

I'm using a VScode extension called "Surround"
In the docs for this extension it shows how to define a custom snippet. What I want is really simple. I would like to add the ability to surround selected text with tags, ie <> </> while placing the cursors in the middle where I define what type of tag that is (html, img, button, etc)
The docs show this example:
{
"surround.custom": {
// command name must be unique
"yourCommandName": {
// label must be unique
"label": "Your Snippet Label",
"description": "Your Snippet Description",
"snippet": "burrito { $TM_SELECTED_TEXT }$0", // <-- snippet goes here.
"languageIds": ["html", "javascript", "typescript", "markdown"]
},
// You can add more ...
}
}
I can almost parse it, except I don't know what the placeholders are representing. I assume { $TM_SELECTED_TEXT } is the text I've selected but what is the trailing $0 used for? Also, how can I place 2 cursors in between the opening and closing tags?
Thanks in advance.

How to color parameters in VScode in the declaration method and the body

I can not make see that the parameters of the methods are of a certain color in the body too.
Any help will be appreciated.
Try:
"editor.tokenColorCustomizations": {
"textMateRules": [
{
"scope": "variable.parameter.ts, variable.other.object.ts",
"settings": {
"foreground":"#f00"
}
}
]
}
If you examine your variables with the palette command Developer: Inspect TM Scopes you will see that both of your instances are variables but so are many other things. You can narrow down your scope with the two scopes I used above to achieve what you want.
This works fine in the function declaration:
Press ctrl+comma
from the top right menu, click on curly braces. (settings.json file)
Add the following settings:
"editor.tokenColorCustomizations": {
"textMateRules": [
{
"scope": "variable.parameter",
"settings": {
"fontStyle": "",
"foreground":"#413f39"
}
}
]
}
There are two conditions for successful coloring:
The language must support semantic parsing.
The current theme must contains
"semanticHighlighting": true

Vscode API - Custom View Container Not Showing

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"
}
]
}

How to prevent commands from being displayed if the extension is not active?

I am writing an extension and I'm providing a custom command, declare in the package.json as:
{
"contributes": {
"commands": [
{
"command": "myext.doSomething",
"title": "Do something"
}
]
}
}
I'm am then registering it in the extension, when it activates:
commands.registerCommand("myext.doSomething", () => console.log("hi"))
This works, but the Do Something command is present in the command palette even if the extension is not active.
This means that if the user selects the command when the extension is not active, an error along the lines of
command myext.doSomething not found
Is there a way to prevent custom commands to be displayed in the command palette unless the extension has been activated?
Instead of not showing your command when the extension is not active, you can just add it to the activationEvents like this in your package.json. In your case:
{
"activationEvents": [
"onCommand:myext.doSomething"
]
}
This will run the exported activate function of your extension before the command is invoked.
Also the when keyword could be an option for you. I answered a similar question on that topic here.
Edit:
You can control a command's visibility in the command pallette by additionally contributing a contextual menu (docs). Then you can for instance only display the command when the editor's file has a specific language id.
Example:
{
"menus": {
"commandPalette": [
{
"command": "myext.doSomething",
"when": "editorLangId==scala"
}
]
}
}