How do I insert a snippet into a VSCode file? - visual-studio-code

I've used snippets before but it's been a very long time, so I don't remember how to insert them.
I already edited my settings according to Tab autocomplete in Visual Studio Code doesn't work, but it's still not working.
"editor.tabCompletion": "on"
"emmet.triggerExpansionOnTab": true
When I type the name of the snippet (e.g., html-boilerplate) in a file, no autocomplete suggestions come up. Then, if I tab, it just creates the name of the snippet as a tag (i.e., <html-boilerplate></html-boilerplate>).
If I open the command pallet (ctrl+p) and type "insert," the name of the snippet comes up, but clicking on it just opens the snippet file itself.
I also tried ctrl+shift+p, typing >insert, and then selecting "Insert Snippet," but then it just says no snippets are available (neither the defaults nor the ones I've created). Source: https://adamtheautomator.com/vs-code-snippets/
Your time and assistance are greatly appreciated!

Related

How to remove warning text beside my code in Flutter's Visual Studio Code

I am a new Flutter learner, and this is kinda annoy me, I think the "Problems" tab under is fully understand, I don't want to see warning next to my code. Is there a way I can disable or hide it? Thank you.
Hey, In visual studio code you can do minute changes.
Step1:
Press ctrl+shift+p , a command pallet will open
Step2:
Type settings.json and click on Open Settings (JSON)
a file will open
step3:
Add this lines in that
"editor.codeActionsOnSave": {
"source.fixAll": true
}
**After this whenever you save, const will be added automatically.
Note: Sometimes you might get error because after saving some widgets are prefixed with const but, sometimes when your values in widget get dynamic, there will be a error, so be careful.
disable this line or add source.fixAll to config.json
Perhaps you are using some vscode plugin like https://marketplace.visualstudio.com/items?itemName=usernamehw.errorlens to show code diagnostics.
Though that feature seems very useful to me incase you find that annoying you may disable it by going through your list of extensions.

why there is no selection when I click F5 to run program in vscode

In the begin, for example, I'd like to run program by click F5, and there is a selection box on the top of vscode. However, maybe I click some errorly, it debug directly, and no selection here, and the terminal shows (base) in the front of result, why and how to correct to original setting?
One way to reset VS settings as follows:
Note: Please use save as to backup settings.json in case you have something that you may need to restore later.
DO NOT DELETE ANYTHING FROM YOUR "defaultSettings.json"
These instructions are only for clearing out everything except {
} within your user settings.json:
The easiest way to reset VS Code
back to the default settings is to clear your user settings.json file
contents in the Settings editor. Delete everything between the two
curly braces, save the file, and VS Code will go back to using the
default values.How can I reset my user settings?
If following above does not resolve your issue, please consider adding a screenshot of the issue along with your posted question and/or add default settings.json, so it can be compared with a working default settings.json file for your assistance.

Finding the theme element name in Visual Studio Code to change its color

I'm modifying a Visual Studio Code theme to my liking. However, I have problems in finding the correct element name from https://code.visualstudio.com/api/references/theme-color.
Is there an extension or other way to get the specific element to modify the color? Something like "Select the element in the page to inspect it (Ctrl+Shift+C)" in Google Chrome developer console?
To be more specific, I'm trying to find the element name for this purple line to change it to a bit less aggressive color:
Any help in finding the element name in general or in finding the name of that element?
I found the solution myself with this answer: https://stackoverflow.com/a/47970668/9810067
You can open a Chrome-like developer console (It's actually identical to Chrome) by typing "Developer: Toggle Developer Tools" into the command palette (Ctrl+Shift+P).
However, this didn't quite help me. While I was able to get the element class with "Select an element in the page to inspect it" (Ctrl+Shift+C)", I didn't manage to get the name that I could put into settings.json.
What did the trick for me was typing "Developer: Generate Color Theme From Current Settings" into the command palette. From there I managed to find "editorGroup.border", which was just the element of which I wanted to change the color.
Then I just opened my VSCode settings.json (determine settings scope with the help of this) and added there:
{
...
"workbench.colorCustomizations": {
...
"editorGroup.border": "#9fb3c0ad",
...
}
...
}
and there you have it.

How do I select all text in vistual studio code?

In visual studio code (1.29.1) ctrl+a doesn't do anything for me. I checked keyboard shortcuts and it's mapped to a few select all actions (editor.action.selectAll, etc.) but when I'm in a file and press it nothing happens. How do I select all text in the current file in visual studio code?
Thanks for the comments, it make me realize it must be an environmental issue. Turns out if you have any mapping starting with a key combination that will lock that mapping to the key combo and you can't use it for anything else.
To make save all ctrl+shift+s I had to re-map save as and I mapped it to ctrl+a+s, so everytime I hit ctrl+a it just waiting for second key. In the status bar at the bottom of my editor it said something like "Ctrl+a detected, waiting for second keystroke", which means Ctrl+a won't work on its own. I re-mapped Save As to some unused key combo and it fixed select all.
This question was luckily answered on another thread
I'll post the OG answer here, nonetheless.
Most new comers to VS-Code could resolve this issue with the 2nd method provided by the OG answer:
Goto File > Preferences > Keyboard Shortcuts
in the search bar type this Select All
There's should a couple of results, you'll obviously want the "Select All" result
right click on his line and click on Change When Expression
a textbox would be highlight for you to fill in text. type editorFocus
press enter and done!
The OG answer provides image if you need to confirm that you're doing it right.
side-note: This issue bugged for more than 3 years and is the main reason my I used VS-Community over VS-Code.
So it's nice to finally be able to work normally in this very robust customizable IDE text-editor.

Visual Studio Code auto indent in JSX

Let's say I have this code in .jsx file:
Now if I type, for example, BrowserRouter and hit Tab I got this state which is still ok:
But now when I hit Enter, I have this state:
How do I make it work like in .html files that pressing Enter adds two new lines and makes auto indentation? Like that:
I have VS Code v1.20.1 and my preferences which could be related to this issue are as follows:
"emmet.triggerExpansionOnTab": true,
"emmet.includeLanguages": {
"javascript": "javascriptreact"
}
I've searched through Github issues of VS Code and seems like it was fixed about half a year ago and should work now, but for some reason it's not. Also I've run VS Code with --disable-extensions flag for this so it's not an extension problem.
I've also found that it seems not to work for top-level tag only. For anything inside it the indentation works like in .html files. Strange.
Thank you.