loading...
Cover image for My Visual Studio Code Setup

My Visual Studio Code Setup

aspittel profile image Ali Spittel Updated on ・4 min read

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 experiences with Atom, Spyder, Sublime Text, Emacs, and Idle (the built-in Python editor) which I used for the years before it. I thought I would do a quick write up on my setup and the extensions I love!

Theme

Since I teach people how to code professionally and give a lot of talks on programming, having a readable theme is super important to me. I also love to have a theme that I enjoy aesthetically, so usually something with a lot of girly colors.

Those criteria being set, my two absolute favorite themes are Fairy Floss and Dracula.

Fairy Floss

Fairy Floss

Dracula

Dracula

Font

I am a long-term FiraCode loyalist (pre-dating VS Code!); I like the ligatures that make my code more readable at a glance. It's pretty easy to set up too, which is really nice!

The Fira Code Font

Save Configuration

Another key piece of my setup is my save configuration. The first thing that I love is autosave, which you can turn on via the file drop-down. I have it further configured so that whenever I pause when writing code, my code is saved automatically without me doing anything. I cannot explain how helpful this is for live coding and for beginners.

// in settings.json
"files.autoSave": "afterDelay",
"files.autoSaveDelay": 100,

In the same vein, I have Prettier set up to format my code on cmd + s. Ideally, this would run automatically as well, but it is close enough for now. I used StandardJS to do the same for a while, before moving over to a pro-semi-colon client.

// in settings.json
"editor.formatOnSave": true,

I use two spaces for most language indentation, the only exception is Python, where I use four spaces by default.

// in settings.json
"[python]": {
    "editor.insertSpaces": true,
    "editor.tabSize": 4
},

Emmet

I am incredibly reliant on Emmet, so I love that it is built in for VS Code. I also have it set up to work in more than just my html files:

// in settings.json
"emmet.includeLanguages": {
  "html": "html",
  "erb": "erb",
  "javascript": "javascriptreact",
  "vue": "html",
  "ejs": "html"
},

Integrated Terminal

I use iTerm with Zsh on my Mac, and so I have VS Code's integrated terminal set up to use that setup.

// in settings.json
"terminal.external.osxExec": "iTerm.app",
"terminal.integrated.shell.osx": "zsh",

Extensions

I have a lot of language and framework-specific extensions built-in, which are boring and very dependent on the developer, so I will skip over those in order to discuss some of my favorite all-purpose extensions.

  1. VS Live Share - this extension is straight up magical, and I truly believe it will change code education and pair programming in the near future. It allows developers to Google Doc-style collaborate on the same file on different computers. You can even open up access to your localhost ports across machines and share terminal sessions. There are some bugs, especially on Windows machines, but it's so cool that it doesn't even matter!

  2. Code Spell Checker - I write a lot of Markdown and page content directly in my text editor, and I definitely have some spelling issues. I love this extension for underlining my mistakes and offering suggestions, even when I'm offline.

  3. Import Cost - this one is more a "nice to have" rather than a necessary, but it shows the size of the npm packages I am importing in my projects.

  4. HTMLHint - I use this for live HTML validation directly in my editor. No more having to run the W3C validator on every change!

  5. GitLens - GitLens shows Git blame annotations and author highlighting within documents. Its really helpful for working on multi-author projects!

  6. CodeRunner - this extension allows you to press a play button to run your code directly within VSCode with no terminal interaction needed! Especially helpful for new programmers.

  7. EmojiSense - I love Slack's emoji-autofill post : feature, and this extension allows you to do the same in VSCode!

Conclusion

I am really happy with my setup -- I have no complaints! Feel free to tweet me any questions about my setup, and also send me your favorite tips and tricks!

If you like setup posts, I also wrote about my Zsh + iTerm2 setup.

If you liked this article, check out my full blog or subscribe to my Friday weekly wrap up!

Posted on Jul 17 '18 by:

aspittel profile

Ali Spittel

@aspittel

Passionate about education, Python, JavaScript, and code art.

Discussion

markdown guide
 

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.

 

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.

 

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.

 

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

 
 

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

 
 
 

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

 

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 😎

 
 

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

 

Thanks! indent-rainbow for Python so cool :D

 

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!

 

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.

 
 

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

 
 

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

 

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

 

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.

 

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

 

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!

 

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

 

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.

 

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.

 

I think that is an unnecessarily dismissive comment.

 

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

 

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

 

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

 

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

 

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.

 

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.

 

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.

 

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.

 

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.

 

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!

 

Very cool...

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

Will use Import Cost from now!

Thanks for the post.

 

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

 

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

 

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

 

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.

 

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

 
 
 

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

 

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! ✌️

 

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

 

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

 

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.

 

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