DEV Community

Cover image for My Visual Studio Code Setup

My Visual Studio Code Setup

Ali Spittel on July 17, 2018

I love the text editor setup I've been using for the past year and a half, so I want to show off my setup! Visual Studio Code has far surpassed my ...
Collapse
 
lexlohr profile image
Alex Lohr

There are 3 other essentials for me:

  • Bracket Pair Colorizer (never search longer than a few seconds for a missing bracket again)
  • EditorConfig for VS Code
  • Git History + Git Tags (which means that VS Code + console git are my default git client)

Otherwise, nice article and solid setup.

Collapse
 
curiouslychase profile image
Chase Adams

Good list of extensions (and some good additions)— the extension that I've found essential when working with other people is the "Open in Github" extension. It works for any VCS backed website (like gitlab, bitbucket, etc) and makes it really easy to copy/pasta the line number so someone can check out what I'm talking about in the browser.

Collapse
 
aspittel profile image
Ali Spittel

Ah awesome! I had Bracket Pair Colorizer at one point, and I recommend it to my students, but the colors are a bit off from my themes which annoys me haha.

Collapse
 
lexlohr profile image
Alex Lohr

You can define the colors matching your theme using the bracketPairColorizer.consecutivePairColors configuration. The default is

"bracketPairColorizer.consecutivePairColors": [
    "()",
    "[]",
    "{}",
    [
      "Gold",
      "Orchid",
      "LightSkyBlue"
    ],
    "Red"
  ]

which matches very few themes :)

Collapse
 
walkhard13 profile image
Phillip Smith

+1 for EditorConfig

Collapse
 
droidmakk profile image
Afroze Kabeer Khan. M • Edited

Fira Code + Font Litigatures enabled 😎😎.
Use settings sync and bracket colorizer. Also material icon theme 🤗

Collapse
 
blint profile image
Ibrohim Hanafi

Same, i also use them.

Collapse
 
jhossyd3v profile image
Jhossymar Contreras

I went to install those ones too, I love these kind of posts

Collapse
 
dance2die profile image
Sung M. Kim • Edited

That's a nice setup. I like Fairy Floss particularly much 👍.

And a tip if you use CodeSandBox.
You can use your own VS code Theme in CodeSandBox.

cs

I was able to get Wes Bos's Cobalt2 theme working there 😎

Collapse
 
dance2die profile image
Sung M. Kim • Edited

I loved the theme so much that I wanted it on CodeSandBox.
So wrote a post about how to do it 😎

Collapse
 
kayis profile image
K

This is pretty awesome!

I'll definitly use the Dracula theme :D

Also, some of the extensions are pretty rad.

If you're using Python, you may be interested in indent-rainbow

indent-rainbow

Collapse
 
tuanlv5490 profile image
Tuan Luu • Edited

Thanks! indent-rainbow for Python so cool :D

Collapse
 
angieg0nzalez profile image
Angelica Gonzalez

Love your setup! Those are my two favorite themes too, I switch back and forth depending on my mood/time of day. Definitely going to be adding spellchecker and html hint to my setup. Thanks for the recs!

Collapse
 
sheafitzek profile image
Shea Fitzek

You might be interested in the Save and Run extension, which is a fork of Run on Save, to auto run Prettier for you. It allows you to configure multiple commands that run when a file is saved based on a regexp. One of my favorite uses for it is to run a bash script that auto-generates a TOC for my README at every autosave.

Collapse
 
aspittel profile image
Ali Spittel

So cool!

Collapse
 
toby profile image
toby

Nice setup!I have some of those and a few more:
'Better comments' is good for improving syntax colours with most themes. 'Overtype' makes the insert key work correctly. 'Settings sync' allows you to sync your settings and plugins across instances using a private GitHub gist - this is AWESOME!

Also, setting 'window.titleBarStyle' to "custom" in the latest version gives you a bit cleaner interface on Windows.

Further, instead or reaching settings by ctrl+shift+p then Preferences: open settings, replace that last bit with Preferences: open settings (Preview) for a nicer settings interface :)

Collapse
 
jaydeepkarena profile image
Jaydeep Karena

window.titleBarStyle is beautiful, just loved it. I always want big space for my code.

Collapse
 
maciekchmura profile image
Maciek Chmura

I love Dracula too. Check out quokkajs.com/ for quick testing code snippets :D

