Customize interface for Visual Studio Code? - visual-studio-code

Is it possible to change the user interface for Visual Studio Code? Specifically, is it possible to remove the "Git" and "Debugger" panes? Also, how can you edit the menus in the main menu bar?

You can't change the menu in VSCode. The menu items are fix.
For now (speaking for version 1.2.1) you can change the color theme only to customize the user interface.

Related

VScode Software - No leftsidebar menu visible

I'm new to VScode software.
I have installed it , but it seems that every example i see on the net has a leftsidebarmenu.
Example of vertical menu bar here.
But my vscode 2022 on windows does not have it.
My vscode 2022 without vertical leftbar menu.
Anyone how i can add it?
Thanks in advance.
Just Go to View in Menu Bar and then Select Appearance the Tick the option Show Activity Bar
Its not Visual Studio Code, you have downloaded Visual Studio, thats an IDE
You can download it here -> Visual Code

How to add an icon in Activity bar of Visual Studio Code that will trigger a keyboard shortcut

Is it possible to add an icon in Activity bar of Visual Studio Code that will trigger a keyboard shortcut like Ctrl+Shift+P. Or executing a command from Command Palette.
Only extensions can add an icon in the activity bar (officially called a "views container"). They cannot trigger a command, though. See the official documentation here:
https://code.visualstudio.com/api/extension-capabilities/extending-workbench
https://code.visualstudio.com/updates/v1_23#_custom-activity-bar-views
However, maybe these extensions might fit your needs, they allow creation of custom commands in the status bar or the editor menu bar:
https://marketplace.visualstudio.com/items?itemName=seunlanlege.action-buttons
https://marketplace.visualstudio.com/items?itemName=jerrygoyal.shortcut-menu-bar

How to add a new menu item to the File menu in Visual Studio Code?

Is it possible to create an add a custom menu to the main menu bar (preferably the File menu) in Visual Studio with an extension? I want to add a new project type.
Related question as this but for Visual Studio Code instead of Visual Studio:
Adding a Menu to the Visual Studio Menu Bar within an Add-In
I've been looking for the same thing, but currently, I don't think it's possible. This link describes how an extension can create menu items, but the only "contribution points" are in context menus. There is no contribution point for the top-level File menu. I have also been unsuccessful finding a configuration file for editing the existing menus.
Additionally, this other SO post seems to confirm this: VSCode: hiding some default menu items
opened https://github.com/microsoft/vscode/issues/74013

Change Visual Studio Code's title bar color

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 do I enable document map in Visual Studio Code?

In the Sublime text as well as in Notepad++ I can enable Document Map.
Here is a screenshot of the document map of Notepad++.
Minimap was added in Visual Studio Code 1.10. The release notes say:
To enable VS Code's Minimap, set "editor.minimap.enabled": true to
turn on the rendering of a Minimap for the current file.
To set the preference open VS User Settings (Preferences > Settings). This will open two side-by-side documents. Add the entry and set the value to true. In the side-by-side view you choose between changing the "User Settings" (global) or "Workspace Settings" (current workspace only).
{
"typescript.check.tscVersion": false,
"git.confirmSync": false,
"editor.minimap.enabled": true
}
In visual studio 2017 you can simply right click on the scroll bar and click on scroll bar Option. Then on the right panel you can chose to activate the mapping mode on the scroll bar.
I realise this post is about Visual Studio Code and not Visual Studio 2017, but the names are so similar that a lot of people won't know the difference and end up here anyway. To see a post specificaly about Visual Studio 2017, go look this question.