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
Related
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"
}
}
]
Hello I use latest Sublime Text 4 with Emmet and reactjs source with build in Syntax -> Javasript > JSX and it work.
I change default emmet setting "jsx_prefix": true, to false, and it work - now I can expand tags without <.
But i want change default expand Component/ -> <Component> to <Component />
I try change "markup_style": "html", to xhtml or xml but it not work.
And in emmet setting i can see this param, which maybe can solve my problem:
// See `GlobalConfig` interface for supported properties: https://github.com/emmetio/emmet/blob/master/src/config.ts
// Example:
// "config": {
// "markup": {
// "snippets": {
// "foo": "foo.bar>baz"
// },
// "options": {
// "output.selfClosingStyle": "xhtml"
// }
// }
// }
"config": {},
Because I don't know TS, I can't read source in GitHub to solve this, can anyone know how to use this config param not for one snippet as in example, but for JSX with "output.selfClosingStyle": "xhtml"?
I try write something like this(but not work):
"config": {
"markup": "jsx",
"options": {
"output.selfClosingStyle": "xhtml"
}
}
Help me to use JSX self closing tags with emmet in ST4 pls.
In Sublime Text, you can specify config either globally for syntax type (markup or stylesheet) or for specific syntax.
Syntaxes are listed in syntax_scopes option of Emmet config, which is a mapping of syntax name to Sublime Text internal scope (you can create your own syntaxes like this as well).
In your case, you should specify config for jsx syntax, like this:
{
"config": {
"jsx": {
"options": {
"output.selfClosingStyle": "xhtml"
}
}
}
}
I have fresh install of VScode editor (v.1.14.2). Doesn't have any installed extensions. I have problem with javaScript highlighting in very simple file.
The same code in Sublime Text 3:
Default VScode theme (Dark+), doesn't have this bug, and all function names and methods have the same colors. But many another themes (monokai and Abyss for example) have this bug/feature.
I want to have for function names and methods the same color (line 10, 11, 13, 16). Ideally, all lines like in ST3 - blue (line 13 - green). But, it's ok if it would be a green.
I read scope naming link, try to compare different themes. Install all monokai-based themes, but all of theme, has this bug. I tried to create new one, but I didn't do what I need.
So, does it possible to fix this?
You can use vscode command Developer: Inspect TM Scopes for scope inspection. This color changes because vscode thinks click(), addEventListener()... is special DOM-related properties and should be highlighted.
Workaround would be modifying monokai-color-theme.json in
Microsoft VS Code\resources\app\extensions\theme-monokai\themes.
In this array "tokenColors": [] add:
{
"name": "DOM & invocation color fix",
"scope": "meta.function-call.js entity.name.function, meta.function-call.js support.function.dom.js",
"settings": {
"foreground": "#66D9EF"
}
}
This will make function calls & DOM-methods sublime-like.
P.S. If theme updates it will most likely overwrite this file.
Edit:
From some version it is possible to modify theme from settings.json Ctrl+,
"editor.tokenColorCustomizations": {
"textMateRules": [
{
"scope": ["meta.function-call.js entity.name.function",
"meta.function-call.js support.function.dom.js"],
"settings": {
"foreground": "#66D9EF"
}
}
]
}
Your function should not have an end-line ";" added. Your variable test however should have one, this is simple syntax error and doesn't always get caught. This post is years late but it came up in search and the above suggestion is too much work.
I really need to have a period in either a parameter or a route but lite-server seems to object to this.
I have found several places referencing the issue and saying that it can be fixed with a rewrite rule but there are no complete examples that I can see that work.
For instance this answer: "dot" in query string parameter - AngularJS
The path that can have a dot in it is /report;url=example.com.
Based on above answer I editted bs-config.json to this:
{
"server": {
"baseDir": "src",
"routes": {
"/node_modules": "node_modules"
},
"rewrites": [
{
"from": "/^\/report/",
"to": "index.html"
}
]
}
}
I also tried putting rewrites a level higher but neither had any effect on anything.
If I use navigate('report/', { url: 'value.with.dot' }) then I can use a period in the route or param and it works fine but I can't access it directly by typing in the url to browser.
I find lots of mentions on the internet about this being due to lite-server config but no straight forward example of what exactly to add to the lite-server config to fix it.
I am using Angular2.4 but i think this is problem specific to lite-server.
So essentially I need a rewrite rule to re-write the request to index.html but the way i have entered it has not worked.
Maybe just shield the dot, like this "example\.com"?
You should encapsulate inside a quotes
navigate('report/', { url: "'value.with.dot'" ))
I am writing javascript and am currently doing simple exercises/programs. At times, I wish to run my file for testing purposes. I am aware I could create an HTML file and do this within the console. In Sublime, there exists a way to "build" the current file and immediately see the results (say, whatever is sent to console.log).
With VS Code, it seems that for every file I want to "build"/debug in this manner, I must manually change the launch.json file to reflect the name of the current program.
I have been researching a way around this, and I learned that there are variables like ${file} , but when I use that in the launch.json "program" attribute, for example:
"program": "${workspaceRoot}/${file}"
with or without the workspaceRoot part, I get the following error:
Attribute "program" does not exist" (file name here).
Am I missing a simple way to accomplish this, or must I keep editing launch.json every time I want to run the file?
Thanks in advance!
Change to:
"program": "${file}"
For reference this is the full launch.json
{
"launch": {
"version": "0.2.0",
"configurations": [
{
"name": "Node.js - Debug Current File",
"type": "node",
"request": "launch",
"program": "${file}"
}
]
}
}
There are many different ways you may need to access a file that are provided by Predefined variables:
Supposing that you have the following requirements:
A file located at /home/your-username/your-project/folder/file.ext opened in your editor;
The directory /home/your-username/your-project opened as your root workspace.
So you will have the following values for each variable:
${userHome} - /home/your-username
${workspaceFolder} - /home/your-username/your-project
${workspaceFolderBasename} - your-project
${file} - /home/your-username/your-project/folder/file.ext
${fileWorkspaceFolder} - /home/your-username/your-project
${relativeFile} - folder/file.ext
${relativeFileDirname} - folder
${fileBasename} - file.ext
${fileBasenameNoExtension} - file
${fileDirname} - /home/your-username/your-project/folder
${fileExtname} - .ext
${lineNumber} - line number of the cursor
${selectedText} - text selected in your code editor
${execPath} - location of Code.exe
${pathSeparator} - / on macOS or linux, \ on Windows
For a single file, you can skip the launch.json file entirely. Just click the green arrow in the debugger panel and choose Node as your environment.
From here.