Collapse
 
aspittel profile image
Ali Spittel

That is so cool!

Collapse
 
bmanthejedi profile image
B.Manchester

Hi! Thanks for sharing, I'm excited to try some of the extensions I read about in your post and in the comments. To add to the list, I use an extension called Settings Sync that I find super useful to keep my settings, extensions, and key maps across multiple machines...well, in sync.

marketplace.visualstudio.com/items...

Collapse
 
randyhudson profile image
randyhudson

Regarding indenting with two spaces, is that so others can’t customize the indentation for a wider monitor, or because you like pressing backspace twice instead of once? Do you also double space your code? I prefer to use the Medium Mathematical Space character for indents, which is easy to type using ALT+205F

Collapse
 
sloan profile image
Sloan the DEV Moderator

Hey, we consider this comment to be unproductive. Please consider a more constructive and considerate approach next time. You can consult the code of conduct for further clarification.

Collapse
 
mindlace profile image
Ethan Fremen

Wait, you prefer to use something that is neither a tab nor a space for indentation? And you consider typing 4 characters to be simpler than typing space twice (or tab once, if you have vscode set up right)?

I find it challenging to believe this is your actual practice.

Collapse
 
dominicduffin1 profile image
Dominic Duffin

I think that is an unnecessarily dismissive comment.

Collapse
 
aspittel profile image
Ali Spittel

I actually type in tabs, but use my text editor to convert to spaces!

Collapse
 
shreyasminocha profile image
Shreyas Minocha

There's a preference to enable tabstops. It removes indentation with a single backspace.

Collapse
 
rrackiewicz profile image
rrackiewicz • Edited

I <3 TODO Highlight which allows you to leaves colorful standout comments in my code for things such as: TODO and FIXME by default. You can add custom tags in colors in your settings file. A great way to direct your attention to things you need to defer action on.

Collapse
 
kylegalbraith profile image
Kyle Galbraith

Ali, I am curious if you are using any pipenv projects in VSCode workspaces? I am seeing strange behavior when I have multiple pipenv files in the same Workspace (i.e. unable to discover/run unit tests).

Collapse
 
aspittel profile image
Ali Spittel

I don't, sorry! I just use the builtin virtualenv for Python3 and then a requirements.txt file. It's just what I'm used to!

Collapse
 
szelpe profile image
Szél Péter

Hi Ali, thanks for the article, it is really helpful. You mentioned that you use VS Live Share for teaching programming. Would you mind sharing the details? I also teach programming and really interested in new techniques.

Collapse
 
aspittel profile image
Ali Spittel

Right now my students use it for their group projects to pair program! I want to start using it for lectures too, so that students can follow my code on their own computers.

Collapse
 
embiem profile image
Martin Beierling-Mutz

Another extension I like a lot: WhiteViz, which visualizes whitespace upon selection.

I can have my editor looking very clean and only show whitespace characters when I want by selecting lines.

Collapse
 
dominicduffin1 profile image
Dominic Duffin

You've got some great sounding stuff in your setup - I must check some of them out! I'm liking VS Code a lot, but I haven't really changed anything from defaults apart from adding the Python extension yet.

Collapse
 
katzy687 profile image
Natti Katz

VS Code is my go to web-dev editor. I've been writing a lot of Python automation nowadays and transitioned to Pycharm for their integrated pip and virtual environment management. Their debugger also feels more heavy duty than vs code. Both great editors / IDEs.

Collapse
 
tijanmdr profile image
Tijan Manandhar • Edited

For the people having hands on Intellij Products, Intellij Keymaps is a very useful extension. Will be very useful if you want to migrate

Collapse
 
gulajavaministudio profile image
Gulajava Ministudio

Here my current setup.

demo image

demo image

You can try extension that i use here :
Gitlens
indent-rainbow
Visual Studio IntelliCode
ES6 Snippets
Vetur
Relative Path
Bracket Pair Colorizer 2
Live Server
Path Intellisense
REST Client


And for theme and font, i'm using Mayukai Theme and Iosevka Mayukai Font

Collapse
 
genta profile image
Fabio Russo

Very cool...

I'm in love with my "Andromeda" theme and his fonts.

Will use Import Cost from now!

Thanks for the post.

Collapse
 
dpashutskii profile image
Dmitrii Pashutskii

Thanks for the HTMLHint! I didn't see such a great extension.

