I'm using Visual Studio Code for my project. Sometimes I need to work on different git branches simultaneously, therefore I'll have multiple project copies in different folders with different branches, and open VS Code in each folder.
However, it bothers me that all VS Code instances look the same, therefore I can't distinguish which workspace I'm switching to immediately.
Is it possible to save IDE appearance or color scheme in VSCode workspace setting?
Thanks.
The simplest solution might be using the Peacock extension. It changes the color of your workspace (including titlebar, activitiy bar and status bar) using a single command:
Peacock: Change to a favorite color.
This is limited to a pre-defined color set, though.
With the extension When File you can color parts of the window based on the file path or languageId
A sample from the README
"whenFile.change": {
"byLanguageId": {
"python": {
"workbenchColor": {
"editor.background": "#ddddff"
}
},
"html": {
"workbenchColor": {
"editor.background": "#ddffdd"
}
}
},
"/projects/server/": {
"workbenchColor": {
"activityBar.background": "#509050"
}
},
"/projects/client/": {
"workbenchColor": {
"activityBar.background": "#905080"
}
},
"/.*\\.log$": {
"workbenchColor": {
"activityBar.background": "#acad60"
}
}
}
You can have workspace settings. Open them by using the Preferences: Open Workspace Settings (JSON) command:
Customize your theme there, e.g. change your status bar colour to red:
{
"workbench.colorCustomizations": {
"statusBar.background": "#9f2323",
}
}
Related
Whenever I enter a . after a object the autocomplete dropdown contains a lot of unnecessary css classnames as options:
Is it possible to ignore css files for ts/tsx intellisense, so i only get relevant options?
VS Code version: 1.37.1
"[typescript]": {
"editor.suggest.showClasses": false
},
"[typescriptreact]": {
"editor.suggest.showClasses": false
}
Basically the same as Mark's answer but it looks like "editor.suggest.filteredTypes" has been deprecated since VSCode >= 1.40 in favor of settings like "editor.suggest.showClasses".
Try something like this in your settings:
"[typescript]": {
"editor.suggest.filteredTypes": {
"class": false,
}
},
"[typescriptreact]": {
"editor.suggest.filteredTypes": {
"class": false,
}
}
[it would be nice if you could combine these but [typescript, typescriptreact] didn't work for me.
From types of completions it looks like it is class that you want to filter out.
And see create language-specific settings to see how to create settings for specific languages.
You will have to reload vscode to see these changes take effect.
We can use the "split editor" option to make two views into one file.
I'm looking for an option to open the same file in separated tabs like I can do in Sublime Text (open new view of file). Is that possible?
Note: I want to do this without splitting the view, so there should be two tabs for the same file within the same view container.
I couldn't find anything built-in that lets you do this, nor an existing extension in the marketplace. I thought it should be quite trivial to implement a "Duplicate Tab" command yourself in a custom extension, but it turns out VSCode only allows the same resource to be opened once within the same view column.
It's still possible to do this on Windows or macOS, but only by abusing this bug:
Issues with not case/fragment-normalizing file paths (macOS, Windows) #12448
Here's what the code for the extension looks like:
'use strict';
import * as vscode from 'vscode';
export function activate(context: vscode.ExtensionContext) {
vscode.commands.registerCommand("duplicateTab", () => {
var activeEditor = vscode.window.activeTextEditor;
if (activeEditor == null) {
return;
}
// HACK!
const sameFileNameButDifferent = activeEditor.document.fileName.toUpperCase();
vscode.workspace.openTextDocument(sameFileNameButDifferent).then(document => {
vscode.window.showTextDocument(document, {preview: false});
});
});
}
In package.json:
"contributes": {
"commands": [
{
"title": "Duplicate Tab",
"command": "duplicateTab"
}
]
},
I'm writing an extension that uses VS Code's webview api. My extension also registers a refresh preview command that updates the webview's content. How can I make it so that:
The refresh preview command only shows up in the command palette when my webview is focused?
The refresh preview command shows in the webview's editor title bar?
First, create a custom context key that tracks when your webview is focused. Use VS Code's setContext command to make this context key track when your webview is focused:
const myWebview = ...;
// Make the context key track when one of your webviews is focused
myWebview.onDidChangeViewState(({ webviewPanel }) => {
vscode.commands.executeCommand('setContext',
'myWebviewFocused',
webviewPanel.active);
});
Then use your context key in the when clauses of your extension's menus contribution point
For a command with the id myExtension.refreshPreview, to ensure that command only shows up in the command palette when your webview is focused, use the following contribution:
{
"contributes": {
"menus": {
"commandPalette": [
{
"command": "myExtension.refreshPreview",
"when": "myWebviewFocused",
}
]
}
}
}
For adding a command (possible with icon) to the editor title bar of your webview, use the editor/title contribution point:
{
"contributes": {
"menus": {
"editor/title": [
{
"command": "myExtension.refreshPreview",
"when": "myWebviewFocused",
}
]
}
}
}
Check out VS Code's built-in markdown extension for a more advanced example of this.
I'm writing a vsCode extension, and from all their API I can't find how to edit colors, either of the active tab, or the title bar. All I can see is adding a status bar item.
What I have:
let disposable = vscode.window.onDidChangeActiveTextEditor((e: vscode.TextEditor | undefined) => {
if (!e) return null;
var currentlyOpenTabfilePath = e.document.fileName;
const color = 'green';
changeColorInTitleBar(color) // This is what I need
})
package.json:
"menus": {
"editor/title": [{
"when": "textInputFocus == true",
"command": "extension.sayHello",
"group": "navigation"
}]
}
Should I edit the workspace.settings from the extension? or is there a vscode API way of doing it?
The UI colors come from the user's theme. There is no api that allows extensions to change the UI colors programmatically because messing with a user's theme is almost always a bad idea. You will get it wrong and break people's weird custom themes and piss them off.
If you really want to go down this path, your extension could write to the workbench.colorCustomization settings to override theme colors. That said, don't do this unless you really know what you are doing and have a very good reason to be doing it.
I wish to hide .js file & .map file extensions, but to display some .js files that are important to my project.
When I use the following to hide:
{
"files.exclude": {
"**/*.js": true,
"**/*.js.map": true
}
}
Everything gets hidden. How can I display specific files while the rest are hidden?
You probably want to hide .js files only when there is a .ts file with the same name, so you need to add condition:
{
"files.exclude": {
"**/*.js": {
"when": "$(basename).ts"
},
"**/*.js.map": true
}
}