Loving using Visual Studio Code but one peeve is that I always think my code isn't indented properly since the left edge of the actual editor is kind of far from the numbers.
Is there any way to show the code folding +/- icons by default? It only shows them if you hover over the gutter.
As an aside, if there is a way to change the color of the gutter so it looks distinct from the editor?
To change the color of the gutter, you can add following to the user settings:
"workbench.colorCustomizations": {
"editorGutter.background": "#abcdef"
}
And to show folding icons:
"editor.showFoldingControls": "always"
Note that this setting requires you to have at least 1.13.
You cannot make code folding icons appear persistently. It is discussed here on project github page however it is not implemented yet.
If you want proper indentation your best bet is indentation guides (the vertical lines that run down to matching indents).
Indentation guides are not displayed by default.To enable indent guides go to File --> Preferences --> Settings and then place following line in settings.json file,
"editor.renderIndentGuides": true
you can make code folding icons appear persistently by addding :
"editor.showFoldingControls": "always",
but not in the "workbench.colorCustomizations", just put it outside and it will work.
example:
"editor.showFoldingControls": "always",
"workbench.colorCustomizations": {
"editor.renderIndentGuides": true,
"scrollbarSlider.background": "#474552",
"scrollbarSlider.hoverBackground": "#295377",
},
and since the [+][-] icons were replaced with [>][v], you can use this extension to regain this feature: Minimalist Product Icon Theme
I know this is an old thread, but FWIW:
File > Preferences > Settings
User > Text Editor > Editor: Show Folding Controls
Select "Always"
Related
So I've installed VS Code on my Mac and it works perfectly fine. There's just this white vertical line going down the screen which is kinda annoying.
I'm not sure if it's supposed to be some sort of guide, ruler or something. It just appeared from the start. Is there a way to disable it?
It looks like this :
There can be 2 places where it has "editor.rulers" in the settings.json.
Make both empty.
By default the ruler shouldn't be visible, but you can check for the following setting:
editor.rulers.
If set, it's an array with column numbers. If you want to turn it off, you can simply set an empty array like this:
"editor.rulers": []
This was bugging me a lot as well... so I finally tracked down the setting which turned it off.
In the latest version of vscode you can follow this process to get rid of that white line
Step 1: Go to Preferences -> Settings
Step 2: Search for editor rulers and click on edit in settings.json
Step 3: In many cases, it would be like this:
"editor.rulers": [
80
]
Remove 80 and make it an empty array and save it.
"editor.rulers": []
By following these steps the vertical line should be removed.
As my dart file was having that issue. So I have added in setting.json:
"[dart]" : {
"editor.rulers": []
}
If you search in your settings file - the default settings that is - you will find
// Controls whether the editor should render indent guides
"editor.renderIndentGuides": true,
Set that to false in your user settings - typically the right panel if you open "Settings' from the lower left gear icon.
You can also change the indent guides color if you wish. See Change indent color in theme for VSCode? to learn how to do so. Generally you can find a lot by opening up your Settings and then searching through the default settings.
If u just want to get rid of the rightmost line, edit your settings.json file
"editor.rulers": [],
And if you want to get rid of the left sidelines, just make sure
settings.json
{
"workbench.colorCustomizations": {
"editorRuler.foreground": "#00000000"//transparent
}
}
Vertical rulers in Visual Studio Code
steps for solution:
click ctrl+, in vs code editor, or manually open the setting in vscode editor.
search for editor rulers and after a search click on Edit in settings.json
enter image description here
make editor rulers empty.
close the tap
enter image description here
Here are some steps:
Open vs code settings.json file
then under json file search for this line of code "editor.rulers":
then remove the or blank the array like this"editor.rulers": [], and save the file.
Press Ctrl + Shift + P => Type: setting.json and then click "Open Settings (JSON)
Then change to this: "editor.rulers": [],
Is there a way to disable this multi selecting in VS Code?
There are 3 settings you can configure to disable this.
1. Selection Highlight
"editor.selectionHighlight": false,
When you selected "open" (as in drag your cursor around the word), it also highlights all the "open"'s in the same file. You can disable this behavior from the settings UI or from the JSON file.
2. Occurences Highlight
"editor.occurrencesHighlight": false
This is supposed to prevent selecting all occurrences of a word when you click on it (i.e. when you click on "open", it should not highlight all the other "open"'s).
But, it can be a bit unreliable. It depends on the language and whether you have language-specific extensions installed that does not override it. See the discussion on it here: https://github.com/Microsoft/vscode/issues/5351
3. Selection Highlight Background
This last way is a bit of brute-force solution. You can change the color of the selection highlight to be transparent. (Technically, it would still be highlighted but you just won't see it.)
"workbench.colorCustomizations": {
"editor.selectionHighlightBackground": "#00000000",
}
I want to get rid off these dashes on right scrollbar of the editor
It's like minimap to indicate the current highlightings in editor.
Update:
I think this feature is Bar mode But still I don't know how to change it.
I'm using VS Code for OSX
As you pointed out, VS scroll bar has 2 modes: Bar mode and Map mode.
To turn off annotations (in Bar mode):
In VS, go to: Tools -> Options -> Text Editor -> All Languages -> Scroll Bars
Uncheck: Show annotations over vertical scroll bar
Go to Code > Preferences > Settings to open user settings and add following line "editor.selectionHighlight": false, and it will stop highlighting selection.
You can customize the colors used in the overview ruler in your VS Code settings.json file. Use a transparent color such as "#fff0" to hide the annotations. The list of annotations is in the VS Code docs here (search for overview ruler).
For example, to turn off selection highlighting, bracket matching, and modifications in the scrollbar, add this to your settings.json file:
"workbench.colorCustomizations": {
"editorOverviewRuler.wordHighlightForeground": "#fff0",
"editorOverviewRuler.bracketMatchForeground": "#fff0",
"editorOverviewRuler.addedForeground": "#fff0",
"editorOverviewRuler.deletedForeground": "#fff0",
"editorOverviewRuler.modifiedForeground": "#fff0",
},
Is there a way to change the Title Bar color for Visual Studio Code (v1.26.0)?
Menu File → Preferences → Settings
Look for "window.titleBarStyle": "native", copy it to your user settings, and change it to "window.titleBarStyle": "custom". It will adapt your theme now.
If the current color is not what you want or you want to tweak it, try doing this.
In your user settings, add the following.
"workbench.colorCustomizations": {
"[Name of the Current Theme you are using]": {
"titleBar.activeBackground": "#191919cc",
"titleBar.activeForeground":"#ffffff",
},
},
"window.titleBarStyle": "custom"
Open menu File → Preferences → Settings and add the following setting:
"workbench.colorCustomizations": {
"titleBar.activeBackground": "#553955" // Change this color!
},
"window.titleBarStyle": "custom"
From the following source:
Colorful Visual Studio Code titlebars for better productivity
There is now a handy Visual Studio Code marketplace plugin called Window Colors which automatically colors the activitybar and titlebar of every window uniquely.
Just go to extensions and type: window colors
For more information, see the Visual Studio Code marketplace webpage.
Edit (Sept 2020): Just noticed that on Ubuntu 20.04 I had to set the preferences->titlebar setting from native to custom in the VSCode Preferences. Otherwise the titlebar does not change colors. Also see this issue on github here- the input from #musicfuel solved it for me.
John Papa launched Peacock a few months back. I've been using the same since then.
It's an easy-to-use plugin with a great set of commands to work with.
It is highly customize-able.
Also it has emphasis on BrandColors which comes in handy when you're simultaneously working on several different projects involving different frameworks and libraries.
In case somebody is still interested. I am using Color Stamp plug
For further tweaks, I changed the following parameters in my vscode project settings
.vscode\settings.json
"workbench.colorCustomizations": {
"titleBar.activeBackground": "#7C21D7",
"titleBar.border": "#ebe8e8",
"titleBar.inactiveBackground": "#7c21d77c",
"titleBar.activeForeground": "#ebe8e8",
"statusBar.background": "#7C21D7",
"statusBar.debuggingBackground": "#7C21D7",
"statusBar.noFolderBackground": "#7C21D7",
"statussBar.prominentBackground": "#7C21D7",
"statusBar.foreground": "#ebe8e8"
}
Note that VSCode 1.45 (April 2020) will offer additional settings:
New theme colors for editor tabs
Some new colors where added to further theme workbench editor tabs:
tab.unfocusedInactiveBackground: Inactive tab background color in an unfocused group
tab.hoverForeground: Tab foreground color when hovering
tab.unfocusedHoverForeground: Tab foreground color in an unfocused group when hovering
New theme color for editor title border
The existing color editorGroupHeader.tabsBorder changed to render a border below tabs but above breadcrumbs.
A new color editorGroupHeader.border allows to render a border below the editor group header (i.e. below breadcrumbs if enabled) to restore the previous behaviour of editorGroupHeader.tabsBorder.
Please apply these simple steps.
Menu File → Preferences → Settings
Look for "window.titleBarStyle": "native", and change it to "window.titleBarStyle": "custom". It will adapt your theme now.
If the current color is not what you want or you want to tweak it, try doing this.
In your user settings, add the following.
"workbench.colorCustomizations": {
"titleBar.activeBackground": "#191919cc",
"titleBar.activeForeground":"#ffffff",
},
I've created a simple Visual Studio Code plugin which accepts a list of regular expressions and colors and changes the titleBar based on them. It's great for working on mono repositories or large projects with multiple packages (like Lerna, or React + React Native)
ColorTabs
Changing the theme of Visual Studio Code will change the title bar color.
Menu File → Preferences → Color theme
Then switch to a different color theme, this will change the title color.
How can I hide the following lines to get a cleaner code view?
Like this in the official documentation:
How can I do that or find settings in the documentation?
Press Ctrl + Shift + p, type settings and select Preferences: Open Settings (JSON) to open User Settings, and add this:
// Controls whether the editor should render indent guides
"editor.renderIndentGuides": false,
This will disable the indent guides.
See the documentation for User Settings.
Edit: as on 30th May, 2022, this setting is called
"editor.guides.indentation": false,
I tried the previous answers, but it would not let me, as it said the file was read-only, so the solution I found was below:
Click on menu File → Preferences → Settings.
In the search box, type "render indent guides" (without the "")
Untick the box which says "Controls whether the editor should render indent guides".
This removes the indent guides.
Here's a way to hide the indent lines but keep the active line indicator.
Add this to settings.json.
"workbench.colorCustomizations": {
"editorIndentGuide.background": "#00000000" // hide via 100% transparency.
}
Only the active indent block will be visible.
To control the color of the active line, add...
"editorIndentGuide.activeBackground": "#444444b9" // Grey with some transparency.
Method-1 (using settings.json)
"editor.renderIndentGuides": false, is now deprecated in vs code.
Use "editor.guides.indentation": false instead.
Method-2 (using settings UI)
Goto settings > search editor.guides.indentation > Remove 'tip' mark for guides indentation.
SOLVED:
"editor.renderIndentGuides": false
Go to
Menu File → Preferences → Settings
And search for "editor.folding". Set it to
"editor.folding": false
This will disable the lines and the folding function.
Since you want to disable the render indent guides,
From the documentation
"editor.renderIndentGuides": false,
This will disable the indent guides.