VS Code settings you should customize

Geoff Stevens on February 06, 2019

VS Code is a highly extensible code editor with a massive marketplace of extensions to supercharge your workflow. But there are plenty of powerfu... [Read Full]
markdown guide

Sometimes I feel like the only person who absolutely does not want ligatures in my programming font. I much prefer seeing exactly the characters I typed. I don't want to risk reading something wrong because a ligature changed what I expected to see.


Same, but TBF after decades of reading code without ligatures I'm pretty accustomed to equating != with .


I get this exact feeling when I switch between JavaScript & MarkDown files.

In JavaScript, ligaturized arrows give me an instant feedback that my code is correct. But in a MarkDown file, I'd like to see what's shown to other people.


Nah you're not alone. I love ligatures but I don't like them in my code. Some things in Fira Code are nice (like the multiplication × for hexadecimals) but it would be nice to have that while switching off the ligatures.


You are not alone Tom. It's a matter for preference for me.


I'm intrigued.
How long did you give it, and what languages?


It's missing my favorite:

  "editor.mouseWheelZoom": true,

It does what you'd expect, zooms font size on Ctr-scroll, just like browsers and graphical editors usually do.
Why it's not on by default is beyond me, there is no other default action on it.
Especially considering that the default multi-cursor is Alt-click not Ctr-click.

Thank you for the post, I never knew about

"editor.cursorBlinking": "smooth" 

"phase" looks cool but is too distracting for me. Might be useful for people with vision problems though.
Messing around with it, I also found

"editor.cursorSmoothCaretAnimation": true

It makes your cursor fly to its new position instead of teleporting. (Try Ctr-right or going up and down.)
Again, too much excitement for me, but might be useful to some, worth mentioning.

All of these look even weirder with a block cursor, because the cursor is actually not transparent, but contains the letter for color inversion.
Which means the letter flies around with cursorSmoothCaretAnimation and is vertically squashed with

"editor.fontSize": 60,
"editor.cursorStyle": "block",
"editor.cursorBlinking": "expand",

Try it with a big font size, it's ridiculous :)


Great article! Just wanted to add an option that you should use together (and anyways) with "files.trimFinalNewlines": true

"files.insertFinalNewline": true (default false)

To make sure your files are POSIX compliant :)


That's the best suggestion here!
SourceTree (and presumably Git), includes the previous last line in a change, when you add more lines to the end of the file, if you don't have a blank line at the end of a file.
It doesn't make much difference, but just looks unnecessary when reviewing changes before committing.


I also have

"breadcrumbs.enabled": true

on desktop, since I can afford to lose the height, and it's useful once I've learned to look at it. Even clicking on it is sometimes helpful! (I know, using a mouse? Ridiculous!)

Since I use Pixel Saver GNOME plugin, to gain that height back, I also need to set:

"window.titleBarStyle": "native",
"window.menuBarVisibility": "toggle",

otherwise the title bar doesn't disappear in maximized windows.
I have never used the menu bar with the mouse anyway, I just use Alt-F to get to File and go from there. I don't like the custom one anyway.

Finally, and this may sound insane to some, I have

"editor.renderWhitespace": "boundary",

at all times.
It's useful for multiple spaces in regexes, literal TABs, and other little anomalies such as visible trailing spaces notifying me that I should Ctr-S to format first before copypasting my code to avoid embarrassing myself.


Great post, good job man!

I'll just add that if somebody want's to enjoy the ligatures of Fira without changing their current font, there's a nice project called Ligaturizer. I've been using their version of Hack for quite some time at work and I'm very happy with it.


Great Article!
here is also one of my favorite settings

"window.title": "${activeEditorMedium}${separator}${rootName}",

Is there a way to see all these variables in once place? Or maybe where are defined or set?


Excellent tips, thanks! I've gone back through my VS Code settings and switched to a few of these.

I'm odd, though; I'm so used to working without ligatures. Even if you skim through some of my old lecture notes from college (yes, still have those years later), you'll see a lot of programming notation...even from psych class! So, I'll probably skip that for now. I know some people who'd be interested in ligatures, however, especially since Hack is available in that form (thanks @goyo !)


I'd say everyone is used to it. It's a very new idea to combine monospace and ligatures. I wouldn't say they are crazy helpful, certainly not to the extent syntax highlighting is, but I found that they're not at all distracting (I avoid Bracket Pair Colorizer 2, a popular plugin that helps many, because it distracts me).
It makes sense mentally, since there's no reason operators need to have gaps in them. And visually the space between the operator and the identifiers increases, without wasting extra width.
Not once did I have a "how do I type that symbol" question in my head.

To sum it up, it was a cultural shock at the beginning, but I don't think it impacted my productivity even then.


Great list, most of these I'd already tweaked, but I hadn't heard of acceptSuggestionOnEnter yet.

Would also second the recommendation of Settings Sync, I'd be lost without that extension.


I like:

"editor.letterSpacing": 0.2,
"editor.lineHeight": 22,

to improve the visual readability when coding.


This is an awesome overview of productivity hacks for VS Code 🙌🏻 thanks for sharing Geoff!


Thanks for the suggestions! I just switched over to VS Code from Sublime and I'm loving it. Fira Code is pretty sweet!


Great article!

BTW, you can also open the Settings tab with Cmd/Ctrl + ,


Well, I think I don't like any of the configurations here. :x

Still, I know some people who likes them a lot.


This is my VS Code configuration: gist.github.com/enriquemorenotent/...

Includes extensions, settings, and another configuration files. I hope it helps someone.


Thanks! I'm going to try some of these out. Will report back if I get a chance.


Can I authorize me to translate the content into Chinese?

code of conduct - report abuse