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.

Extensions:

• Python (https://marketplace.visualstudio.com/items?itemName=ms-python.python)
  If this extension didn't exist, I wouldn't be using VS Code. It's incredibly intelligent. Like whenever I create a virtualenv on my machine, it auto-detects installed packages and allows me to jump to files inside the downloaded package (and jump around my own files by hitting f12).
  
• Sublime Text Keymap and Settings Importer (https://marketplace.visualstudio.com/items?itemName=ms-vscode.sublime-keybindings)
  For years I used Sublime Text. I actually still use it when I need to have 2 different editors open or I need to open HUGE files. Sublime can handle massive files quite elegantly. VS Code, well, cannot. Not as gracefully anyway. I also enjoy the Sublime Text shortcuts, and the VS Code keyboard shortcuts were so incredibly painful to learn because they all felt unintuitive to me. This extensions allowed me to switch from Sublime to VS Code without having to remap my neural pathways and keystroke habits.
  
• code-python-isort (https://marketplace.visualstudio.com/items?itemName=freakypie.code-python-isort)
  I use this for detecting improperly ordered imports in my python files. But I also use the command line with `isort myfile.py`
  
• Djaneiro - Django Snippets (https://marketplace.visualstudio.com/items?itemName=thebarkman.vscode-djaneiro)
  Ported over from Sublime, this extension lets you type keywords like `block` hit `[tab]` and it'll create a new `{% block name %}..{% endblock %}`. It does a lot of other things too, but I actually only use this for `{% block %}`, `{% if %}` and `{% comment %}` these days.
  
• Django Template (https://marketplace.visualstudio.com/items?itemName=bibhasdn.django-html)
  This gives me syntax highlighting for Django template files. Otherwise the default syntax highlighting from VS Code is just the regular .html highlight and that's not quite as nice when working with Django templates.
  
• EditorConfig for VS Code (https://marketplace.visualstudio.com/items?itemName=EditorConfig.EditorConfig)
  This extension will read your .editorconfig file and help you with auto-formatting your content. Tabs vs. spaces is no longer an issue for any project you start working on, it will detect what's set in the config file and use that as the project preference.
  
• Markdown Preview Enhanced (https://marketplace.visualstudio.com/items?itemName=shd101wyy.markdown-preview-enhanced)
  You'll likely never see me use this in a tutorial. But I use this quite a bit when writing markdown files for repos and projects I'm apart of.
  
• Power Mode (https://marketplace.visualstudio.com/items?itemName=hoovercj.vscode-power-mode)
  When I type in some videos you see a little flame or explosion where my characters show up. That's Power Mode. Mainly I use this to help focus my eyes on where I'm typing. If you're blessed with a brain like mine that tries to do 10,000,000 tasks at once, this extension might help focus your eyes. And if not, welp, it still looks cool!

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