DEV Community

loading...
Cover image for Tips to use VSCode more efficiently

Tips to use VSCode more efficiently

selrond profile image Sebastian Andil ・8 min read

Say you’ve already been using VSCode for some time now.
You’ve changed the color theme (if not, I highly recommend material theme), you’ve tweaked some essential settings and installed a couple of popular extensions.

Maybe you know your way around it enough to get the work done. That’s perfectly fine, but there’s a good chance you’re missing out on some of its many features.

This is a collection of settings, extensions and shortcuts, that proved especially useful for my job as a web developer.

jsconfig.json

One of the most overlooked essential features of VSCode is jsconfig.json. If you open your JS project in VSCode, it doesn't know the files in it are related. It treats every file as an individual unit.
You can tell it about your project by creating jsconfig.json file at the root of your project.

jsconfig.json (among other things ) enables smart go to definition, that works with various module resolution algorithms. In practice - it means that you can now ⌘ click on various references in your code, and it'll take you to the definitions of them. I highly recommend you reading more about it, but this is what I use most of the time:

{
  "compilerOptions": {
    "baseUrl": "src/", 
    "target": "esnext",
    "module": "commonjs"
  },
  "exclude": [
    "node_modules",
  ]
}

A settings primer

Note: If you already know where to find VSCode settings and how to edit them, jump to the next section

VSCode stores settings in a JSON-like (the so-called jsonc - JSON with comments mode) file. It can be accessed with ⌘ , shortcut, or through Code > Preferences > Settings. (Go here to learn more about VSCode settings)

After you open up the settings, you won’t see the raw JSON right away. VSCode has received a nice UI for them lately, but for the purpose of this article it’s easier to share the settings in raw key-value form, so we won’t be using it.

You can access the settings JSON by clicking on the { } icon in the tab bar.

In case it’s empty (you haven’t made any modification to the default settings yet), let’s create an empty object, so it’s a valid JSON:

VSCode settings

Theme

This might seem basic, but it doesn’t mean it’s not important. You spend a lot of time looking at code, so you might as well spend some time choosing a theme that’s easy on your eyes, and make the code look pretty as well.

As I’ve already mentioned, I’m using Material Theme Ocean High Contrast variant. I’ve tried many over the years, but settled on this one.

One more thing - those nice file / folder icons are achieved through Material Theme Icons extension:

Customized sidebar

This is how your settings (and editor) now look like:

Edited settings

Nice right?

Quick tip: You can change Material Theme accent color by searching „accent“ in command palette.

Font

The right font can make your code more legible and pleasant to look at. My programming font of choice is Fira Code - a robust & well-made programming font with beautiful ligatures. Try it! Did I mention it's free?

Indentation

Whatever side in "tabs vs spaces" debate you're on, you can set it up like this:

"editor.detectIndentation": true,
"editor.insertSpaces": true
"editor.tabSize": 2

Switching between editor and explorer

You can easily toggle between code editor and project files explorer with ⌘ ⇧ E shortcut. When you’re inside the explorer, you can use the same keys for common operations as in MacOS finder - arrow keys to navigate, to rename file / folder and ⌘ ↓ to open current file.

Quick tip: Reveal the focused file / folder in native MacOS finder with ⌥ ⌘ R.

Emmet

Emmet is a plugin for many popular text editors which greatly improves HTML & CSS workflow by enabling clever abbreviations, expansions, common actions (wrapping element inside other element) and so on. You may argue you're not writing HTML directly, but it can be easily configured to play nicely with frameworks like React and Vue, because they use similar html-like markup.

VSCode ships with Emmet support out of the box for html, haml, jade, slim, jsx, xml, xsl, css, scss, sass, less and stylus files.

So, by default, you'd have to use .jsx file extension, to get Emmet support for JSX files. Say you only work with .js files, so you have two options:

  1. tell Emmet to run in .js files:
"emmet.includeLanguages": {
    "javascript": "javascriptreact",
}

(enable javascriptreact Emmet syntax in javascript files)

  1. tell VSCode to treat any .js file just like .jsx (it means to use javascriptreact syntax for all .js files as well), so Emmet sees is as if it was a .jsx file:
"files.associations": {
    "*.js": "javascriptreact"
}

I went for the second one - I never use .jsx file extension, so I want to have VSCode React support in .js files anyway.

These Emmet commands are my most-used ones:

  • expand abbreviation - to expand string to JSX element
  • wrap with abbreviation - to wrap existing JSX with another element
  • split / join tag - making self-closing tags from tag pairs (e.g. from the output of expand abbreviation) and vice versa

