I'm having an issue with VSCode formatting on Save.
While some of the settings work as expected I can't figure out why quotes don't work.
(I guess it could be a limitation)
I have this settings
"javascript.format.semicolons": "insert",
"javascript.preferences.quoteStyle": "double",
Semicolons work as expected, but not the quotes. I notice this is a "preferences" so I'm guessing it's not applied when formatting.
Can I get formatting without an extension like Prettier? And what is the "preference" used for if not formatting in this case?
Anyone else come across Prettier formatting code with Double quotes instead of Single even though you
explicitly set it to replace with single in the preferences?
Here is a pic:
After a recent update to VSCode I started getting this issue and it is driving me crazy.
Any ideas as to how to fix this. Am I wrong that the Prettier: Single Quote in fact does not format with single quotes instead of double?
Thanks.
Try to create file .prettierrc at package.json level with property singleQuote set to true as below:
{
"singleQuote": true
}
When I want to change from double quotes to single quotes, I'm used to selecting the double quote, and then type a single quote. I'm intending to use the overwrite feature, but instead, I'm getting the 'wrap with quote' feature.
For example:
"id"
Would result in:
'"'id"
I always turn this auto surround with wrapping off, but I was unable to find a setting for this in the settings file...
Is there a way to turn this off?
It is possible!
In settings.json which you can open via File>Preferences>UserSettings
UPDATE 2023
There are two settings
"editor.autoSurround": "never",
Possible values:
"never"
"languageDefined" - This is vsCode's default
"brackets" - meaning it automatically adds brackets, but not quotes
"quotes" - meaning it automatically adds quotes but not brackets
"editor.autoClosingQuotes": "never",
Possible values:
"never"
"languageDefined" - This is vsCode's default
"beforeWhitespace"
"always"
PS: In old ancient versions of vsCode, there was less granularity and a single setting would control quotes, braces and brackets. "editor.autoClosingBrackets" : "never"
I found this question via Google and the selected answer didn't work for me. I'm using VSCode version 1.27.2, and for me the I had to disable the Auto Surround option.
"editor.autoSurround": "never"
Using VSCode version: 1.36.0
You can use: "editor.autoClosingQuotes": "never"
or
Is there a way to turn off automatically adding a closing curly brace in VS Code? I've gone through the editor settings one by one and turned off everything that was related to formatting, but there was nothing I saw specifically for this.
For example, when I type something like
function()
{
VS Code immediately adds } so that I end up with
function()
{}
Then, I press enter, and it has automatically indented the cursor. I don't want it to do any of that. I don't want it to auto insert any closing character or any indentations. I basically just want it to stop helping me and let me type the way I want to type. But I cannot figure out if there is any setting for this?
For new versions of vscode:
"editor.autoClosingBrackets": "never"
You can also do this in a language-specific way by
"[javascript]": {
"editor.autoClosingBrackets": "never"
}
"always", "languageDefined", and "beforeWhitespace" are the new additional options.
[Previous, now inaccurate, setting.]
// Controls if the editor should automatically close brackets after opening them
"editor.autoClosingBrackets": false,
Is it possible to customize the brace highlighting in Visual Studio Code? It seems just about everything else is customizable through user and workspace settings, as well as textmate themes. Regardless of the syntax highlighting you employ, the braces always have the same light gray outline/rectangle around them. I don't see an existing user/workspace setting or a textmate scope that addresses this specific feature.
Ultimately I'd like to have a solid color highlight of matching braces, similar to what you would get with the default dark theme in Visual Studio 2013 and 2015.
For future reference, vscode now has the option to change the color of bracket highlighting by adding this to settings.json:
"workbench.colorCustomizations" : {
"editorBracketMatch.background": "#f008",
"editorBracketMatch.border": "#f00"
}
Formats supported are #RGB, #RGBA, #RRGGBB, #RRGGBBAA. The rgba(255,255,255,1) format that seems to work in other places in the settings file appears to not work here.
Only feature that is still missing regarding this subject is bracket highlighting when the cursor is between brackets. They only highlight when one of the brackets is selected. I did not find a current solution searching trough the Settings or workbench.colorCustomizations.
Update 2018.04.21
There is now a plugin called Bracket Pair Colorizer that does shows the current brackets besides the line number no matter where the cursor is placed within the brakes. But on slower hardware (3nd generation i5 laptop) i encountered slowdowns with it when editing large files (3000+ line php file). And alternate plugin that performs well on the same file and highlights the current indentation is Guides.
Update 2019.11.10
VSCode 1.40 now highlights the brackets enclosing the cursor.
Update 2021.08.09
as #desilicius mentioned in the comments Bracket Pair colorizer is no longer maintained by the author. He offers as an alternative Blockman - Highlight Nested Code Blocks which has the same functionality but has a totally different look and Highlight Matching Tag which is a great plugin but only works on html (and jsx) tags as the name implies.
Update 2021.08.13
The VSCode team decided to add bracket pair colorization as a built in feature. It is worked on right now with improvements of 10k x the speed of BPC2. The discussion can be found here
You can try Bracket Pair Colorizer 2 Extension.
Highlighting and changing colors of brackets in VS Code is now possible.
You can try this extension Subtle Brackets by modifying the following the default values in the .json settings of VS Code:
I changed it like this:
"subtleBrackets.bracketPairs": [
"{}",
"[]",
"()",
"<>"
],
"subtleBrackets.styles": {
"global": {
"color": "yellow",
"borderWidth": "1px",
"borderStyle": "none none solid none"
}
}
Don't forget to set to "false" the value of .matchbrackets of VS Code.
"editor.matchBrackets": false
Update September 2021: The "Bracket pair colorization" feature is now available in VS Code as of the August 2021 (version 1.60) update.
Add this to your settings.json file:
"editor.bracketPairColorization.enabled": true
After saving the file, brackets should instantly be colorized.
Also maybe you will like VSCode extension "Blockman", it highlights nested code blocks. (I am the author of Blockman).
The VSCode extension "Blockman" is a new approach of dealing with brackets, well, it does not highlight brackets themselves, but it renders blocks based on the brackets (curly/square/round brackets/braces), and I think it is a better visual helper for our eyes to perceive code structure more easily, to understand code structure more quickly and more comfortably.
If you want to remove brackets color and border, you can use hex colors with 0 opacity in your settings.json:
"workbench.colorCustomizations": {
"editorBracketMatch.border": "#ffffff00",
"editorBracketMatch.background": "#ffffff00",
}
You can overwrite any theme:
"workbench.colorCustomizations": {
"[*]": {
"editorBracketMatch.border": "#ffffff00",
"editorBracketMatch.background": "#ffffff00",
}
}
In order to target a specific theme, replace the glob character, *, with the theme name.
Custom brace highlighting will be even more precise with VSCode 1.76 (Feb. 2022), with issue 170497 and PR 172758: it brings support for coloring a subset of the matched bracket.
Example:
"[plaintext]": {
"editor.language.brackets": [
["{", "}"],
["(", ")"],
["[", "]"]
],
"editor.language.colorizedBracketPairs": [
["{", "}"],
["<", ">"]
]
},
Gives:
This is available with VSCode Insiders today.