DEV Community

Cover image for My Favorite VSCode Extensions and Settings
Nick Janetakis
Nick Janetakis

Posted on • Updated on • Originally published at

My Favorite VSCode Extensions and Settings

This article was originally posted on November 20th 2018 at:

Edit: I no longer use this set up. In March 2019 I switched to using Vim because VSCode was too inefficient for writing. Read why I switched to Vim.

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.

VSCode Extensions

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


erb adds syntax highlighting support for the ERB template language.

Excel Viewer

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 po, pot and potx files (i18n related).

HTML Snippets

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 file will look like on GitHub. Really useful!


nginx.conf adds syntax highlighting for nginx config files.

Partial Diff

Partial Diff lets you compare text differences between files, your clipboard and selected text.

Rainbow CSV

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

Spell Right is a super fast offline spell checker.


systemd-unit-file adds syntax highlighting for systemd unit files.

Todo Tree

Todo Tree will look for TODO and 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 yamllint and 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.

VSCode Settings

Here's my latest settings since I last used VSCode:

    "editor.fontSize": 15,
    "terminal.integrated.fontSize": 15,
    "editor.minimap.enabled": false,
    "editor.mouseWheelZoom": true,
    "editor.rulers": [80],
    "editor.tabSize": 2,
    "editor.cursorWidth": 5,
    "editor.cursorBlinking": "solid",
    "editor.renderWhitespace": "boundary",
    "explorer.autoReveal": false,
    "workbench.colorCustomizations": {
        "activityBar.background": "#021e45",
        "statusBar.background": "#021e45",
        "statusBar.foreground": "#e0e0e0",
        "editorLineNumber.foreground": "#d1d1d1",
        "editorOverviewRuler.errorForeground": "#fff"
    "[yaml]": {
        "editor.autoIndent": false
    "files.associations": {
        "*.erb": "erb"
    "files.exclude": {
        "**/.git": true,
        "**/.svn": true,
        "**/.hg": true,
        "**/CVS": true,
        "**/.DS_Store": true,
        "**/_site": true,
        "**/tmp": true,
        "**/*.pyc": true,
        "**/*.asset-cache": true,
        "**/*.cache": true,
        "**/*.jekyll-cache": true,
        "**/*.tweet-cache": true,
        "**/__pycache__": true,
        "**/.pytest_cache": true,
        "**/*.egg-info": true,
        "**/*.coverage": true,
        "**/celerybeat-schedule": true,
        "**/node_modules": true,
        "**/bower_components": true
    "files.insertFinalNewline": true,
    "files.trimFinalNewlines": true,
    "files.trimTrailingWhitespace": true,
    "files.eol": "\n",
    "[markdown]": {
        "files.trimTrailingWhitespace": false
    "telemetry.enableTelemetry": false,
    "": "C:\\WINDOWS\\System32\\wsl.exe",
    "terminal.external.windowsExec": "C:\\WINDOWS\\System32\\wsl.exe",
    "workbench.list.openMode": "doubleClick",
    "workbench.sideBar.location": "left",
    "workbench.startupEditor": "newUntitledFile",
    "git.ignoreMissingGitWarning": true,
    "": "onSave",
    "shellcheck.useWSL": true,
    "extensions.ignoreRecommendations": true,
    "workbench.activityBar.visible": true,
    "workbench.colorTheme": "GitHub Plus Elixir Adapted",
    "editor.accessibilitySupport": "off",
    "window.title": "${activeEditorLong}",
    "editor.detectIndentation": false,
    "editor.autoIndent": false,
    "problems.decorations.enabled": false,
    "editor.renderControlCharacters": false,
    "breadcrumbs.enabled": false,
    "editor.autoClosingQuotes": "never",
    "editor.autoSurround": "never",
    "editor.autoClosingBrackets": "never",
    "shellcheck.disableVersionCheck": true,
    "todo-tree.defaultHighlight": {
      "foreground": "green",
      "type": "none"
    "todo-tree.customHighlight": {
      "TODO": {},
      "FIXME": {}

What are your favorite VSCode extensions and settings? Let me know below!

Top comments (4)

alanmbarr profile image
Alan Barr

Good list thanks for sharing!

nickjj profile image
Nick Janetakis

No problem, thanks for reading.

tammalee profile image
Tammy Lee

Thank you for posting this list! I found a few extensions I can use that I'd never heard of before!

desouzafelipe profile image

Very useful! Like an extension curatorship. Thanks.