Ali Spittel

Posted on Jul 17, 2018 • Edited on Jan 12, 2021 • Originally published at zen-of-programming.com

My Visual Studio Code Setup

#webdev #beginners #texteditor #vscode

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

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!

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.

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!
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.
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.
HTMLHint - I use this for live HTML validation directly in my editor. No more having to run the W3C validator on every change!
GitLens - GitLens shows Git blame annotations and author highlighting within documents. Its really helpful for working on multi-author projects!
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.
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!

Oldest comments (61)

Dominic Duffin • Jul 17 '18

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.

Sung M. Kim • Jul 17 '18 • 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.

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

Sung M. Kim • Jul 18 '18 • Edited

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

Adding VS Code Theme to CodeSandBox

Sung M. Kim

#vscode#codesandbox

Angelica Gonzalez • Jul 17 '18

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!

Alex Lohr • Jul 17 '18

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.

Ali Spittel • Jul 17 '18

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.

Alex Lohr • Jul 18 '18

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

Phillip Smith • Jul 19 '18

+1 for EditorConfig

Chase Adams • Jul 20 '18

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.

Maciek Chmura • Jul 17 '18

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

Ali Spittel • Jul 17 '18

That is so cool!

Evaldas Buinauskas • Jul 17 '18

No prettier? 🤔

Ali Spittel • Jul 17 '18

Prettier is in there!

Evaldas Buinauskas • Jul 17 '18

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

Natti Katz • Jul 17 '18

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.