My VS Code Setup

I have a lot of people asking me (Kalob Taulien, @KalobTaulien on the Wagtail Slack) about my VS Code setup. Which extensions do I use, what theme/customizations have I applied and so on.

While I'd absolutely LOVE to take credit for the complete setup I have I can't take too much credit. I use a lot of out-of-the-box stuff and actually don't customize my setups too much. I'm a strong believer in keeping things simple! But that doesn't mean living with the stock options an editor gives you.

As of writing this post (Feb. 8, 2020) these are all the tools I use with VS Code.

 video image

Extensions:

And that's it! Occasionally I'll install a React syntax highlighting extension, or a Vue.js extension whenever I'm working with some frontend code. If I'm spending a lot of time creating Vagrantfiles's of Dockerfile's I'll also install a couple extensions to help with syntax highlighting (but otherwise I use the command line for those tools). When I'm done with those extensions I tend to remove them because, well, they aren't needed in my daily work flow.

The theme

And the theme I use is called Material Theme. The color theme I use is called Ocean High Contract. It's been updated to look a bit different than what you see in the videos I create, so I've opted to use an older version of the theme because I like the darker backgrounds with lighter syntax (ie. Yellow text rather than pink text for certain keywords). I'm using version 30.0.0, but currently version 32.4.0 is available.

There's another extension called Material Theme Icons which I don't remember explicitly installing and might have come with one of the Material Theme upgrades. But you won't see me complaining — I really enjoy the icons.


Feel free to replicate my VS Code setup! And if you have any suggestions on how I might be able to create an even better editor (especially for when I create new videos) I'd love to hear about it — you can contact me at any time

— Kalob Taulien