I'm struggling to get snippets work in vscode with a Quarto file. I have followed all the steps and I am confused about this.
I've created the snippet in a quarto.json file. My snippet looks like this:
{
"Create NOTES section and place cursor inside": {
"prefix": "nn",
"body": [
"<!-- BEGIN NOTES -->\n\n$1\n\n<!-- END NOTES -->"
],
"description": "Create Notes section and place cursor inside"
}
}
I've checked that the autosuggest options are enabled. My settings.json file has the following:
"[quarto]": {
"editor.quickSuggestions": {
"other": true,
"comments": true,
"strings": true
}
}
However, in the Quarto file, no suggestions appear when I press nn.
NB the extension of the Quarto file is .qmd not .Quarto, but vscode recognises the file as a quarto file as (i) this appears in the footer of the .qmd window, and (ii) a quarto.json file automatically appears when I configure user snippets.
Okay. There are separate settings for Quarto (see below). If you go into settings, and search for Quarto it then shows you Quarto snippet settings. The Quarto help pages not describe this, and it might be useful to add this.
Related
I have gotten user snippets in VSCode to work for C and C++, but for some reason VSCode is not providing snippet suggestions for .md and .tex files.
Here is a minimal example of tex.json (that doesn't work):
{
"dummy": {
"prefix": "dummy",
"body": [
"some random text for demonstration"
],
"description": "A dummy snippet"
}
}
VSCode provides suggestions in .md and .tex files, just not user snippets. How do I fix this issue or employ some other way to use user snippets for Markdown and Latex?
Update: Snippets are now working in .md files, thanks to the comment by #Mark. I need to type the prefix and press Ctrl + Space. This solution does not, however, work for Latex.
For markdown files try this language-specific setting in your settings.json file:
"[markdown]": {
"editor.quickSuggestions": {
"other": true,
"comments": true,
"strings": true
}
}
and you shouldn't need to trigger the snippet suggestion with Ctrl+Space anymore.
[For latex files I don't need that setting - if snippets aren't working in your latex files try the same setting but with latex.]
Sometimes "Ctrl+ Space" is a shortcut for switching input methods on Windows, please turn it off, it works for me
I work with big flat database files which I like to inspect at line/column.
I have a tool which generates a log with hundreds of lines like:
code --goto path/to/my/file:line:column
Visiting one such a spot works ok if I throw one such a line into the command line window and click it from there, but not from the editor (at least I have not found the way)
I would like to be able to have this log file open in the VSCode editor and hover/click in every line which would take me to the spot I want to visit in the big db file. Is this possible at all?
Should I convert my log file to some script format which supports the hover and click functionality?
Is there otherwise any extension available which can do the trick here?
Thanks a lot.
Miguel
Edit
Using HTML Related Links v0.9.0
I guess we're almost there but it's still not working for me.
The concrete scenario I have is: I have a file
d:\Users\Abc.def\Git\lingware-data\test\spx\spm\spm_cfg3\spm_cfg3_tst_row_valid_lng_abbr.dbr
containing several lines of the type
code --goto d:\Users\Abc.def\Git\lingware-data\dct\spx\dct.u08:176:36
(probably code is not needed, I tried with and without it)
In my settings.json file:
"files.associations": { ".u08": "csv (pipe)", ".dbr": "html" },
"editor.largeFileOptimizations": false,
"html-related-links.include": {
"html": [
{ "find": "--goto ([a-z:]+[^:]+):(\\d+):(\\d+)",
"filePath": "$1",
"lineNr": "$2",
"charPos": "$3"
}
]
}
if I use "plaintext" as languageId I don't get the HTML related links section displayed in the Explorer area, so I am using "html" - I have updated to v0.9.0 of the extension, and what I continue seeing in the explorer view is:
"d:\Users\Abc.def\Git\lingware-data\dct\spx\dct.u08 d:\Users\Abc.def\Git\lingware-data\test\spx\spm\spm_cfg3\d:\Users\Abc.def\Git\lingware-data\dct\spx\dct.u08"
If I click on it nothing happens I hope this is more or less clear.
What am I doing wrong?
*** edit ***
Installed v0.9.1. Enabled Developer console to debug click behavior on a row. What get now is:
[Extension Host] Clicked on: d:\Users\Miguel.Duran\Git\lingware-data\dct\spx\dct.u08
console.ts:137 [Extension Host] goto: 175:28
You can use the extension HTML Related Links v0.9.0 (it not only applies to HTML)
Define this in settings.json
"html-related-links.include": {
"plaintext": [
{ "find": "--goto ([^:]+):(\\d+):(\\d+)",
"filePath": "$1",
"isAbsolutePath": true,
"lineNr": "$2",
"charPos": "$3"
}
]
},
"html-related-links.removePathFromLabel": true
After loading the log file you can lock the Explorer View HTML RELATED LINKS to this file. Use lock button in top right of the view. Now only changes to this log file will update the view.
In an absolute path the label will contain the path and the view adds the directory path at the end. You can remove the path from the label with the setting html-related-links.removePathFromLabel
Click on a row in the view and that file will be opened to the given line:char position.
If on Windows the path is absolute you have to specify the drive first because it contains a :
"find": "--goto ([a-z]:[^:]+):(\\d+):(\\d+)"
Edit
There was a small typo in the regular expression string (need escaping the escape char).
Add possibility for absolute paths.
I would like to be able to have this log file open in the VSCode editor and hover/click in every line which would take me to the spot I want to visit in the big db file.
Is this possible at all?
If you visualize your file in a VSCode terminal, VSCode 1.70 (July 2022) will offer a way.
See issue 140780 ("Jump to line+column in terminal links (format <path> l:c)"), PR 153957 ("Detect terminal links with space, then line:col") and PR 155904 ("Ensure folders with spaces don't impact link line/col")
To test, you can open a terminal and run echo ./myFile.txt 10:5 (replacing the filename with one that exists).
When you click to open the file, it should open to line 10, column 5.
This is available today (July 2022) in Code insiders.
I'm using the Abyss theme which I like, but certain colors are too dark. I have customized some token colors using (for instance):
"editor.tokenColorCustomizations": {
"[Abyss]": {
"keywords": "#7ea4df",
but I can't figure out how to change the color of HTML tags in the editor. Can anyone help?
The accepted answer is good, but thought I'd add this as it obviates the need to edit the theme JSON itself. I edited my settings as follows:
"editor.tokenColorCustomizations": {
"[Abyss]": {
"keywords": "#7ea4df",
"types": "#1fa8d8",
"comments": "#727272",
"strings": "#29a792",
"textMateRules": [
{
"scope": "entity.name.tag",
"settings": {
"foreground": "#7ea4df"
}
}
]
}
},
You can go into the theme's .json file and modify it to suit your needs, as mentioned in this post. Mine was located in C:\Program Files\Microsoft VS Code\resources\app\extensions\theme-abyss\themes
EDIT: As pointed out in the comments by #www-0av-Com, the path to the file is now C:\Users\<username>\AppData\Local\Programs\Microsoft VS Code\resources\app\extensions\theme-abyss\themes, where <username> is your Windows user.
You can use Ctrl + Shift + P to open the Command Palette and then open up the Developer: Inspect Editor Tokens and Scopes to look at the TextMate scope of the element you're interested in modifying. In the case of the HTML tag in the abyss theme it's entity.name.tag. You can see what the Scope Inspector looks like in the second image below.
Then go into the abyss-color-theme.json file and search for that string and modify the color of the tags as you see fit. I changed mine to an ugly orange color as below:
I know it's might be too late, but for anyone who doesn't want to make this manually, there is the Rainbow Tags extension.
I'm using it for a couple of weeks and it's very satisfying.
For mac users, you can follow the below steps
Open finder
Press cmd+shift+h to open users folder
Go to users/your user name
Press cmd+shift+. To open hidden files
Go to .vscode/extensions/sdras.night-owl /themes/Night owl-color-theme.json(In my case its night owl theme.)
Drag and Open the file in vscode
Open the html file you want to customise
Select the div element and press cmd+shift+p
Select developer: inspector editor token and scopes
Select the textmatescope eg: entity.name.tag.js
Now open settings.json file in vscode
Add below code
"editor.tokenColorCustomizations": {
"[Night Owl (No Italics)]": {
"textMateRules": [
{
"scope": "entity.name.tag.js",
"settings": {
"foreground": "#7fdbca"
}
},
{
"scope": "entity.other.attribute-name",
"settings": {
"foreground": "#82AAFF",
"fontStyle": "bold"
}
}
]
}
}
change the foreground to whatever you want to use.
and your done.
How can I create custom emmet snippet with the highest possible priority to display in vscode?
When I updated html.json to add my own snippet for comment (with autor), I still see default emmet "c" snippet as first in list:
"Comment": {
"prefix": "c",
"body":[
"<!-- atiris: $1 -->$2"
],
"description": "Insert comment into html code"
}
That means I always have to choose the second option first.
Is there any property / settings to prioritize my own snippets?
You can use BetterSnippets vscode extension. It provides way more customization then builtin snippets. For your case you can use smth like this:
"betterSnippets.customSnippets": [
{
"name": "c",
"body": "<!-- atiris: $1 -->$2",
"when": {
"languages": [
"html"
],
},
"sortText": "!1"
},
]
SortText property is what you're looking for. I use !1 to make snippets order more customizable e.g. if I would assing sortText: "!2" to other snippet it will appear under the snippet with !1
You are editing the intellisense snippets with the above code rather than the Emmet snippets.
Regarding your question, the following link may help you prioritize which snippets are shown first: https://github.com/Microsoft/vscode/issues/32346
Regarding adding snippets to Emmet, the following should help:
In the settings.json file you can add the line
"emmet.extensionsPath": "/Users/username/Documents/code snippets"
(changing the path to a folder of your choosing)
Then add in that folder a file named snippets.json
You can use the format outlined in the link below to add snippets.
https://code.visualstudio.com/docs/editor/emmet
According to the official document, https://code.visualstudio.com/docs/languages/markdown
Snippets for Markdown
There are several built-in Markdown snippets included in VS Code -
press Ctrl+Space (Trigger Suggest) and you get a context specific list
of suggestions.
Does there any way, trigger snippet automatically when I type word, because it's troublesome, press Ctrl+Space
Try setting:
"[markdown]": {
"editor.quickSuggestions": {
"other": true,
"comments": false,
"strings": true
},
},
This enables IntelliSense automatically when you start typing. By default, this will show snippets and word based suggestions (suggestions based on words in the current document). To disable word based suggestions, set:
"[markdown]": {
"editor.quickSuggestions": true,
"editor.wordBasedSuggestions": false
}
You can also set:
"editor.snippetSuggestions": "top"
If you always want snippets to show before word base suggestions
There is an inconsistency in VS Code and it is a known issue. Markdown snippets do not get auto-completion. Probably it will be fixed in next release.
Yes this is an inconsistency. Full extensions get auto (7x24) completion by default (e.g. latex, cake), some built-in extensions like Markdown do not.
https://github.com/Microsoft/vscode/issues/1617#issuecomment-166999086