DEV Community

Cover image for VS Code settings you should customize
Geoff Stevens for Software.com

Posted on • Updated on

VS Code settings you should customize

VS Code is a highly extensible code editor with a massive marketplace of extensions to supercharge your workflow. But there are plenty of powerful settings and customizations that are available out-of-the-box that make VS Code work better for you.

How to edit your settings

Your VS Code settings are conveniently stored in a JSON file called settings.json. To edit your settings in settings.json, start by opening the Command Palette with CMD/CTRL + SHIFT + P.

From the Command Palette, you have a choice between two commands that edit your settings:

  • The Open Settings (JSON) command will let you directly edit the settings JSON file.

  • The Open Settings (UI) command will open a user-friendly UI to edit the settings JSON file indirectly.

Both options work equally well and present the same options. Once you're in the settings tab, you can edit either user or workspace settings. User settings apply globally for any VS Code instance, while workspace settings only apply to the workspace you are currently working in. Workspace settings override user settings.

Save time by automatically formatting pasted code

If you use a formatter, such as Prettier or Beautify, you can force VS Code to format text whenever its pasted into a file by changing the editor's format on paste setting to true:



 "editor.formatOnPaste": true 


Enter fullscreen mode Exit fullscreen mode

By automatically formatting, you can save yourself an extra click with every paste.

Save even more time by automatically formatting on save

In addition to being able to format on paste, VS Code lets you format each time you save a file. Similar to formatting pasted text, formatting on save requires a formatter, such as Prettier or Beautify.



"editor.formatOnSave": true


Enter fullscreen mode Exit fullscreen mode

Saving on format also ensures consistent styling across your files. Worry less about properly formatting your code and let a formatter do the heavy lifting with every save.

Make code more concise with font ligatures

Ligatures occur when two or more characters are combined into a single character. For example, <= will be converted to . In many scenarios, ligatures can help make code more readable.

Adding ligatures to VS Code is straightforward. To do so, you'll need to update two settings.

First, make sure you're using a font that supports ligatures and add that to the editor's font family setting. Fira Code is a popular font that will work and has instructions on how to download it in the GitHub repo.



"editor.fontFamily": "Fira Code"


Enter fullscreen mode Exit fullscreen mode

Once you have a font that you like, simply change the value to true for the font ligatures setting.



"editor.fontLigatures": true


Enter fullscreen mode Exit fullscreen mode

Now you'll have access to helpful multi-character combinations to make your code even faster to read. Below are the types of ligatures you can expect from Fira Code:

Fira Code

The ligatures available with Fira Code

Quickly find your unsaved work by highlighting modified tabs

VS Code places a small dot in the editor's tabs next to files that have been edited but have not yet been saved. Changing your editor's settings to highlight modified tabs puts a colorful line at the top of the tab.



"workbench.editor.highlightModifiedTabs": true


Enter fullscreen mode Exit fullscreen mode

The dots can be more difficult to find, especially if you have many tabs open, but updating this setting makes unsaved files stand out for easier navigation.

highlight modified tab

Note the blue line at the top of the tab

Don't lose your working by turning on autosave

If you'd rather not have to juggle modified tabs, files can be automatically saved after a delay, when the focus leaves the editor of the dirty file, or when the focus leaves the VS Code window.

To do so, change the auto save setting from off to afterDelay, onFocusChange, or onWindowChange.



 "files.autoSave": "afterDelay" 


Enter fullscreen mode Exit fullscreen mode

Autosave isn't ideal for everyone or for all projects, but it can be nice to toggle when needed or in specific workspaces.

Supercharge the file explorer by sorting your files by type or recent changes

By default, VS Code will sort files in the file explorer alphabetically, but there are other options available as well.

Changing the sorting order to type will group files with similar extensions together, while changing the sorting order to modified will put your most recently modified files at the top.



"explorer.sortOrder": "type" 


Enter fullscreen mode Exit fullscreen mode

Another option is filesFirst which sorts everything alphabetically, but puts files before folders. Depending on the size and complexity of your project, sorting files can make navigating more intuitive for your workflow.

Change things up by customizing your cursor

We spend a lot of time staring at our cursors. Why not customize it?

The cursor can be changed to any of the following shapes:
block, block-outline, line, line-thin, underline, or underline-thin. Change the cursor style to whichever shape you'd like:



 "editor.cursorStyle": "block" 


Enter fullscreen mode Exit fullscreen mode

The blinking animation can be changed as well to blink, smooth, phase, expand, or solid. Simply update the cursor blinking setting:



"editor.cursorBlinking": "smooth" 


Enter fullscreen mode Exit fullscreen mode

Clean up your files and trim extra newlines

When a file is saved, VS Code will trim any extra newlines at the end of the file.