Emmet is really powerful and can save you a lot of time, so I highly recommend you checking out their demos on emmet.io site.

Quick-Open files for real

Let’s open a file using Quick Open command: ⌘ P.

Notice the tab bar - file name being written in italics means the tab is in preview mode. By default, if you select the file from the sidebar or quick open (⌘ P), and then select / quick open another one, it reuses the preview tab, until it’s pinned (double-clicked, or the file is edited).

This behavior makes sense if you’re going through files in sidebar, possibly just peeking into files, but if you want to quick-open something, you probably know you want to have it open „for real“.

To achieve this, set the following:

"workbench.editor.enablePreviewFromQuickOpen": false

Now try to ⌘ P - your file will no longer open in preview mode.

Breadcrumbs

Breadcrumbs

Breadcrumbs (displayed underneath the title bar) is a useful feature of VSCode that shows your location in the codebase. If you click on one of the segments, it shows you your current location, and files / symbols on the same level, serving as a quick navigation as well.

Enable them with this setting:

"breadcrumbs.enabled": true

There are two useful shortcuts when it comes to breadcrumbs:

  • ⌘ ⇧ . - Focus Breadcrumbs: It will select that last element and open a dropdown that allows you to navigate to a sibling file or symbol.
  • ⌘ ⇧ ; - Focus last element of Breadcrumbs without opening it - so you can move inside the path hierarchy with arrows.

Quick tip: You can type inside the breadcrumb popup to filter files and folders / symbols, and focus on them with .

Hide Open Editors section

You see open files in tabs anyway.

  "explorer.openEditors.visible": 0

Customize the title bar

Default VSCode title is not very useful. It only shows current file name and project name. Here's how you can improve it:

"window.title": "${dirty} ${activeEditorMedium}${separator}${rootName}"
  • ${dirty}: a dirty indicator if the active editor is dirty.
  • ${activeEditorMedium}: the path of the file relative to the workspace folder (e.g. myFolder/myFileFolder/myFile.txt)
  • ${separator}: a conditional separator (" - ") that only shows when surrounded by variables with values or static text.
  • ${rootName}: name of the workspace (e.g. myFolder or myWorkspace).

You can see all available options here.

Minimap

You probably know the famous minimap widget from Sublime Text. It's turned on by default, but looks quite awful:

Default minimap

Lets' improve it.

First, let's use color blocks instead of minified characters. Then set the max horizontal columns, and finally, always show the "slider" so we can glance at the minimap to see where in the file is the screen located.

"editor.minimap.renderCharacters": false,
"editor.minimap.maxColumn": 200,
"editor.minimap.showSlider": "always"

Customized minimap

Whitespace

You probably want to see all the characters:

"editor.renderWhitespace": "all"

Smooth scrolling

"editor.smoothScrolling": true

Caret improvements

There's something oddly satisfying about the cursor that's phasing instead of blinking:

"editor.cursorBlinking": "phase"

Also, the cursor is easier to follow, when there's a slight animation on its movement:

"editor.cursorSmoothCaretAnimation": true

Final new line

It's a common practice to include a new line at the end of your file:

"files.insertFinalNewline": true

Trim trailing whitespace

"files.trimTrailingWhitespace": true

Telemetry

I like to have telemetry disabled:

"telemetry.enableCrashReporter": false
"telemetry.enableTelemetry": false,

also, there’s Natural language search enabled by default, which sends your keystrokes to Bing when searching settings. In case you want to turn it off as well, add this to your settings:

"workbench.settings.enableNaturalLanguageSearch": false

Copy file path

When talking about code, it’s often useful to be able to point to a specific file. VSCode offers copying both absolute and relative file paths of active file through command palette ⌘ P, but it’s quicker to set your own keyboard shortcuts.

Open your keyboard shortcuts file with ⌘ K, ⌘ S (commad + K immediately followed by commad + S), and add the following (or any key combination you like)

copy relative path

{
  "key": "shift+cmd+c",
  "command": "copyRelativeFilePath"
}

copy absolute path

{
  "key": "shift+alt+cmd+c",
  "command": "copyFilePath"
}

Hide feedback smiley in the bottom bar

"workbench.statusBar.feedback.visible": false

Extensions

Rich extensions ecosystem is one of the reasons VSCode took off. Here are the ones that proved themselves useful:

