How can I change the font's style for VS Code's "Inlay Hints" feature?
I attempted to search for an answer, but could only find how to change the color, not the style.
Here's an example:
I would like the word target in the image below to render italic.
I tried the following, however, it did not work...
{
scope: "inlayHint",
settings: {
fontStyle: "italic",
},
},
I also tried adding editor.inlayHint to the scope, but the attempt was without success.
Setting the Font-style to italic isn't Possible.
Not all is lost though, there's a workaround that actually works pretty well.
As I stated above, setting the font-style to italic is not possible. There is, however, a workaround, and it works pretty darn well. Before I explain the workaround, I think its important to note that the first solution I tried to use, was to set the font to an italic variant, unfortunately setting "editor.inlayHints.fontFamily" to an italic variant of a font was something that VS Code didn't seem to allow. I have seen this in many other situations. The idea is, since you can't do this "fontStyle": "italic", you just change the font to an italic version.
For example:
If I use Cascadia Code as my font, then — in theory — I can just us the following configuration:
// #file "settings.json"
{
"editor.inlayHints.fontFamily": "'Cascadia Code Italic'"
}
...however, it unfortunately doesn't work that way — or at-least not in this situation. Not only do italic varients not work, but neither do bold variants and/or expanded variants (i.e. 'Inconsolata SemiExpanded', 'Inconsolata Bold', etc...).
While moving forward, I will state the obvious:
There is no "editor.inlayHints.fontStyle" setting.
So what do we do?
Well we can set the font-family using "editor.inlayHints.fontFamily".
Its a bit suprising that we can set the font, but not the font's style. I am not sure why they designed it this way, but it's obvious that they built the feature with specific constraints for reasons that are beyond me (reading the feature's development feed on GitHub would probably help anyone who wanted to know more about why the feature works how it does). Nevertheless, we have a highly customizable setting, that actually gives us far more control than the setting that we established, does not exist, editor.inlayHints.font.
What I do, personally, which has a cool tricked-out look, is I find a
non-monospaced hand-written style of font — usually from Google Fonts — and I assign that to the font-family. It took me a while to find some fonts that work. Anyone who has ever played with fonts, trying to find which font works best for them to write code with, will know: Picking fonts that are used anywhere inside the editor (or inside your code) is going to require great scrutiny, and the longer you code, the more set in your ways you get, so this can actually be a time consuming setting to configure. It took me an hour to settle on a font, and I settled on using the "Sriracha" font-family. Siracha is oblique in appearance (looks italic), its readable in the editor, it renders well in the editor (which not all fonts are going to do), and its slightly bolder than the standard weight of the font I use wich is Cascadia Code.
My Configuration results in the following appearance:
When changing the font family, there are a couple other settings that help to configure this feature.
So, in other words, just do the following:
Download the italic &/or bold style font you wont from Google Fonts, Font Squirrel, or some other font source you perfer.
Set the font family using "editor.inlayHints.fontFamily".
Critique the fonts configuration using the other settings available below.
// #file "settings.json"
{
// Font Family
"editor.inlayHints.fontFamily": "/*NAME OF FONT FAMILY*/",
// Font Size
"editor.inlayHints.fontSize": 14, // <-- Set the font-size you want
// Theme Colors Override
"workbench.colorCustomizations": {
// Overrides Theme Default Colors for InlayHints feature
"editorInlayHint.background": "#00001CCC",
"editorInlayHint.foreground": "#99FFBBCC",
// Overrides Theme Parameter hints fg for InlayHints feature
"editorInlayHint.parameterBackground": "#00001CCC",
"editorInlayHint.parameterForeground": "#99FFBBCC",
// Overrides Theme Type hints fg for InlayHints feature
"editorInlayHint.typeBackground": "#08000088",
"editorInlayHint.typeForeground": "#DDEEFF88"
},
}
Really its quite simple.
By being able to set the inlayHints font family to anything we want, we can achieve any sort of font style we want.
In settings.json you need a line like
"editor.inlayHints.fontFamily": "'Myfontitalic'",
Now, it seems vscode has some trouble reading a font name with non alphanumeric characters, if for instance the italic version is "Myfont-Italic" or "Myfont Italic".
A solution is to copy and rename the font to a new name, like "Myfontitalic", without spaces or other characters.
What I did was for Ubuntu but the same idea should work on any Linux, and probably Windows, using other tools (fontforge?)
apt install fonttools font-manager to get ttx a utility to change font info (font-manager is also useful)
use a search, font-manager, font-viewer, ... to find the location of the font (usually /usr/share/fonts/... or ~/.local/share/fonts)
copy a fresh version somewhere (home), cp ~/.local/share/fonts/Myfont-Italic.otf ~/temp.otf and cd to go home
translate to an XML copy ttx temp.otf as temp.ttx
edit temp.ttx (vi, ...), and change all "Myfont-Italic", "Myfont Italic" ... (relevant names) to a unique "Myfontitalic" name, save.
translate back to otf (...) with ttx temp.ttx (creates Myfontitalic.otf if it was an otf file)
To install the new font (locally), either double-click on it in the file explorer ( ~/Myfontitalic.otf ) or use a tool. Restart font-manager, the new font should be visible.
Restart vscode and add the line above in settings.json.
on a Mac find the font variant name like this:
Open "Font Book" App
Expand the desired font and select a variant.
Click the (i) icon on the Font Book toolbar.
Use the PostScript Name name in VS Code - for example "editor.inlayHints.fontFamily": "DankMono-Italic"
No one tells you where to edit this and that makes it a pain in the butt.
File>Preferences>Settings, search for color customizations, click "Edit in settings.json"
{
"workbench.colorCustomizations": {
"editorInlayHint.background": "#00000000",
"editorInlayHint.foreground": "#666666FF",
},
}
I am using VSCODE 1.46.1.
My OS is Linux Mint 19.3
I am using the default Default Light+ theme.
I want see which colors it has used in the status bar. Where can I find the files which has the color codes of Default Light+.
I have search both ~/.vscode & ~/.config/Code for files where text containing statusBar.background, but could not find anything useful.
You can simply go to the source code at light_plus.json
Or in the case of linux, usually is stored at: /usr/share/code/resources/app/extensions/theme-defaults/themes/light_plus.json
cd /usr/share/code/resources/app/extensions/theme-defaults/themes/
Will put you in the folder where all the default themes are. but we warned - future updates might overwrites those files.
Important note: there's an hierarchy: light_plus -> light_vs -> light_defaults -> etc. common which is the base is in the code theme.ts, so if you can't find a setting, look at the parent.
There are in resources\app\extensions\theme-defaults\themes of you vscode install
Find which by using which code in your terminal
How do I change the horizontal letter spacing in VS Code?
I'd like to reduce it a little, in other words, I want to change this:
to this:
As of VS Code 1.13, there is an "editor.letterSpacing" setting.
For example, I'm using the following code in my settings to tighten up the letter spacing ever so slightly:
{
"editor.letterSpacing": -0.15
}
I actually just went the opposite way after installing the wonderful Victor Mono font which I found to be too narrow and wanted to expand the kerning.
I was able to set this by simply searching in the User Settings (CTRL+SHIFT+P) for spacing and there are two separate boxes that were set to 0 for terminal and editor. You can change the value and see it update live, which is really cool.
This is as of my current version of VS Code 1.39.2 on Mac OS Mojave.
I set my terminal to 1 and the editor to 0.7 and it looks amazing now and all is right with the world.
Is there any way to make Eclipse set the color of the line beginning with some expression to a specified value?
In my code I got lots of working "Log" calls which I want to save until any production-like version occurs, but they make it hard to read the code. So I need theses calls (lines, or it would be better if it would be full construction until ";") to be displayed in some other color, like light gray.
You could add a Task Tag, like "TODO", but use "log." or something like that. And the task tag lines appear in a user-specified color.
I am using a clone of the wombat Vim color scheme in eclipse for Python development and it works well apart from the matching keyword highlight (whatever that is named), which is ffff96. This pale yellow makes it impossible to read the white foreground text. Anyone know where this is set?
Oh! Found it! General->Editors->Text Editors->Annotations->Occurences(Pydev). Awesome. What a mess.
Agree with Paul this is a mess; you have to know the name of what you're looking for in order to find it. Bleh. However, here are actual locations for the underlying settings strings (with thanks to Frederic):
In the file {Eclipse workspace directory}/.metadata/.plugins/org.eclipse.core.runtime/.settings/org.eclipse.ui.editors.prefs :
Here are the python-specific and general text colors for matching keywords (they call it "Indication"):
pydevOccurrenceIndicationColor=106,105,146
occurrenceIndicationColor=97,97,97
Also, if you're looking for a specific value that you can find in the UI but not in a file you can change it in Eclipse to a known RGB value and grep for that in the .settings dir.