DEV Community

Cover image for Tips to use VSCode more efficiently

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

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

Collapse
 
selrond profile image
Sebastian Andil

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
Pedro Mass
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

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

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

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
 
selrond profile image
Sebastian Andil

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

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
Sebastian Andil

Awesome!

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

So glad to hear this!

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
 
digital_hub profile image
hub

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
 
pzelnip profile image
Adam Parkin

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

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
 
selrond profile image
Sebastian Andil

Glad to hear that!

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
 
nathanenglert profile image
Nathan Englert

Super helpful, thanks for sharing!

Collapse
 
zeecnla profile image
Cesar Melchor

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

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.

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
 
mehdico profile image
Mehdi Mousavi

Great!
Some plugin suggestions :

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

Collapse
 
brendankite profile image
brendan

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