Is there a way to highlight the current file open selected for edition in VSCode?
Some themes show a underline in diferent color. But I want that caractheristic in the default theme
You can modify any themes for Visual Studio Code.
Open the settings.json file.
Open the command palette using F1
Type "open user settings json"
Add the following parameters in the opened file:
"workbench.colorCustomizations": {
"tab.activeBorderTop": "yourColor"
}
Save the changes
P.S. You could see in the attached screenshot that the color of the top border in my active tab already changed.
You could find many different options to modify visual stuff.
Related
In Visual Studi Code for macOS (Version: 1.72.2), how do I change the settings for how certain text is highlighted. In the include screenshot, the highlight for the Find result (the word buret in buret.addEventListener is barely noticeable among the other highlighted words (button, enable, etc.)
Thanks in advance!
Searched through settings which is far too big to easily find it.
You can customize your theme colors. The colors you are looking for are your editor colors.
Press Ctrl+Shift+P to bring up the command palette and run the Preferences: Open JSON Settings command. Add the following lines to your configuration:
"workbench.colorCustomizations": {
"editor.findMatchBackground": "#00ff00",
"editor.findMatchHighlightBackground": "#ff0000",
},
This will change the background color of the active find match to green and of all other find matches to red. Adjust the colour values as you like.
The Visual Studio editor highlights the current line by changing the background color of the current line. Is there a simple way to disable this highlighting? Otherwise, which parameter in Fonts and Colors dialog controls the background color of the currently selected line in the editor?
Is there a simple way to disable this highlighting?
Tools -> Options -> Text Editor, in the Display group, uncheck "Highlight current line"
Which parameter in Fonts and Colors dialog controls the background color of the currently selected line in the editor?
The colors are named "Highlight Current Line (Active)" and "Highlight Current Line (Inactive)"
To disable the border around the current line
In VS 2019
Go to : Environment -> Fonts and Colors:
Find the display item: Highlight Current Line
Set the item foreground color to: Automatic
In VS 2017 and earlier
Go to : Tools -> Options -> Text Editor:
Find the display items:
Highlight Current Line (Active)
Highlight Current Line (Inactive)
Set the item foreground color to: Automatic
if its visual code make
"editor.renderLineHighlight": "none"
The Visual Studio editor highlights the current line by changing the background color of the current line.
The only time I've seen this is when "Use Windows High Contrast settings" is enabled (Options > Environment > General)
With this setting disabled, I just get a subtle grey box to indicate the current line (this may depend on your Color Theme):
If you're using Resharper, it's:
Tools -> Options -> Text Editor:
ReSharper Current Line Highlight
press -> Ctrl + comma
Search => Render Line Highlight
select none from the options
In addition to the previous answer, I'd like to mention that Visual Assist (the tomato icon) also have an highlight current line feature, that can still be active while your Visual Studio highlight option is turned off.
This drove me crazy! Find it in Visual Assist Option panel, Display category.
So don't forget to also uncheck the VisualAssist highlight option.
edit
my settings:
Visual Assist option turned off
Visual Studio option turned on (in the Text Editors part)
In the font color settings, for Highlight current line (active and inactive), set the foreground to Automatic
Finally you can set your highlight color as you want with the background color.
Last point, sometimes Visual Studio mess things up even more, you may have to restart it, or close/open your tabs... sadly, YMMV.
For VsCode 2021 version users
Workspace > Text-Editor > Render Line Highlight > none
Visual assist and vsvim extensions were conflicting. So I disabled it within the visual assist options.
Uncheck the option: Highlighting->Highlight results of Quick Find and Find in Files.
For some reason "esc" doesn't work .
Since Version 1.26.1 (1.26.1), The File Explorer is highlighting the open files and the directories with a green color. I find this really distracting since it's overwriting the colors from git lense (yellow for changes/new files) and eslint (red for errors).
Is there a way to disable that?
See example:
In Preferences:
explorer.decorations.colors
Controls whether file decorations should use colors.
"explorer.decorations.colors": true,//shows colors
"explorer.decorations.colors": false, //displays no colors
I recently started using Visual Studio Code and I would like to know, is a way to open files in a new tab? Currently whenever I open a new file the files I currently have open disappear. I say new tab, but any option that will let me open a new file in the same window as the old one works.
I have tried disabling Preview Mode through the workbench settings as shown in this answer: How to config vscode to open files always in a new tab?. However, when I choose Open or Open Recent the new file still replaces my old file.
Thanks.
Once you have to open your settings file, add the "workbench.editor.enablePreview" property and set value to false.
For 1.21.1 version.
In user settings =>
"workbench.editor.enablePreview": false,
"workbench.editor.enablePreviewFromQuickOpen"
the best way i found.
Starting with VSCode 1.52 (Nov. 2020), you should not have any more issue: all files will open in new tabs, even in preview mode.
Better handling of preview editors:
Preview editors are now better handled with numerous improvements based on feedback and making this feature work more consistent.
The setting workbench.editor.enablePreviewFromQuickOpen is now disabled by default so that editors opening from quick open will not appear in preview mode anymore.
When you start a navigation (e.g. go to definition), the editor you start from will move out of preview mode to keep it open while the new editor will be in preview mode until you navigate further.
We changed all of our custom trees (the ones used from extensions or Git changes view for example) to work more consistently like our built-in trees (like the explorer).
This means, the following interactions now apply to all of them:
double-click or mouse-middle-click to open non-preview
Enter to open non-preview (Space to open in preview-mode)
Note: if you are the author of an extension that is leveraging our custom tree API, you can benefit from this change as well.
Make sure to use vscode.open or vscode.diff commands for the TreeItem.command and you are in!
A new menu item in the editor overflow menu allows to quickly turn off preview editors altogether:
You need to double click on the name of the file. Also, it needs to be done swiftly elsewhere you will be opening in the same tab.
You can drag and drop file near to the opened tab and the file will open in new tab.
Thanks everyone. Double clicking and dragging was useful, but it still didn't solve my problem when opening files from different projects with the "Open File" menu command. I found that Multi-root Workspaces is what I was looking for. https://code.visualstudio.com/docs/editor/multi-root-workspaces
This is likely due to Visual Studio Code opening file in what's called "Preview Mode", which allows you to quickly view files, ideally if a tab is in Preview Mode then its title in the tab bar, will be italic.
To disable Preview Mode set "workbench.editor.enablePreview": false in your settings file or use the "workbench.editor.enablePreviewFromQuickOpen" option to disable it only from the quick open menu.
Alternatively, use command palette CTL+Shift+P (to get all settings) VScode settings then in User => Workbench => Editor Management you can uncheck Enable Preview and Enable Preview from Quick Open to get the same results described above
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.