Does VSCode provide a way of highlighting the current editor group (or tab) in focus?
For example:
Highlighting a bounding box around the group in focus with a separate color (illustration below)
Highlighting the current tab in the group in focus
for modifying the active tab see https://code.visualstudio.com/api/references/theme-color#editor-groups-tabs. For example:
tab.activeBackground, tab.activeForeground and there a few more active/inactive color settings to modify in that link. They go in your settings colorCustomizations object like:
"workbench.colorCustomizations": {
"tab.activeBackground": "#ff0"
}
In general, https://code.visualstudio.com/api/references/theme-color is the resource for looking up what items can be modified in this way.
It doesn't look there is a way to differentiate an active from an inactive editorGroup except for a focused but empty editorGroup, with editorGroup.focusedEmptyBorder. You might find some other editorGroup colors useful though.
By using tab.unfocusedActiveBackground you can highlight inderectly the current active editor group:
"workbench.colorCustomizations": {
"tab.activeBackground": "#770000",
"tab.unfocusedActiveBackground": "#000033"
}
It is the best I have found yet.
View here
Related
I avoid using the mouse for navigation as much as possible. Sometimes when I go back into VSCode via spotlight/raycast the focus will be on some element in the sidebar, or the terminal, or the vim cursor is just immediately obvious. Is there a way to enable some sort of obvious outline on the part of the UI that currently has focus so further navigation can be easier? I perused the settings but didn't see one that immediately stood out.
You can change the usual blue focus border (like you get with tabbing around the window elements) to another color, like red, with this setting in your settings.json:
"workbench.colorCustomizations": {
"focusBorder": "#ff0000"
}
For some elements like those that border on the window edge it doesn't help much. For others it helps.
Does VSCode provide a way of highlighting the current editor group (or tab) in focus?
For example:
Highlighting a bounding box around the group in focus with a separate color (illustration below)
Highlighting the current tab in the group in focus
for modifying the active tab see https://code.visualstudio.com/api/references/theme-color#editor-groups-tabs. For example:
tab.activeBackground, tab.activeForeground and there a few more active/inactive color settings to modify in that link. They go in your settings colorCustomizations object like:
"workbench.colorCustomizations": {
"tab.activeBackground": "#ff0"
}
In general, https://code.visualstudio.com/api/references/theme-color is the resource for looking up what items can be modified in this way.
It doesn't look there is a way to differentiate an active from an inactive editorGroup except for a focused but empty editorGroup, with editorGroup.focusedEmptyBorder. You might find some other editorGroup colors useful though.
By using tab.unfocusedActiveBackground you can highlight inderectly the current active editor group:
"workbench.colorCustomizations": {
"tab.activeBackground": "#770000",
"tab.unfocusedActiveBackground": "#000033"
}
It is the best I have found yet.
View here
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",
}
Does VSCode provide a way of highlighting the current editor group (or tab) in focus?
For example:
Highlighting a bounding box around the group in focus with a separate color (illustration below)
Highlighting the current tab in the group in focus
for modifying the active tab see https://code.visualstudio.com/api/references/theme-color#editor-groups-tabs. For example:
tab.activeBackground, tab.activeForeground and there a few more active/inactive color settings to modify in that link. They go in your settings colorCustomizations object like:
"workbench.colorCustomizations": {
"tab.activeBackground": "#ff0"
}
In general, https://code.visualstudio.com/api/references/theme-color is the resource for looking up what items can be modified in this way.
It doesn't look there is a way to differentiate an active from an inactive editorGroup except for a focused but empty editorGroup, with editorGroup.focusedEmptyBorder. You might find some other editorGroup colors useful though.
By using tab.unfocusedActiveBackground you can highlight inderectly the current active editor group:
"workbench.colorCustomizations": {
"tab.activeBackground": "#770000",
"tab.unfocusedActiveBackground": "#000033"
}
It is the best I have found yet.
View here
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"