If there's anything that made your experience with VSCode particularly better, please share it in the comments!

First published on sudolabs.io

Discussion (38)

pic
Editor guide
Collapse
borisimple profile image
Boris Krstić

Thanks for the cool list!

I am using flat "Material Theme" and I love it!

The only thing I was trying to add to the theme was bold function names. Now I love it even more :)

Here's a code snippet if someone is interested :)

 "editor.tokenColorCustomizations": {
    "textMateRules": [
      {
        "scope": "entity.name.function",
        "settings": {
          "fontStyle": "bold"
        }
      }
    ]
  }
Collapse
selrond profile image
Sebastian Andil Author

Brilliant!
I've slightly modified it to include console.log()-like function calls as well:

  "editor.tokenColorCustomizations": {
    "textMateRules": [
      {
        "scope": [
          "entity.name.function",
          "support.function"
        ],
        "settings": {
          "fontStyle": "bold"
        }
      }
    ]
  }
Collapse
borisimple profile image
Boris Krstić

And I'll be using it! Thanks :)

Collapse
drawcard profile image
Drawcard

This is fantastic

Collapse
gherciu profile image
Gherciu Gheorghe

awesome!thanks! ;)

Collapse
vladejs profile image
Vladimir López Salvador

None of the posts regarding vscode mention it's hability to use the awesome postfix completion that exists in webstorm. It comes as an extension, but is awesome.

For example, if you wanna write to the console:

"This is shown on console".log

After typing that and hitting TAB, the text transforms to:

console.log("This is shown on console")

And the same can be made with if statements:

isActive && isWorking.if

// Transforms to
if (isActive && is working) {
  // cursor here
}

A feature I can't live without

Collapse
selrond profile image
Sebastian Andil Author

Had no idea about this - definitely looks cool!
Mind providing a link to that extension?

PS: if no one’s writing about this, it’s a perfect opportunity to do so yourself!

Collapse
vladejs profile image
Vladimir López Salvador

TS/JS Postfix Completion is the name.

Haven't write an article because it's just what I commented plus the hability to create your own postfix snippets.

Maybe you could update this article with this info?

Glad you like it.

Collapse
pedromass profile image
Collapse
jericomanapsal profile image
jericomanapsal

Awesome post! This is like the best "vscode ultimate makeover".

I really liked

"editor.minimap.renderCharacters": false

as well as

"workbench.settings.enableNaturalLanguageSearch": false

Although one can switch to vscodium with telemetry disabled by default.

Collapse
selrond profile image
Sebastian Andil Author

Thanks for the kind words, glad you found it helpful!

Collapse
saint4eva profile image
saint4eva

You can turn off telemetry in vscode if you want.

Collapse
alex_barashkov profile image
Alex Barashkov

I'm also curious does changing the minimap rendering also increase the performance :)

Collapse
jericomanapsal profile image
jericomanapsal

Maybe? That's one less thing to render. I've seen other people disable it.

Collapse
karamfd profile image
Karam

I like the explorer to display files before folders. Here's the setting for it, in case anyone is interested.

"explorer.sortOrder": "filesFirst"

Thank you for this amazing article @selrond

Collapse
pedromass profile image
Pedro Mass

👏Nice write up. I liked the keyboard shortcuts for copying relative paths.

I'll still probably use an extension to not have to navigate to the file first, but it'll be good to have if already at the file.

Extension: Relative Path

Collapse
elanandkumar profile image
Anand Kumar

I already had all of them except the following. Its awesome. Thanks!.

"workbench.settings.enableNaturalLanguageSearch": false,
"workbench.statusBar.feedback.visible": false

And, I like to keep minimap off.

Collapse
vagoel profile image
Varun

Execellent job listing out most useful configuration.Specailly enabling Emmet in .js is super handy.Thanks.

Terminal Settings :
If you are on windows and prefer using git bash as your default intergrated terminal , use this settings:

"terminal.integrated.shell.windows": "C:\{install location}\Git\bin\bash.exe",

Collapse
wpfan2099 profile image
wpfan

hello dear Sebastian - is VScode only a editor or can we do more.

i am just diving into Python and i have started to code in Python literally 5 minutes ago. so do not bear with me - with this beginner question. Which is the right Editor for me to start.

Is Vscode capable to run code and to store the output of the code - eg. from the code below!?

I want to be able to export the data I have scraped as a CSV file. My question is how do I write the piece of code which outputs the data to a CSV?

