Space displays strangely in VSCode, how to fix it? - visual-studio-code

enter image description here
I'm using VSCode in version 1.36, the space displays in it looks so strange, the width of 4 space equals to 2 characters. I don't know whether it's a feature in this new version or a bug, since I couldn't find the setting of recovering it to normal. How to set the space equal to one character in this version or it's exactly a bug?

I've found what the problem is. Resetting the "editor.fontFamily": "monospace". See this issue
reference.

Related

Display larger indentation for files that are indented with just two spaces

I'm working on a project that is using 2 spaces as indentation.
I have a hard time reading code with such small indentation, so my question is:
Question: Can I make vscode show the two spaces as if they were wider (for example double the width)?
(I could of course solve it in a hackish way, by converting each file on checkout, and convert it back before i commit it, but that would be very tedious and error prone. I could also try to convince the project to convert the whole project to tabs, so that everyone can use their own preferred indentation. But I don't want to go into that discussion for every project I work on :) )
I have written the extension Indent Whitespace that decorates each space used in indentation with additional spaces (cursor will skip the decoration).
The decorated spaces are colored with a very transparent red.
With a setting you can change the number of spaces to add, default 1.
If you delete spaces with Delete it looks funny because the selection does not change, use the Arrow keys to update the decorations.
In a later version I will make the decoration color a setting, and also only update the decoration when the file changes (only important for large files, and fix the delete-update rendering).
I think you can't.
There is no such setting in VS Code. As of version 1.13, you can change the kerning, but this changes the spacing between all characters. You cannot do this only for a single character (or a set of characters).
The space width is a property of the font. Microsoft has a guideline that defines what is the ideal space size for a font. But this does not mean you cannot change it yourself when designing one. So I created a version of Roboto Mono which space character is 4x the original one.
This works on Notepad and MS Word, we can see the space is quite big. However, using the exact same font in VS Code, the space is still small, independently of the font being monospaced or not.
Illustration
Somehow, it looks like VS Code ignores space size in the font and decides by itself what is the best value.

Visual Studio Code squiggly lines are misaligned

My Visual Studio Code is doing something weird: squiggly lines (ones that indicate error or warning in the code) are misaligned by some characters away from place where they should be:
Screenshot
Here the warning is referring to settings argument not being used and yellow squiggly line should be perfectly under the whole word. However, as you can see, it is 7 characters to the right where it should be. Also I noticed that the offset depends on the line number the warning is on, so in the screenshot the warning is on 8th line and squiggly line shifted by 7 characters. Other time I saw it happen on 2nd line and it was only shifted by 1 character to the right.
Anybody knows what's going on and how can I fix this?
The problem was with the rust-analyzer extension (or at least it seems like it) and once I switched to pre-release version of the extension the problem disappeared. I guess that was a bug

VS Code: change letter spacing (kerning)

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.

xmobar : gaps on the right of xbm icons

I am having a problem displaying xbm icons properly in my xmobar; namely, there is what appears to be a 1px gap on the right of some of the xbms:
From some experimentation, it seems that the gaps only occur in the sections of the template that are between the separator char ('%') which separates plugins from straight text.
As an example, the code I am using to format the memory usage portion of the bar (first purple section from the left) is:
<fc=#442244,#222244><icon=right_div.xbm/>%memory%</fc>ยท
and the 'memory' plugin has a template of:
<fc=#555555,#442244><icon=mem.xbm/> <usedratio> </fc>
Note that the 'right_div.xbm' displayed fine, but the 'mem.xbm' (which is nested in '%' chars) has a gap.
All of the xbm's are the same size (width:8px, height:14px), and I have tried adjusting the width of the icons in an attempt attempt to fill the gap. This had no effect.
Has anyone encountered this before, or know of a fix to remove the gaps?
Thanks in advance for any help!
Not sure exactly what the issue was, but it was fixed when I switched to using cabal's version by running the following:
sudo apt-get remove xmobar
cabal install xmobar --flags="with_xft"
Hope this helps anyone else that is having this issue!

What's the little red arrow in VS Code?

See here, between line 15 and 16. Does it just indicate a blank line? If so, why?
It called a "Gutter Indicator".
It means a line has been deleted from the previous version of the file (based on git).
If you hoover / click on that red arrow, you get to see the prior version of your code (displaying what you deleted)
Example: