I am trying to make another user snippet in VSCode to automate the document.querySelector but whenever I try to it gives me a weird error shown below. I have another snippet that works just fine but that was shown to me by an online class I am taking. I don't have any experience with json so I may just be getting the syntax wrong but it is the exact same as my previous snippet.
VSCode screenshot
In case that link doesn't work I'll include the code written below. The error I am getting is on the very first curly brace and it says "end of file expected .json"
All help is appreciated :)
{ // start of file and json object
// other snippets here
"query selector": {
"scope": "javascript",
"prefix": "dq",
"body": ["document.querySelector('$0')"],
"description": "Select element from document"
},
// other snippets here
} // end of json object
Your json file is incorrect.
You should place the object starting with the key “query selector” inside the json object above.
Add a comma after the curly brace in line 14 and add your snippet in there. Remove your outer curly braces from lines 17 and 24.
Json files are only one single object.
So your snippets file would look something like this:
{
"Print to console": {
"prefix": "log",
"body": [
"console.log('$1');",
"$2"
],
"description": "Log output to console"
},
"query selector": {
"scope": "javascript",
"prefix": "dq",
"body": [
"document.querySelector('$0')"
],
"description": "Select element from document"
}
}
By the way, I don't think you need the "scope" key.
Use a square bracket to start a json file, and end with a square bracket [ ].
[
{
"query selector": {
"scope": "javascript",
"prefix": "dq",
"body":
["document.querySelector('$0')"],
"description": "Select element from document"
}
}
]
Related
am trying to learn typescript and looking for some help with setting up debugger support in VS code. Here is my sample TS app which is a standalone app just prints "Hello World" text in console on data entered in console. How do i provide console input after the application is launched? I place a break point in console.log at line 6, the execution stops there when launched. But I want to enter runtime console input and inspect the console.log at line 4.
Index.ts:
class Startup {
public static main(): number {
process.stdin.on("data",(buffer) => {
console.log("Hello World);
});
console.log("Test breakpoint");
return 0;
}
}
Startup.main();
Launch.json
{
"version": "0.2.0",
"configurations": [
{
"type": "node",
"request": "launch",
"name": "Launch Program",
"skipFiles": [
"<node_internals>/**"
],
"preLaunchTask": "tsc: build - src/tsconfig.json",
"program": "${workspaceFolder}/src/index.ts",
"outFiles": ["${workspaceFolder}/dist/**/*.js"]
}
]
}
The vscode's Debug Console doesn't support input, so you need a different terminal that does, the integrated one would do just fine. In order to move debug execution from the Debug Console to Terminal just add a setting to your launch.json:
{
...
"console": "integratedTerminal"
...
}
and run debugger again. This way you'll be able to input to command line prompts.
I have searched in VS code for a quick fix all solution and can't find anything on the docs or plugins. Does this feature simply not exist or is there a keybinding I'm missing out on? (currently using typescript support)
Edit:
just clarifying use case:
quick fix all like fix all whitespace / "" instead of '' and no semicolon warnings.
thanks.
Using tslint plugin:
In keybindings.json
{
"key": "",
"command": "editor.action.codeAction",
"args": {
"kind": "source.fixAll.tslint",
"apply": "first"
}
},
I have a some snippet:
"JSON stringify": {
"prefix": "jst",
"body": [
"<pre>{JSON.stringify($1, null, 2)}</pre>"
]
},
and it works inside js scope, but when I'm trying to do same trick inside jsx render - it dont want to be working.
How to tell my VSCode, that I want to do same things inside jsx?
Maybe adding "scope" to your snippet:
"scope": "javascript,typescript,javascriptreact",
javascriptreact ---> jsx files
It should be like this...
"JSON stringify": {
"scope": "javascript,typescript,javascriptreact",
"prefix": "jst",
"body": [
"<pre>{JSON.stringify($1, null, 2)}</pre>"
]
},
Putting that snippet into your global snippets file should work.
Gear Icon/User Snippets/ myGlobalSnippets.code-snippets
It looks like inside jsx, the type of proposed snippets is not "javascript" but "jsx":
When you go to File / Preferences / User snippets you can look for the jsx format (file name jsx.json)
If you put your snippet in that file, it should be available inside your jsx
I had to put "scope": "javascript,jsx,jsx-attr". Perhaps there's a neater way but that did it for me.
In vscode Press the gear button then choose User Snippets then type javascriptreact if you are using "javascript" or typescriptreact for"typescript" then past the snippet code that you want :D
This question is particularly pointed at other C# devs coming over to TypeScript in VS Code.
I fell in love with the code completion in VS C#. To illustrate, say I'm trying to write:
console.log('hello')
Using C#, I would have:
type "con"
a list of suggestions would appear, probably starting with "console"
since that's highlighted and it's what I want, hitting "." will write out "sole." so now I have: console.
type "l", "log" is the first suggestion
type "(", now I have: console.log('')
cursor is now in the ''
type "hello"
Currently with my VS Code setup, the same thing can be achieved in JS/TS hitting tab each time I want to accept a suggestion. But just hitting the next punctuation to proceed was really nice and, if you forgive me for caring about it, "fun." I miss it. And there's no technical limitation of the languages that I know of that would prohibit this behavior.
Anyone know if there's any extension or setting available to enable this? Or else, where else this conversation may be occurring ?
One can implement this oneself using the macros extension. To do this:
Install the macros extension
Create a macro calling the acceptSelectedSuggestion action, then type .. Here's what my Settings.json looked like:
{
"editor.wordWrap": "on",
"window.zoomLevel": 0,
"git.enableSmartCommit": true,
"macros": {
"accept.": [
"acceptSelectedSuggestion",
{"command": "type", "args": {"text": "."}}
],
"accept(": [
"acceptSelectedSuggestion",
{"command": "type", "args": {"text": "("}}
],
"accept=": [
"acceptSelectedSuggestion",
{"command": "type", "args": {"text": "="}}
]
}
}
Added each of these macros to a key binding in keybindings.json. My additional keybindings looked like:
{
"key": ".",
"command": "macros.accept.",
"when": "editorTextFocus && suggestWidgetVisible"
},
{
"key": "shift+9",
"command": "macros.accept(",
"when": "editorTextFocus && suggestWidgetVisible"
},
{
"key": "=",
"command": "macros.accept=",
"when": "editorTextFocus && suggestWidgetVisible"
}
This enables the classic VS C# completion behavior for these 3 specific follow-on keys. Any others I will think of can be added as I remember them.
I don't think you can add the . at the end of console, but you can do everything else:
Go to File >> Preferences >> Keyboard Shortcuts.
On the right side of the screen, a file called keybindings.json will come up. Between the two brackets, insert this:
{ "key": ".", "command": "acceptSelectedSuggestion",
"when": "editorTextFocus && suggestWidgetVisible" },
That should add the support for all languages.
The JS source maps for Kendo UI that I am using are failing to map properly in Chrome because of the question mark entry in the sources property. Chrome tries to load js/src/js/? which just returns the directory listing. After that the debugger points to (index):9 for references to all minified scripts.
{
"version": 3,
"file": "kendo.core.min.js",
"sources": [
"?",
"kendo.core.js"
],
"names": [
"f",
"define",
"$",
"undefined",
"..."
],
"mappings": "CAAA,SAAUA,EAAGC,QACTA,...",
"sourceRoot": "../../src/js/"
}
What does the question mark mean? And is it necessary or should I remove it to make the source maps function properly?