I am creating some snippets to .tex files. However, I would like some of these snippets to appear only if my document is blank/empty.
It is possible to create a conditional to check it? It would be something like that:
"Example": {
"prefix": "ex",
"body": [
"Just one example"
],
"description": "Example",
"conditional": if-is-a-blank-file
}
Obviously, "conditional" is just a pretend. Thanks in advance.
Related
I currently have this in settings which does this trick when the comments are just text
{
"scope": "comment.block.cfml",
"settings": {
"foreground": "#f5cd76"
}
}
However if there are tags then the tags use their default color. I can see for a split second that the color of all the comment block is correct which tells me that something is overwrite it?
This is what it does
What i want it to do
You could install the CFML package for VSCode. (Assuming that's what you meant by Visual Code.) It identifies all the "parts" of statements and triggers what's needed, generally. Never had an issue. (Though I have had an issue with it using script comments (//) instead of the markup comments <!--- --->.
{
"scope": "comment",
"settings": {
"foreground": "#f5cd76"
}
}
this seemed to of worked
After searching high and low, I don't seem to able to find out how to customize the color of specific html tags in Visual Studio Code. Changing the color of them all is easy enough, with the following textmate scope:
entity.name.tag.html
That changes all tags. But what if you want to change just the color of the "Form" tag? i.e.<form></form>
So how do I make the "Form" tag distinct in color from the "Div" tags, for instance?
Inspecting the editor tokens/scope within VSC, I can see scopes such as:
meta.tag.structure.form.start.html
But that changes something else, not the Form tag itself.
Not sure why isn't working for you? This works for me:
"editor.tokenColorCustomizations": {
"textMateRules": [
{
"scope": "meta.tag.structure.form.start.html entity.name.tag, meta.tag.structure.form.end.html entity.name.tag",
"settings": {
"foreground": "#00ff00",
"fontStyle": "bold"
}
},
]
},
Note that I have to add entity.name.tag to each scope selector to get it to work. Demo:
Was there something else you were trying to accomplish?
Below I created a snippet that I was going to use in a styled component. The snippet responds to the listed prefix as expected as long as I do not use the snippet inside of a styled component. My question is if there is something that I need to include in the body of my snippet to be able to use the snippet regardless of if it is between template tags or not?
User Created Snippet:
{
"React Theme": {
"scope": "javascript,typescript,jsx",
"prefix": "theme",
"body": [
"${props => props.theme.${1:element}}",
],
"description": "React theme"
}
}
Short Clip of Behavior in editor
It may be because your scope language mode should be javascriptreact instead of jsx:
"scope": "javascript,typescript,javascriptreact",
Click on the file's language in the lower right corner and you will open a panel with all supported language modes with the proper spelling usage in parentheses - like Javascript React (javascriptreact) use that part in parentheses in settings or snippets that require a language mode.
Also put this into your settings:
"editor.quickSuggestions": {
"other": true,
"comments": false,
"strings": true // this is the important one for you!!
},
so snippets get triggered in a template string.
Try using a different prefix than theme, does that conflict with something in an extension?
Works fine for me:
I want to create a small VSCode plugin that has autocomplete function for the Bootstrap classes.
I would like this autocomplete to work only when the cursor is between double quotation marks.
Is it possible to restrict the display of the auto-complete list only for this range?
I tried something like this:
"BTN": {
"scope": "string.quoted.double.html",
"prefix": "work-btn",
"body": [
"test-class;",
],
"description": "BS4"
}
but not working
It isn't possible to use syntax scopes in a snippet, see the discussion at
https://github.com/microsoft/vscode/issues/71187
I was going to suggest upvoting that issue but it has been locked. The functionality seems like it would be useful for various reasons, but might be cpu-intensive.
I am creating my own Visual Studio Code theme, and I want the links / URLs to have their own independent color in HTML and CSS. From what I have read it seems that this was once accomplished with detected-link, but should now use linkForeground. I have tried both in the theme.json file I created, but neither seems to work. Does anyone know how to customize link / URL syntax highlighting color in Visual Studio Code .json file?
This is what I tried...
{
"name": "goto-definition-link",
"scope": "linkForeground",
"settings": {
"foreground": "#4B83CD"
}
},
Here is one of the discussions that I am referencing above.
https://github.com/Microsoft/vscode/issues/18378
There are two parts to this: using syntax colors to set the color of links in the grammar and using workbench colors to set the color of a clickable link when the user hovers over it.
To set the syntax colors of a link, you need to determine a unique scope for the links and write a TextMate colorization rule that uses this scope. For example, using the Developer: Inspect TM Scope command in VS Code, I can see the css url() links have a scope of variable.parameter.url.css, so my theme would be:
{
"type": "dark",
"tokenColors": [
{
"scope": [
"variable.parameter.url.css",
],
"settings": {
"foreground": "#f0f"
}
}
}
}
The second one is easier; just use the editorLink.activeForeground color theme setting:
{
"type": "dark",
"colors": {
"editorLink.activeForeground": "#ff0",
...
},
"tokenColors": [ ... ]
}
This changes the color of the link when you hover over it. It cannot be changed per language.