My Favorite VSCode Extensions and Settings
VSCode has a ton of great extensions and useful settings. Here's a list of extensions that I have installed and how VSCode is configured.
I would consider myself a general purpose developer. As a freelancer I tend to dabble with a bunch of different languages and techs, so it’s nice being able to use an editor like VSCode that works well for pretty much everything.
If you open your VSCode Extension panel (
CTRL + Shift + X), you can search for any of these extensions by name to get the full details on each one and download them there.
After the list, there’s also a 1 line script that you can use to install all of these extensions and of course you can edit out the extensions you don’t want.
Let’s start off with 2 themes.
I like to keep a light and dark theme around even though I use light themes most of the time. I usually code in a well light room and I find that light themes make text easier to read, but I use a dark theme when I turn off my lights.
GitHub Plus Theme Elixir Adapted [Light]
This theme is identical to the regular GitHub Plus Light theme, except it includes better syntax coloring support for Elixir. Here’s what it looks like.
Dracula Official [Dark]
You can’t go wrong with Dracula! Here’s what it looks like.
This will be an alphabetically sorted list of extensions that aren’t themes.
AutoHotkey is a scripting language for Windows. This extension adds syntax highlighting and snippets.
Docker adds syntax highlighting for Dockerfiles, but also adds auto-complete for Dockerfiles and docker-compose.yml files. Pretty handy!
DotENV adds syntax highlighting for dotfiles that have environment vars, such as
erb adds syntax highlighting support for the ERB template language.
Excel Viewer provides a preview window where you can open CSV files and sort them by columns. Perfect for light weight CSV browsing.
gettext adds syntax highlighting for
potx files (i18n related).
HTML Snippets adds a bunch of HTML5 snippets.
Jinja adds syntax highlighting and snippets for the Jinja 2 template language.
Liquid Language Support
Liquid Language Support adds syntax highlighting for the Liquid template language.
Markdown Preview Github Styling
Markdown Preview Github Styling sets up the markdown preview to look identical to what your
README.md file will look like on GitHub. Really useful!
nginx.conf adds syntax highlighting for nginx config files.
Partial Diff lets you compare text differences between files, your clipboard and selected text.
Rainbow CSV makes it really easy to view CSV files by coloring up each column differently.
shellcheck is an excellent linting tool for Shell / Bash scripts.
Spell Right is a super fast offline spell checker.
systemd-unit-file adds syntax highlighting for systemd unit files.
Todo Tree will look for
FIXME lines in your code and present them in a tree view in your sidebar.
vscode-elixir adds syntax highlighting and more for the Elixir programming language.
vscode-gemfile lets you hover over a gem in your
Gemfile and get a link to it on RubyGems.
VSCodeFirstUpper lets you convert strings of text into different styles of title casing. I use this for all of my blog post titles.
WordCounter adds a count for words, characters, lines and reading time to your status bar.
Quickly Installing These Extensions
Here’s a 1 liner that will install all of the above extensions. Just copy / paste it into your terminal. Feel free to remove the extensions you don’t want from the list below.
code \ --install-extension abusaidm.html-snippets \ --install-extension ban.spellright \ --install-extension bierner.markdown-preview-github-styles \ --install-extension bung87.vscode-gemfile \ --install-extension coolbear.systemd-unit-file \ --install-extension CraigMaslowski.erb \ --install-extension dracula-theme.theme-dracula \ --install-extension fimars.github-plus-theme-elixir-adapted \ --install-extension GrapeCity.gc-excelviewer \ --install-extension Gruntfuggly.todo-tree \ --install-extension hangxingliu.vscode-nginx-conf-hint \ --install-extension kirozen.wordcounter \ --install-extension mechatroner.rainbow-csv \ --install-extension mikestead.dotenv \ --install-extension mjmcloug.vscode-elixir \ --install-extension mrorz.language-gettext \ --install-extension neilding.language-liquid \ --install-extension PeterJausovec.vscode-docker \ --install-extension ryu1kn.partial-diff \ --install-extension samuelcolvin.jinjahtml \ --install-extension shanoor.vscode-nginx \ --install-extension slevesque.vscode-autohotkey \ --install-extension timonwong.shellcheck \ --install-extension wholroyd.jinja \ --install-extension zkirkland.vscode-firstupper
I generated that list by running this command:
code --list-extensions | xargs -L 1 echo code --install-extension
Wait, Where Are the Python and Ruby Language Extensions?
I don’t use them because all of my applications are running inside of Docker, so having things like auto-complete doesn’t help me since VSCode isn’t able to figure out where things are running in Docker containers yet.
Eventually it will be able to figure that out and then I will look into using those extensions.
I only use the vscode-elixir extension to get syntax highlighting support for Elixir. By default VSCode provides syntax highlighting support for Python and Ruby without any extensions.
One benefit of this set up is that VSCode is blazing fast when typing. There are never any micro-stutters or trying to battle with auto-complete windows that bring up incorrect info.
This is also why I don’t use the Ansible extension, even though I work with Ansible all the time. Its auto-complete windows were slowing me down. I leave linting and code formatting warnings to be done by tools like
ansible-lint outside of VSCode.
Wait, What about Debugging?
Truthfully, debugging web applications is hard.
I mean, sure, I loved the debugger back when I was working with native Windows apps using VB6 and C# but I never found a debugging solution for web apps that didn’t suck, so based on experience I found over time that I’m faster just using print statements most of the time.
I also occasionally use interactive debuggers that come built into the programming language that I’m using, but that isn’t connected with VSCode.
All of my settings can be found in my dotfiles repo on GitHub.
What are your favorite VSCode extensions and settings? Let me know below!