VS Code: change letter spacing (kerning) - visual-studio-code

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.

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.

How to change iPython error highlighting color

I'm using IPython with iterm2 in macOS. I had never had issues before with the color scheme, but this time when an exception occurs, it highlights certain parts in a color combination that I find very hard to read. I've tried with different color setups in iterm and also adjusting highlighting_style and colors in the ipython_config.py file, without much luck. I've seen there is an option to set specific colors highlighting_style_overrides but I haven't been lucky finding the right pygments option for this.
See Position below. This is the best contrast setup I've achieved, I still find hard it to read without focusing.
There is an open issue regarding this: https://github.com/ipython/ipython/issues/13446
Here is the commit which introduced this change:
https://github.com/ipython/ipython/commit/3026c205487897f6874b2ff580fe0be33e36e033
To get the file path on your system, run the following:
import IPython, os
os.path.join(os.path.dirname(IPython.__file__), 'core/ultratb.py')
Finally, open the file and look for:
style = stack_data.style_with_executing_node(style, "bg:ansiyellow")
For the time being, you can manually patch it by changing bg:ansiyellow to something that works best given your color scheme, e.g. bg:ansired or bg:#ff0000.
Here's an option you can drop in your ipython_config.py to duck punch in a better background color:
try:
from IPython.core import ultratb
ultratb.VerboseTB._tb_highlight = "bg:ansired"
except Exception:
print("Error patching background color for tracebacks, they'll be the ugly default instead")
Verified to work with IPython version 8.7.0

How can I have a fixed screen so that when I code I don't have to keep scrolling right in VS code or keep having to indent? [duplicate]

I want to use full viewport while coding in VS Code. But the lines are not expanding when i expand my VS Code window.
Any Fix ?
The correct configuration to use:
In order to configure V.S. Code so that the lines of code in
your editor will only wrap at the end of the view port, and
never before, you need to assign the correct value to the
setting: editor.wordWrap
There are 4 different values that can be assigned to the
editor.wordWrap setting. There is one that I believe
is exactly what you are asking for, however; 2 of the other
three could work too, so I will list them all, and suggest
the one I think will work best for you. The following are
the only "out-of-the-box" line-wrapping configurations that
VSCode supports, and they are as follows:
01|   "editor.wordWrap": "off"_
— Assigning off to the wordWrap setting will make it
so that your editors lines will never auto-wrap. The only
way a line will ever be moved to the next line is if you add
a line break — by pressing the [ENTER] key. — and
proceed to continue typeing text on the next line. This way
could work for you, because you get 100% control over when
the lines break.
02|   "editor.wordWrap": "on"
Assigning on to the editor.wordWrap setting makes it
so that that the lines of code in your editor will wrap
exactly where the viewport ends. No matter how big, or how
small the editor's viewport width is, the lines always
extend the entirety of the viewport, and never before.
NOTE: "on" sounds to me like what you were asking for
in your question
03|   "editor.wordWrap": "wordWrapColumn"
When you assign wordWrapColumn   —to—   "editor.wordWrap" the lines of code inside your editors view-port will wrap at what ever you set the setting editor.wordWrapColumn to. To be more specific, I'll give you an example.
if you configure wordWrapColumn so that it looks like the code-snippet below:
"editor.wordWrapColumn": 80
...then your lines will all wrap at 80.
This is by far the most popular configuration, as it is frequently coupled with 3rd party formatters, and linters, such as ESLint & Prettier. Prettier's printWidth setting, coupled with "editor.wordWrap": "wordWrapColumn", is an extremely reliable and consistent configuration.
4| "editor.wordWrap": "bounded"
— Last is "bounded", bounded is a mix between on, and print width. In a nutshell, lines will wrap if either of two conditions are true.
- First lines will wrap at what ever "editor.wordWrapColumn" is set to, just like the configuration example #3.
- Secondly, lines will wrap at the end of the view port.
To reiterate through what I just typed, lines wrap at _"editor.wordWrapColumn"'_s value, unless the view-port is smaller than the value of "editor.wordWrapColumn", in that case lines wrap at the view-port.
That's all...
You can add any extension in you VS code such as Beautify or Prettier. Or if you want to format the document you can simply use shortcut Shift+Alt+F.
If you want to merge multiline code into single.Follow the steps
1.Select all line you want to merge in single.
2.Press F1 and search for join lines.
3.Select join lines and press enter.
You can also create a keyboard shortcut for this command editor.action.joinLines
"editor.mouseWheelZoom": true
Adding this setting to your settings.json will enable zooming in when holding CTRL and scrolling. After you save settings.json with this setting, you can hold the ctrl key and scroll with your mouse or trackpad to zoom in which will make your code cover the full screen. If you want more focus, you can enter Zen Mode. It is a nice feature built into Visual Studio Code, which helps you to focus more on your code than the activity bar or other files. You can toggle zen mode with shortcut keys CTRL + K Z, Command palette, or View menu.