the question is: can we run in VSCode the code below - and have a closer look at the output? does VSCode execute the code - and store the file somewhere on the machine!?

note - this is devinitly no coding question - those would fit on SO - no this is a superuserquestion that is aimed to get the right tool to start...

[code]
import csv ; import requests
from bs4 import BeautifulSoup

outfile = open('career.csv','w', newline='')
writer = csv.writer(outfile)
writer.writerow(["job_link", "job_desc"])

res = requests.get("implementconsultinggroup.com/caree...
soup = BeautifulSoup(res,"lxml")
links = soup.find_all("a")

for link in links:
if "career" in link.get("href") and 'COPENHAGEN' in link.text:
item_link = link.get("href").strip()
item_text = link.text.replace("View Position","").strip()
writer.writerow([item_link, item_text])
print(item_link, item_text)
outfile.close()
[/code]

the question: We now should be able to run this in VSCode ( and yes: i do not think that we need a fully fledged IDE as PyCharm) and besides that we also should be able to run this in ATOM too- i guess that we can now open the py file and run it with the ATOM extension called script!?!?

What do you say -what do you think about this "extension called script or the other one called Hydrogen!?!?

Collapse
sodonnell profile image
Sean O'Donnell

Thanks for some of these suggestions.

Gitlens, MarkdownPDF and most of the *Lint plugins are exceptionally handy.

Also, the Terraform and Docker extensions are convenient.

VSCode may be the 1st Microsoft application that doesn't make me want to scorch the earth in frustration. =)

Collapse
leraatwater profile image
Lera Atwater

Thanks for your time and effort on this. It was very useful for me.

Collapse
selrond profile image
Sebastian Andil Author

So glad to hear this!

Collapse
rcneupane profile image
Ram Chandra Neupane

Great post, couple of thing i like to change in my vscode
1) Toggle side bar to right
2) I like to turn off minimap - Cool things but i don't use them :)

"editor.minimap.enabled": false

3) Turn off breadcrumbs - Cool things but i don't use them

"breadcrumbs.enabled": false

4) Hide Activity bar - set keybinding to CTRL+ALT+B

Collapse
david_j_eddy profile image
David J Eddy

You just doubled the size of my settings.json; every line an amazing addition. Thank you!

Collapse
selrond profile image
Collapse
tarifa10 profile image
tarifa-man

hello dear Sebatian, 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.

forum.mxlinux.org/viewtopic.php?f=...
we look forward to hear form you -regards tarifa

Collapse
tarifa10 profile image
tarifa-man

hello and good day.

i am on mx-linux, and i just have setup a php-development-environment.
i just have installed PHP on the machine. Now i need to add a editor and yes: since vscode is used by a increasing number of folks i think i have to try out.
btw: what about setting up vscode as a php editor - sensu blog.theodo.com/2019/07/vscode-php...

is this a recommended way to go!? i have installed vscode on my machine now i want to setup it as a editor for the work with php.

i will have a closer look at the options.

Collapse
zeecnla profile image
Cesar Melchor

All these are awesome!! You just transformed my VS Code

Collapse
pzelnip profile image
Adam Parkin

Awesome writeup, lots of things in there I hadn't seen before!

Collapse
nathanenglert profile image
Nathan Englert

Super helpful, thanks for sharing!

Collapse
anduser96 profile image
Andrei Gatej

A lot of useful stuff! Thanks!

Do you have any idea how could I get the vim’s cursor behavior, but without other features that the vim extension comes with?

Collapse
tuanht profile image
Anthony-Tuan Ha

For me I'm using VSCode as a note-taking app, written in Markdown so basically I can access my notes on whatever OS.

Collapse
brendanmcd96 profile image
brendanmcd96

If you're using Python, check out the Kite plugin that adds AI-powered completions and 750,000 pages of Python documentation to the VS Code IDE

Collapse
laur1s profile image
Laurynas Tumosa

I suggest you to not disabling telemetry. It really helps VScode team to improve the product.

Collapse
mehdico profile image
Mehdi Mousavi

Great!
Some plugin suggestions :

TODO Highlight >>> Todo Tree
Guides >>> Indent-rainbow
Visual Studio IntelliCode >>> TabNine

Collapse
frostyworks profile image
Révaz

Thank you very much for this tutorial. This kind of, increased my productivity level, I'd say. Thanks!

Collapse
goyslee profile image
Zsolt Kindla

Nice, thanks for this! Have you got any suggestions for support of ejs formatting in VSCode? Nothing works properly that I found so far.