In the VS code editor, the default setting is to replace tabs by spaces, which is what I want. However, this is disastrous in a make file. I have written a make file (named Makefile) but VS code insists on changing tabs to spaces so I get a "Missing Separator" error when I run make.
If I go to File > Preferences > Settings and type #id:editor.insertSpaces in the menu, I see this:
When I click on Modified elsewhere I see this:
The second screenshot seems to says that the editor won't insert spaces in a Makefile, but it certainly is. What am I doing wrong, or what have I failed to do?
Try modifing settings.json
VScode Settings
There are 3 levels (by higher priority)
Worspace Settings JSON
User Settings JSON
Default Settings JSON
This should fix most inconveniences:
"[markdown]": {
"files.trimTrailingWhitespace": false,
"editor.insertSpaces": false
},
What worked for me was adding the following to settings.json:
"[makefile]": {
"editor.insertSpaces": false
},
When I use VS Code I equip either a light, or dark theme, depending on the time of day, and the lighting in the room. The problem is when I equip a light theme, the
I posted an image of what my editor looks like with my light theme equipped to demonstrate the issue.
I tried BracketPairColorization.enable: "false" as shown in the very bottom image, but it does not work.
Is there a way I can disable the theme-properties that color the bracket-pairs, or setting for disabling the colorized-bracket pairs that works?
I have inspected every settings, and even tried the obvious, as demonstrated in the image below, and figuring out how to turn off the bracketPairColorization feature still eludes me.
How do you completely disable the Colorized Brackets?
VS Code has enabled the Bracket pair Colorization feature by default. This has caused many people to seek out a way to disable the feature, however there is a bit more to the story than simply using:
"editor.bracketPairColorization.enabled": false,
that is because there are 2 different block guide features that have been built-into the bracketPairColorization feature, as well as an indent-guide feature that highlights much the same way.
To disable all the bracket pair colorization & guides, you need to do the following.
{
// Bracket-pair colorization
"editor.bracketPairColorization.enabled": false,
// Bracket-pair guides
"editor.guides.bracketPairsHorizontal": false,
"editor.guides.highlightActiveBracketPair": false,
// Indentation guides
"editor.guides.indentation": false,
"editor.guides.highlightActiveIndentation": false
}
TO LEARN HOW TO DISABLE ONLY PARTS OF THE FEATURE, OR MORE IN GENERAL ABOUT THIS FEATURE, REFER TO THE FOLLOWING SECTIONS
Intro
Disabling/Configuring Bracket Pair Colorization & Guides
V.S. Code's 'Bracket-pairs Colorization' feature frustrates many developers. Recently it was activated by default, and people were upset about it. The problem wasn't the actual feature itself, but the fact that the feature has an enable/disable setting that doesn't seem to turn the feature off when it is set to disable the feature. If you have tried to turn this feature off, and wound up unable to, do think get mad, or upset at yourself (which is what I do in similar situations), most have went through the same hardship, furthermore; this feature doesn't limit its "frustrating of users" to only those who desire to disable it altogether, the truth is, the feature is highly customizable, it actually includes about 3 different features wrapped into one, and is hard to make sense off for anyone attempting to configure it for the first time.
The best way to do this is going to be to demonstrate the configuration that you use to completely disable the feature. Then, after that I will walk you through each setting, and explain what it is they do, and the theme properties they are attached too.
Part-2
Disabling Bracket-pair Colorization & Bracket-pair Guides
Below is a "tried -&- true" method for the complete disablement of the bracketPairColorization, bracketPairColorization.guides & guides.indentation editor-features (or perhaps it would be better to type "editor.* features").
{
// Bracket-pair Highlighting
"editor.bracketPairColorization.enabled": false,
// Bracket-pair guides
"editor.guides.bracketPairsHorizontal": false,
"editor.guides.highlightActiveBracketPair": false,
// Indentation guides
"editor.guides.indentation": false,
"editor.guides.highlightActiveIndentation": false
}
Part-3
Disabling Parts of Bracket-pair Colorization
If there are parts of the feature that really chap your hide, but other parts that you like, you can specify the certain rendering, coloring, and "onActive"-highlighting of Bracket-pairs, and the indent guides (horizontal &/or vertical), using the configurations shown below.
(3a) Taking Advantage of the Colorized Bracket-pairs Setting
In truth, I feel the complexity of the configuration required for this feature is 100% justified by what you can do with it. Though I don't agree with it being activated by default.
Below is a demonstration of what can be done with Bracket-pair Colorization that makes it so awesome. As you can see, the setting "editor.language.colorizedBracketPairs": [ ... ] is being configured in the snippet below. The array pairs bellow are the bracket-pairs that the feature will highlight. In other words, this is how to define which bracket-pairs are highlighted. One way to disable the coloring of bracket pairs, is by simply not assigning any pairs to the colorizedBracketPairs setting. You can define everything from a functions braces, to markdown astriks ["***", "***"], to C Pre-processor directives. The world is your ostyer when it comes to this setting.
"editor.language.colorizedBracketPairs": [
["{", "}"], // Block-Scoped Braces/Function-Braces
["[", "]"], // Array Square-brackets
["(", ")"], // Func Call-args/Declaration-params Brackets
["<", ">"], // HTML/XML Tags
["\"", "\""], // String Quotations
["_", "_"], // Markdown: Italicized
["**", "**"], // Markdown: Bold
["**_", "_**"], // Markdown: Italicized & Bold
["{{", "}}"], // Double Curly Brackets
["`", "`"], // Back-tics
["#ifndef", "#endif"], // Highlight C Directives as pairs
["<%", "%>"], // Wrapping variables in JSON
["${", "}"], // Wrapping template variables in JS/TS
["$(", ")"] // Wrapping of template variables in BASH
]
(3b) Customizing Indentation Guides
You can also customize "Bracket-pair Colorization Guides" & "Indent Guides" by asigning values other than true/false where applicable.
For example:
FOR EXAMPLE: The two settings below, can be configured using a third, boolean-alternate value:
The configuration below, configures the "bracket pair guides" to highlight only the active guides for the active block and no other guides.
"editor.guides.bracketPairs": "active",
"editor.guides.bracketPairsHorizontal": "active",
Now, if you how the setting below configured to true, it won't do anything, if bracketPairs are also active at the same time.
"editor.guides.highlightActiveIndentation": false,
the editor.guides.highlightActiveIndentation setting in the snippet above, is part of a pair of settings used to customize a feature that was part of VS Code long before bracketPairs were around.
NOTE: If you have the settings below set to true, and if you have "editor.guides.bracketPairs" set to true as well, and over-highlighted editor is the end result. You will see indent guides highlighting at different levels, as the bracket pairs work differently than the indent guides. The bracket-pair guides try to highlight use language-defined blocks, while the indent guides use the value assigned to "tab.width": number? to determine where it will highlight. This causes indentation to be highlighted twice in many situations.
"editor.guides.indentation": true,
"editor.guides.highlightActiveIndentation": true,
For some reason they made a setting that helps you configure the two at once, I don't suggest it, but it's the value "always" assigned to "highlightActiveIndentation". If you did want to turn them on with bracket pairs, below shows how you would do it.
"editor.guides.bracketPairs": "active",
"editor.guides.bracketPairsHorizontal": "active",
"editor.guides.indentation": true,
"editor.guides.highlightActiveIndentation": "always",
Another option you have is you can set the "Bracket-pair guides" to true, then configure them to highlight the active block, like this:
"editor.guides.bracketPairs": true,
"editor.guides.bracketPairsHorizontal": true,
"editor.guides.highlightActiveBracketPair": true,
Part-4
Associated Theme Colors
So if we look at the last snippet, just above (I'll post it again below)...
"editor.guides.bracketPairs": true,
"editor.guides.bracketPairsHorizontal": true,
"editor.guides.highlightActiveBracketPair": true,
...you can see that all bracket pairs are turned on (so they are colored), but the active ones are highlighted. The way that this works is that in a theme, or in your settings.json file, using the "workbench.colorCustomizations": {}, setting, the standard coloring of the bracket-pairs are colored a different color at 6 different block (or scope) levels. The color properties to which those colors are assigned are shown below:
"editorBracketPairGuide.background1": "#CC1177",
"editorBracketPairGuide.background2": "#5544DD",
"editorBracketPairGuide.background3": "#CC6622",
"editorBracketPairGuide.background4": "#779428",
"editorBracketPairGuide.background5": "#009944",
"editorBracketPairGuide.background6": "#1155DD",
Now, if you have highlightActiveBracketPair set to true, then the block you focus on is brighter, or a different color (it depends on how the properties below are configured), the active bracketPairGuide is colored using these theme-properties:
"editorBracketPairGuide.activeBackground1": "#EE2288",
"editorBracketPairGuide.activeBackground2": "#8844FF",
"editorBracketPairGuide.activeBackground3": "#FF5C0C",
"editorBracketPairGuide.activeBackground4": "#99CC33",
"editorBracketPairGuide.activeBackground5": "#00CC88",
"editorBracketPairGuide.activeBackground6": "#0077FF",
And the actual bracket-pairs (or the actual brackets themselves) are colored using these properties:
"editorBracketHighlight.foreground1": "#CC1177",
"editorBracketHighlight.foreground2": "#5544DD",
"editorBracketHighlight.foreground3": "#CC6622",
"editorBracketHighlight.foreground4": "#779428",
"editorBracketHighlight.foreground5": "#009944",
"editorBracketHighlight.foreground6": "#1155DD",
"editorBracketHighlight.unexpectedBracket.foreground": "#DD100C",
For more information visit:
https://code.visualstudio.com/blogs/2021/09/29/bracket-pair-colorization
-&/or-
https://code.visualstudio.com/updates/v1_60#_high-performance-bracket-pair-colorization
TL;DR
You can remove this feature by adding the following to the settings.json file.
shortcut: (type ctrl+shift+p, click on Open Settings (JSON))
"editor.language.colorizedBracketPairs": []
or, if you'd like to set specific brackets you can pass them into the array
"editor.language.colorizedBracketPairs": [ ["{", "}"], ...]
I am trying to figure out if it is possible to change the foreground/background color of three things in Visual Studio Code. Is there a setting for these?
matching words
In this screenshot, my cursor is on thisTest in line 15 and so all instances of thisTest are "highlighted". I have not selected the word. My cursor is between the s and T.
selected words
In this screenshot I have selected true.
matching brackets
In this screenshot my cursor is after } and both { and } are highlighted
sorry for being late to the party. Let me share the configuration that works for me. In the settings.json file, you should have the following objects:
"workbench.colorCustomizations": {
"[Hack The Box]": {
// ... omitted for brevity
"editor.selectionBackground": "#ff0000",
"editor.selectionHighlightBackground": "#9fef00",
}
},
In my case, I had to overwrite the config of the Hack The Box I use. Let me recap the keys used:
editor.selectionBackground: manages the selected words scenario
editor.selectionHighlightBackground: manages the matching words scenario
Now, let's switch to brackets. For some time, the extension Bracket Pair Colorizer has been deprecated. To overcome this, you should update to the latest version VSCode. Then, be sure to have these settings (adjust based on your preferences):
"editor.bracketPairColorization.enabled": true,
"editor.guides.bracketPairs": true,
"editor.guides.bracketPairsHorizontal": false,
"editor.guides.highlightActiveBracketPair": false,
"editor.autoClosingBrackets": "always",
Note that these settings are not scoped to a certain theme.
Let me know if this solve your issue!
So, I'm using VS Code with an extension called Prettier. The problem is that after I hit save my code is being "refined" but also separated into 2 lines even despite the fact it's a very short line and I still have plenty of space on the right. Could you please advice what setting is responsible for this conversion? It seems to me that I have checked all available options but unfortunately couldn't find anything which causes it.
"prettier.printWidth": "80"
in your settings.json or search for print width setting in the UI
Increase or decrease this setting. This limits the number of characters prettier limits a line to, it it exceeds this, it will try to break it into smaller ones.
Search for settings.json in visual studio.
You will find a json file in this path AppData\Roaming\Code\User\settings.json if it is a windows machine.
Add the below JSON in the file, If you keep "editor.formatOnSave" as false formatting won't happen when you save the file.
If you want to have this setting just make a specific property as false just the way I did for javascript and HTML in the below section.
"editor.formatOnSave": false,
"[handlebars]": {
"editor.formatOnSave": true
},
"[javascript]": {
"editor.formatOnSave": false
},
"[html]": {
"editor.formatOnSave": false
},
"[less]": {
"editor.formatOnSave": true
},
I want to remove the highlighting of a tag when my cursor is on it. For example Visual Studio Code shows a paragraph tag like this: [<]p[>] where I want it to show like this <p>. See image for an example.
Example image
In your settings.json put:
// Highlight matching brackets when one of them is selected.
"editor.matchBrackets": false,
That will stop the behavior you see, but will do it for all supported languages (so also javascript for example). You can change that setting for only html by :
"[html]": {
"editor.matchBrackets": false
}
It appears that this has changed since the other answers were posted:
Value is not accepted. Valid values: "always", "near", "never".(1)
Use this instead:
"editor.matchBrackets": "never"
Try this
"editor.selectionHighlight": false
Ref -> https://www.samundra.com.np/disable-annoying-highlight-in-visual-studio-code/1666