DEV Community

Tips to use VSCode more efficiently

Sebastian Andil on May 04, 2019

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...

Read full post

Boris Krstić • May 5 '19

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"
        }
      }
    ]
  }

Sebastian Andil • May 9 '19

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"
        }
      }
    ]
  }

Boris Krstić • May 9 '19

And I'll be using it! Thanks :)

Drawcard • May 9 '19

This is fantastic

Gherciu Gheorghe • May 9 '19

awesome!thanks! ;)

Vladimir López Salvador • May 6 '19 • Edited

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

Sebastian Andil • May 6 '19

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!

Vladimir López Salvador • May 6 '19

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.

Pedro Mass • May 6 '19

Might be this one: marketplace.visualstudio.com/items...

jericomanapsal • May 5 '19

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.

Sebastian Andil • May 5 '19

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

saint4eva • May 5 '19

You can turn off telemetry in vscode if you want.

Alex Barashkov • May 5 '19

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

jericomanapsal • May 6 '19

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

Karam • May 7 '19

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

Pedro Mass • May 6 '19

👏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

Varun • May 9 '19

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",

Sebastian Andil • Mar 24 '21

Check out Windows Subsystem for Linux (WSL)! You won't need git bash

Anand Kumar • May 6 '19 • Edited

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.

tarifa-man • May 26 '20

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.

Sean O'Donnell • Jan 12 '20

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. =)

David J Eddy • May 5 '19

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

Sebastian Andil • May 6 '19

Awesome!

hub • Apr 4 '20

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

Ram Chandra Neupane • Dec 2 '19

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

Lera Atwater • May 6 '19

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

Sebastian Andil • May 6 '19

So glad to hear this!

tarifa-man • Mar 25 '20

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

Cesar Melchor • May 12 '19

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

Andrei Gatej • May 6 '19

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?

Adam Parkin • May 7 '19

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

Révaz • Feb 24 '20

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

Sebastian Andil • Mar 24 '21

Glad to hear that!

Nathan Englert • May 8 '19

Super helpful, thanks for sharing!

Anthony-Tuan Ha • May 9 '19

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

brendan • May 8 '19

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

Mehdi Mousavi • Feb 18 '20

Great!
Some plugin suggestions :

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

Zsolt Kindla • May 5 '19

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