Correctly escaping in snippet? - visual-studio-code

I'm currently facing an issue where my snippet is not correctly rendered when used.
Snippet
"Import": {
"prefix": "import",
"body": ["import ${1: { ${2:module} } } from \"${0:library}\";"],
"description": "Import module (es6)"
},
The problem
This is the first tab, as you can see it does not select the } for some reason. The other tabs are working fine. I've tried a couple of possibilities but they are not resolving the issue.

You need to escape the second '}' with '\'. The following works.
"body": ["import ${1:{ ${2:module} \\}} from \"${0:library}\";"],

Related

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?

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

Can't get suggestions in snippets

I have customized one snippet:
"Import for eslint": {
"prefix": "import",
"body": [
"import { $2 } from '$1'",
],
"description": "import (eslint)"
}
Though it works well, but I can't get suggestions when you code the file path($1), Like this:
the image No Suggestions
the code has highlight background, and don't have suggestions, How should I do some work to implement the feature like this:
only has cursor
Try changing to
"editor.suggest.snippetsPreventQuickSuggestions": false,
true is the default which may be preventing you from seeing suggestions inside your snippet. You want false.

Visual Studio Code snippet invalid control character

I have the following user snippet:
{
/*
// Place your snippets for JavaScript React here. Each snippet is defined under a snippet name and has a prefix, body and
// description. The prefix is what is used to trigger the snippet and the body will be expanded and inserted. Possible variables are:
// $1, $2 for tab stops, $0 for the final cursor position, and ${1:label}, ${2:another} for placeholders. Placeholders with the
// same ids are connected.
// Example:
"Print to console": {
"prefix": "log",
"body": [
"console.log('$1');",
"$2"
],
"description": "Log output to console"
}
*/
"Small comment": {
"prefix": "//=",
"body": [
"// ===================================",
"// ${1:COMMENT}",
"// ==================================="
],
"description": "Small comment"
}
}
I get the following error on the second body line:
Invalid characters in string. Control characters must be escaped.
I thought that ${1:somestring} was a valid placeholder. What am I doing wrong in constructing this snippet?
I just found this question when looking for an answer, I used snippet generator so assumed the format for each would be the same but without thinking I pasted in code that had tabs in it.
Removing the tabs and used spaces instead for the formatting fixed it for me.
Hope this helps. :)

Wrap Selection Snippet on Visual Studio Code (vscode)

I want to create an snippet when triggered it will surround the given text. Currently my snippet is:
{
"Function Creator Helper": {
"prefix": "_w",
"body": [
"public function $TM_SELECTED_TEXT () {",
" $1",
"}",
],
"description": "Creates a function given the text selection"
}
}
This results on:
What I do is:
Select the text.
Write the prefix (_w)
Press Tab
This results on:
public function () {
}
But I was expecting
public function person () {
}
Any ideas on how can I make this snippet or how can I triggered it correctly?
See https://stackoverflow.com/a/48676522/836330 Your example will work, as of vscode v1.49, as you have it. Vscode snippets have been updated to "remember" your selected text even though you seemingly overwrite it with your snippet prefix.
Older answer:
You can use $TM_SELECTED_TEXT if you trigger it with a hotkey:
{
"key": "cmd+k 1",
"command": "editor.action.insertSnippet",
"when": "editorTextFocus",
"args": {
// "langId": "csharp",
"name": "Function Creator Helper"
}
}
The currently selected text is exposed as ${TM_SELECTED_TEXT}, not $TM_SELECTED_TEXT.
edit: As commented below, this is not the case for this particular use-case
I was just struggling with this myself. In order to get this to work, the only thing you have to do is press F1, run the Insert Snippet command and then select your snippet from the list.
${TM_SELECTED_TEXT} does not work for me either.
${selectedText} has been added as a Snippet Editor Variable:
https://github.com/Microsoft/vscode/pull/39483#issuecomment-383552677
Example:
"JS Block Quote": {
"prefix": "c2",
"body": [
"/* ${selectedText} */",
],
"description": "JS Block Quote"
}
At this time it is not correctly documented:
https://code.visualstudio.com/docs/editor/userdefinedsnippets#_variables
NOTE: In a multi-line selection, ${selectedText} is truncated to the first line. An alternative is to use the the clipboard and the ${CLIPBOARD} variable.
An extra step :(
from Mitches example:
"JS Block Quote": {
"prefix": "c2",
"body": [
"/* $TM_SELECTED_TEXT */",
],
"description": "JS Block Quote" }
from the article: https://code.visualstudio.com/docs/editor/userdefinedsnippets#_variables
the docs must have been ahead of the release.
This works fine in vscode v1.30.2
If somebody wants to know, it works like that for me :
I created two same snippet which only matches when I'm in html or php file (just create two snippets files in your snippets folder "php.json" and "html.json" it works for any languages) and added this code inside :
"unicommentary": {
"prefix": "unicommentary",
"body": "<?php /* ${TM_SELECTED_TEXT} */ ?> ${0}",
"description": "Creates a universal comment to disable both html and php."
}
The ${TM_SELECTED_TEXT} tag works when you select some text and trigger your snippet by the Insert Snippet command, you can't just write on selected text.
When you want to use this, select the text you want in your snippet, press Ctrl + Shift + P and select Insert snippet then, type the name of your snippet, press enter and there you go !