"files.trimFinalNewlines": true


Enter fullscreen mode Exit fullscreen mode

I'm guilty of accumulating empty lines at the end of files, so it's great to have things automatically cleaned up.

Enter a new line without accepting a suggestion

By default, VS Code allows you to accept suggestions using either the Enter or Tab key.

Accepting suggestions with Enter can be turned off (or changed to smart which accepts a suggestion with Enter when it makes a textual change).



 "editor.acceptSuggestionOnEnter": "off" 


Enter fullscreen mode Exit fullscreen mode

The switch can help avoid ambiguity between inserting new lines and accepting suggestions.

Save your settings and discover other features

Now that you've customized your settings, you can save your settings using the extension Settings Sync. Settings Sync works by using GitHub and gists to sync customized settings in VS Code.

If you're looking for a few more ideas, the VS Code documentation makes a few helpful suggestions. Another site, aptly named VS Code can do that?! has a curated list of valuable tips.

I've also previously written a post about VS Code extensions you might not have heard of before, if you're looking for other ways to extend VS Code.

I'd also love to hear what settings you've tweaked over time!

Try out our VS Code extension Code Time or subscribe to our newsletter SRC.

Top comments (38)

Collapse
 
tvanantwerp profile image
Tom VanAntwerp

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.

Collapse
 
drawcard profile image
Drawcard

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.

Collapse
 
dance2die profile image
Sung M. Kim

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.

Collapse
 
pzelnip profile image
Adam Parkin

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

Collapse
 
nicastelo profile image
Nicolas Castellanos

Same

Collapse
 
mroggy85 profile image
Oskar Okuno

Hear hear!

Collapse
 
pavelloz profile image
Paweł Kowalski

Yeah, ligatures are terrible for readability and im pretty sure its just a fad for cool kids that like to spend way too much time configuring things just to look different. ;)

Collapse
 
jdmedlock profile image
Jim Medlock

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

Collapse
 
rhymes profile image
rhymes

You're not alone :D

Collapse
 
knaughton782 profile image
Kirsten Naughton

I agree exactly. I'd rather see what I typed.

Collapse
 
qm3ster profile image
Mihail Malo

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

Collapse
 
qm3ster profile image
Mihail Malo

It's missing my favorite:

  "editor.mouseWheelZoom": true,
Enter fullscreen mode Exit fullscreen mode

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" 
Enter fullscreen mode Exit fullscreen mode

"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
Enter fullscreen mode Exit fullscreen mode

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",
Enter fullscreen mode Exit fullscreen mode

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

Collapse
 
drawcard profile image
Drawcard

I enabled

"editor.cursorSmoothCaretAnimation": true

but only got this:

Collapse
 
qm3ster profile image
Mihail Malo

Savagery

Collapse
 
mroggy85 profile image
Oskar Okuno

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 :)

Collapse
 
codemouse92 profile image
Jason C. McDonald

Excellent, I was just wondering about that!

Collapse
 
cyberspy profile image
Adam

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.

Collapse
 
qm3ster profile image
Mihail Malo • Edited

I also have

"breadcrumbs.enabled": true
Enter fullscreen mode Exit fullscreen mode

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",
Enter fullscreen mode Exit fullscreen mode

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",
Enter fullscreen mode Exit fullscreen mode

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.

Collapse
 
alahmadiq8 profile image
Mohammad Alahmadi

Great Article!
here is also one of my favorite settings

"window.title": "${activeEditorMedium}${separator}${rootName}",
Enter fullscreen mode Exit fullscreen mode
Collapse
 
anduser96 profile image
Andrei Gatej

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

Collapse
 
miku86 profile image
miku86

I like:

"editor.letterSpacing": 0.2,
"editor.lineHeight": 22,
Enter fullscreen mode Exit fullscreen mode

to improve the visual readability when coding.

Collapse
 
goyo profile image
Grzegorz Ziemonski

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.

Collapse
 
qm3ster profile image
Mihail Malo

Crazy how nature do that!

Collapse
 
codemouse92 profile image
Jason C. McDonald

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 !)

Collapse
 
qm3ster profile image
Mihail Malo

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.

Collapse
 
pzelnip profile image
Adam Parkin • Edited

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.

Collapse
 
tarifa10 profile image
tarifa-man

hello dear Geoff Stevens - , great and overwhelming - i appreciate your text it is very very good .
i am happy to read your text - i like it very much. Can you give us more hints to run VSCode or VSCodium on mx-linux:

cf : I use VSCode daily and it is widely used, i am shocked it is not in stable repo. Please add VSCode to the package list.
see more here: forum.mxlinux.org/viewtopic.php?f=...
you are invited to add your ideas to the thread.

dear Geoff Stevens - well we look forward to hear form you -regards tarifa