Collapse
 
imatmati profile image
ivan matmati

Hi! Didn’t know about VS Live Share, very handy !
Need to try it with a proxy, but feel confident with web session.

Collapse
 
chrean profile image
Gabriel Sambarino

Good stuff here.

Notices one thing though: to me, value for files.autoSaveDelay is too small.
Combined with the editor.formatOnSave, it's given me some minutes of headaches as my cursor kept jumping forward and backward, completely disrupting my typing.
Raising the value to 1000 fixed it.

Collapse
 
echersmedia profile image
EchersMedia

Hi.

I'm having issues with Fira Code (or any other font) to work in my VS Code.
I'm using Linux Ubuntu 18.10, but everything else is working from this guide...

Here is my settings.json setup:
gist.github.com/EchersMedia/abdae5...

Collapse
 
buinauskas profile image
Evaldas Buinauskas

No prettier? 🤔

Collapse
 
aspittel profile image
Ali Spittel

Prettier is in there!

Collapse
 
buinauskas profile image
Evaldas Buinauskas

Ah crap. Should've read. It more carefully!

Collapse
 
stefanisarie profile image
stefanisarie

Highly recommended theme would be "Popping and Locking Theme". For webdevelopers dealing with a lot of HTML/CSS/JS, I would recommend "Live Server"! Thank you for your recommendations, I've used some of them I didn't know they exist!!!

Collapse
 
ahmadawais profile image
Ahmad Awais ⚡️

Hey, @aspittel ! 👋

Thanks for posting your setup of VSCode here. I always love this kind of posts — these help me improve my upcoming VSCode course. 🆚Code FTW.

I also couldn't help myself after looking at the themes that you use, it looks like that you're a fan of purple color as am I. I think purple can be genius, so, I spent a lot of time creating, improving, and maintaining the most popular purple theme on VSCode Marketplace called Shades of Purple 💜 →

Maybe you can try it out and let me know how it goes.

P.S. Also liked your blogging as a dev post, I have been doing that for a long time so it was so relatable. Keep up the good job.

Peace! ✌️

Collapse
 
hugecoderguy profile image
Christian Kreiling • Edited

I just switched from WebStorm to VSCode, and I'm loving it for frontend development; this article helped me find some really helpful tools! The only thing I miss is WebStorm's ability to change file references in my code whenever I move a file to a new directory.

Collapse
 
kefimochi profile image
Kate Efimova

Never heard of EmojiSense before! :O Downloaded immediately, I want more applications to have the quick emoji access like Slack does!

This was a super helpful read. Thank you for sharing this with us, Ali!

Collapse
 
dotnetdreamer profile image
Idrees Khan

My fav is Remote Development. I used it to remotly access VS Code from browsers! I even wrote article about it.

Collapse
 
bernardop profile image
Bernardo Pacheco

Nice setup! I used Dracula as a theme before too, but now I'm really into Night Owl, have you checked it out?

Collapse
 
kozlown profile image
Nigel • Edited

I love it, particulary the Fira Code + ligatures ❤️

Collapse
 
erickmendonca profile image
Erick Mendonça

Awesome article! GitLens is my favorite plugin. It's amazing.

Collapse
 
phone profile image
Kyle A. Matheny

Are there actually people out there that don't use FiraCode?! I'm going to have a go at CodeRunner, thanks

Collapse
 
alephnaught2tog profile image
Max Cerrina

Oh my God, Fairy Floss is AMAZING

Collapse
 
4lch4 profile image
Devin W. Leaman

I just stumbled upon this project earlier today and it seems to be wonderfully useful for anyone with an interest in checking out new themes:

vscodethemes.com/

Collapse
 
outthislife profile image
Talasan Nicholson
Collapse
 
brunoskonrad profile image
Bruno Konrad

✨ Fairyloss is great! Thank you very much for sharing it.

Collapse
 
tcelestino profile image
Tiago Celestino

I used to Settings Sync and I recommend!

Collapse
 
droidmakk profile image
Afroze Kabeer Khan. M

Legit... 🤗

Collapse
 
varunalex profile image
Varuna Eeriyaulla

Extension 7 : If you are a windows user, [Windows + ;] brings the emoji pallet. 😘🎁

Collapse
 
abraham profile image
Abraham Williams

Note that it's "Code Runner", I wasn't finding it by searching until I added a space.