Adjust line break when pressing ALT+Shift+F in VS-Code

I'm actively using the keybinding ALT+Shift+F for auto formatting my code. I love it and it works well, despite that the line break is set too early.
For example:
I want MyThemes.light to be in the same line, not in the next.
There's still plenty of room to the right, that's just not used. So is there a way to adjust the value at which point the auto format inserts a line break?
Would really love to fix this, as VS-Code is my all time favorite code editor.
The right way to adjust this was setting the Dart: Line Length paramter in the VS-Code Settings.
The auto-formatter uses this for making proper line breaks.
The default value 80 seems a bit low on 16:9 monitors and bigger displays. Maybe someone else will find this useful.

Automatically hard wrap lines at column in VSCode

How can I automatically hard wrap lines in VSCode? By that I mean if a line reaches a specified column, automatically insert a newline at the word boundary closest to that column without going over. Vim has a setting called textwidth that does this that I like to use when editing Markdown. It doesn't seem like VSCode does, as far as I can tell. It just has ways to control softwrapping.
VSCode doesn't support this out of the box. But you can install the Rewrap extension, which allows you to format the block that your cursor is currently in by pressing Alt + Q.
Rewrap requires no further settings, since it reads VSCode's settings to obtain the column at which to break.
Rewrap also supports automatic wrapping (off by default): https://github.com/stkb/Rewrap/wiki/Auto-wrap
Unfortunately, VSCode doesn't have this feature yet. But, we still can make it to be as close as vim automatic word wrapping beautiful feature.
First Step
We need to setup soft word wrap feature in VSCode.
Open VSCode Settings via Code => Preferences => Settings.
Add these 3 lines of editor settings.
"editor.wordWrap": "wordWrapColumn",
"editor.wrappingIndent": "same",
"editor.wordWrapColumn": n
Don't forget to change (n) with your preferred length of columns line. For me, I feel more comfortable to set it to 60.
Save this setting.
The main purpose of this first step is to make us feel more comfortable when we're typing because we don't need to manually type Enter and see a long line of text.
Second Step
We need to install Vim emulation for VSCode and set vim textwidth.
Install Vim emulation via VSCode extensions.
Open VSCode Settings via Code => Preferences => Settings.
Add this line of vim setting.
"vim.textwidth": n,
Don't forget to change (n) with your preferred length of columns line. For me, I will set this to be the same with (n) in the first step.
Save this setting.
Actual Use
When you finish to write your whole document, you can format it to be hard wrap lines using this way.
Block all text using visual line mode (Shift + v)
Type 'gq'
Now VSCode support auto "soft" wrapping out of the box.
Settings --> Text Editor --> Last 3 options (as on today) is for autowrapping.
Word Wrap (Controls how lines should wrap)
Word Wrap Column (Controls the wrapping column of the editor)
Wrapping indent (Controls the indentation of wrapped lines)
By default Word Wrap is off.
As of 2020 and if you're using the Prettier - Code formatter plugin:
Go to Plugins -> Find Prettier -> Cog -> Extension Settings -> Prettier: Print Width Fit code within this line limit and set to whatever you want. By default it's 80.
When you save the file, Prettier will format automatically.
Hard Wrap Comments
Use the Rewrap extension.
Soft Wrap Code
Add the following setting (replace column width with your preference): "editor.wordWrapColumn": 100
Then add either "editor.wordWrap": "wordWrapColumn" (wraps at the column) or "editor.wordWrap": "bounded" (wraps at either the column or the viewport).
Hard Wrap Comments and Soft Wrap Code
Unfortunately the extension and VSCode settings do not play nicely.
Feel free to upvote this feature request.
There is currently an Open request for this in the VS Code Issue tracker on GitHub, You Can Find It Here
Most of these didn’t work for me, but I found the extension Vsctoix, which does.
We start out with line breaks at column 80:
Mechanisms such as a “windfall clause” help distribute riches within particular
futures. But for a windfall clause to be useful, many conjunctive assumptions
have to be true. We present a new method to borrow against potential future
windfalls today, when they have greater marginal use. The method also increases
the probability and thus the expected value of the windfalls.
Then we execute “IX: Join Lines” (no parameter):
Mechanisms such as a “windfall clause” help distribute riches within particular futures. But for a windfall clause to be useful, many conjunctive assumptions have to be true. We present a new method to borrow against potential future windfalls today, when they have greater marginal use. The method also increases the probability and thus the expected value of the windfalls.
And then “IX: Break Line At” with parameter 100:
Mechanisms such as a “windfall clause” help distribute riches within particular futures. But for a
windfall clause to be useful, many conjunctive assumptions have to be true. We present a new method
to borrow against potential future windfalls today, when they have greater marginal use. The method
also increases the probability and thus the expected value of the windfalls.
It would be neat if it respected paragraph breaks and did both steps at once, but so far it’s the only extension that works for me – except I haven’t tried the vim emulation yet.
You can do this without any extension. You just use two regex search-and-replace.
Isolate the lines you want to rewrap by moving them to a separate file.
Join all the lines into one line. For example, ctrl+h, "\n" ==> " ". Note: make sure regex is enabled (the dot star icon)
Split the line into multiple lines. For example, ctrl+h, "(.{100}) " ==> "$1\n". Notice the space after the paren.
Copy the lines back to the original file.
There are many variations on this technique. For example, you could using comma instead of space "(.{100})," ==> "$1,\n". You could use Find in Selection alt+L instead of using a temp file.
Edit: (below answer might be for a soft wrap, see here for difference between soft and hard wrap: https://stackoverflow.com/a/319932/9481613)
In my version it is Preferences -> Settings then scroll down to "Editor: Word Wrap" where a dropdown box is available from which I selected wordWrapColumn. After choosing this and closing, when I click on View now at the bottom it says Word Wrap Alt+Z.
If anyone is running having issues, accessibility support/screen reader may need to be disabled. Go to preferences >> text editor >> accessibility support and toggle it off.
You can easily set the column limit using ColumnLimit member in C_Cpp.clang_format_fallbackStyle in settings.json (You have to install Microsoft C/C++ extension)
"C_Cpp.clang_format_fallbackStyle": "{ BasedOnStyle: WebKit, IndentWidth: 4, ColumnLimit: 80 }",
Then you can format the file using Shift + Alt + F
There are many options you can change in this format feature
"C_Cpp.clang_format_fallbackStyle": "{ BasedOnStyle: WebKit, UseTab: Never, IndentWidth: 4, TabWidth: 4, BreakBeforeBraces: Attach, AllowShortIfStatementsOnASingleLine: false, IndentCaseLabels: false, ColumnLimit: 80, AccessModifierOffset: -4 }",
Name of the predefined style used as a fallback in case clang-format
is invoked with style file but the .clang-format file is not found.
Possible values are Visual Studio, LLVM, Google, Chromium, Mozilla,
WebKit, Microsoft, GNU, none, or use {key: value, ...} to set specific
parameters. For example, the Visual Studio style is similar to: {
BasedOnStyle: LLVM, UseTab: Never, IndentWidth: 4, TabWidth: 4,
BreakBeforeBraces: Allman, AllowShortIfStatementsOnASingleLine: false,
IndentCaseLabels: false, ColumnLimit: 0, AccessModifierOffset: -4,
NamespaceIndentation: All, FixNamespaceComments: false }
Before
void Proc::Memory::getSramOff(const char* mem_name, uint dataSize, uint addrBits, uint& noOfBytes, uint& sram_off)
After
void Proc::Memory::getSramOff(const char* mem_name, uint dataSize,
uint addrBits, uint& noOfBytes, uint& sram_off)