# an opinionated list of essential VS Code extensions

VS Code is one of the most popular editors/IDEs out there (see, for instance, [WakaTime 2020 Programming Stats](https://wakatime.com/blog/43-wakatime-2020-programming-stats), [Stack Overflow 2021 Developer Survey](https://insights.stackoverflow.com/survey/2021#technology-most-loved-dreaded-and-wanted) & [Python Developers Survey 2020 Results](https://www.jetbrains.com/lp/python-developers-survey-2020/#DevelopmentTools)). It is currently my favourite code editor – I use it for almost everything!

In this post, I present a list of VS Code extensions that I generally depend on, and always ensure that they are installed in my favourite text editor! So, without further ado, here we go ...

## General Purpose ⚙️

### Spell Checking ✍🏽

- [`streetsidesoftware.code-spell-checker`](https://marketplace.visualstudio.com/items?itemName=streetsidesoftware.code-spell-checker) – **Code Spell Checker** › Spelling checker for source code

### Comments 💬

- [`aaron-bond.better-comments`](https://marketplace.visualstudio.com/items?itemName=aaron-bond.better-comments) – **Better Comments** › Improve your code commenting by annotating with alert, informational, TODOs, and more!

### Changelogs 📜

- [`axetroy.vscode-changelog-generator`](https://marketplace.visualstudio.com/items?itemName=axetroy.vscode-changelog-generator) – **changelog-generator** › An extension to generate changelog.

### Add a splash of colour 🎨

- [`CoenraadS.bracket-pair-colorizer-2`](https://marketplace.visualstudio.com/items?itemName=CoenraadS.bracket-pair-colorizer-2) – **Bracket Pair Colorizer 2** › A customizable extension for colorizing matching brackets
- [`kamikillerto.vscode-colorize`](https://marketplace.visualstudio.com/items?itemName=kamikillerto.vscode-colorize) – **colorize** › A vscode extension to help visualize css colors in files.
- [`naumovs.color-highlight`](https://marketplace.visualstudio.com/items?itemName=naumovs.color-highlight) – **Color Highlight** › Highlight web colors in your editor
- [`oderwat.indent-rainbow`](https://marketplace.visualstudio.com/items?itemName=oderwat.indent-rainbow) – **indent-rainbow** › Makes indentation easier to read

### Lorem ipsum ❇️

- [`deerawan.vscode-faker`](https://marketplace.visualstudio.com/items?itemName=deerawan.vscode-faker) – **vscode-faker** › Generate fake data for name, address, lorem ipsum, commerce and much more

### Coding style 📄

- [`EditorConfig.EditorConfig`](https://marketplace.visualstudio.com/items?itemName=EditorConfig.EditorConfig) – **EditorConfig for VS Code** › EditorConfig Support for Visual Studio Code
- [`esbenp.prettier-vscode`](https://marketplace.visualstudio.com/items?itemName=esbenp.prettier-vscode) – **Prettier - Code formatter** › Code formatter using prettier
- [`HookyQR.beautify`](https://marketplace.visualstudio.com/items?itemName=HookyQR.beautify) – **Beautify** › Beautify code in place for VS Code

### Code execution 🚀

- [`formulahendry.code-runner`](https://marketplace.visualstudio.com/items?itemName=formulahendry.code-runner) – **Code Runner** › Run C, C++, Java, JS, PHP, Python, Perl, Ruby, Go, Lua, Groovy, PowerShell, CMD, BASH, F#, C#, VBScript, TypeScript, CoffeeScript, Scala, Swift, Julia, Crystal, OCaml, R, AppleScript, Elixir, VB.NET, Clojure, Haxe, Obj-C, Rust, Racket, Scheme, AutoHotkey, AutoIt, Kotlin, Dart, Pascal, Haskell, Nim, ...

### Metrics 📈

- [`WakaTime.vscode-wakatime`](https://marketplace.visualstudio.com/items?itemName=WakaTime.vscode-wakatime) – **WakaTime** › Metrics, insights, and time tracking automatically generated from your programming activity.

### Git 🗃️

- [`rubbersheep.gi`](https://marketplace.visualstudio.com/items?itemName=rubbersheep.gi) – **gi** › Generating .gitignore files made easy

### Screen capture 📸

- [`pnp.polacode`](https://marketplace.visualstudio.com/items?itemName=pnp.polacode) – **Polacode** › 📸  Polaroid for your code

### Miscellaneous Tools 🛠️

- [`alefragnani.Bookmarks`](https://marketplace.visualstudio.com/items?itemName=alefragnani.Bookmarks) – **Bookmarks** › Mark lines and jump to them
- [`Gruntfuggly.todo-tree`](https://marketplace.visualstudio.com/items?itemName=Gruntfuggly.todo-tree) – **Todo Tree** › Show TODO, FIXME, etc. comment tags in a tree view
- [`humao.rest-client`](https://marketplace.visualstudio.com/items?itemName=humao.rest-client) – **REST Client** › REST Client for Visual Studio Code
- [`kisstkondoros.vscode-gutter-preview`](https://marketplace.visualstudio.com/items?itemName=kisstkondoros.vscode-gutter-preview) – **Image preview** › Shows image preview in the gutter and on hover
- [`tombonnike.vscode-status-bar-format-toggle`](https://marketplace.visualstudio.com/items?itemName=tombonnike.vscode-status-bar-format-toggle) – **Formatting Toggle** › A VS Code extension that allows you to toggle the formatter (Prettier, Beautify, …) ON and OFF with a simple click.
- [`wmaurer.vscode-jumpy`](https://marketplace.visualstudio.com/items?itemName=wmaurer.vscode-jumpy) – **jumpy** › Jumpy provides fast cursor movement, inspired by Atom's package of the same name.

## Themes 💄

- [`akamud.vscode-theme-onedark`](https://marketplace.visualstudio.com/items?itemName=akamud.vscode-theme-onedark) – **Atom One Dark Theme** › One Dark Theme based on Atom
- [`PKief.material-icon-theme`](https://marketplace.visualstudio.com/items?itemName=PKief.material-icon-theme) – **Material Icon Theme** › Material Design Icons for Visual Studio Code
- [`sdras.night-owl`](https://marketplace.visualstudio.com/items?itemName=sdras.night-owl) – **Night Owl** › A VS Code theme for the night owls out there. Now introducing Light Owl theme for daytime usage. Decisions were based on meaningful contrast for reading comprehension and for optimal razzle dazzle. ✨
- [`vscode-icons-team.vscode-icons`](https://marketplace.visualstudio.com/items?itemName=vscode-icons-team.vscode-icons) – **vscode-icons** › Icons for Visual Studio Code

## Language Support ✨

- [`asciidoctor.asciidoctor-vscode`](https://marketplace.visualstudio.com/items?itemName=asciidoctor.asciidoctor-vscode) – **AsciiDoc** › Provides rich language support for AsciiDoc.
- [`attilabuti.vscode-mjml`](https://marketplace.visualstudio.com/items?itemName=attilabuti.vscode-mjml) – **MJML** › MJML preview, lint, compile for Visual Studio Code.
- [`bibhasdn.django-html`](https://marketplace.visualstudio.com/items?itemName=bibhasdn.django-html) – **Django Template** › Django template language support for Visual Studio Code
- [`bungcip.better-toml`](https://marketplace.visualstudio.com/items?itemName=bungcip.better-toml) – **Better TOML** › Better TOML Language support
- [`Dart-Code.dart-code`](https://marketplace.visualstudio.com/items?itemName=Dart-Code.dart-code) – **Dart** › Dart language support and debugger for Visual Studio Code.
- [`Dart-Code.flutter`](https://marketplace.visualstudio.com/items?itemName=Dart-Code.flutter) – **Flutter** › Flutter support and debugger for Visual Studio Code.
- [`DotJoshJohnson.xml`](https://marketplace.visualstudio.com/items?itemName=DotJoshJohnson.xml) – **XML Tools** › XML Formatting, XQuery, and XPath Tools for Visual Studio Code
- [`GrapeCity.gc-excelviewer`](https://marketplace.visualstudio.com/items?itemName=GrapeCity.gc-excelviewer) – **Excel Viewer** › View Excel spreadsheets and CSV files within Visual Studio Code workspaces.
- [`IBM.output-colorizer`](https://marketplace.visualstudio.com/items?itemName=IBM.output-colorizer) – **Output Colorizer** › Syntax highlighting for log files
- [`idleberg.nsis`](https://marketplace.visualstudio.com/items?itemName=idleberg.nsis) – **NSIS** › Language syntax, IntelliSense and build system for Nullsoft Scriptable Install System (NSIS)
- [`lextudio.restructuredtext`](https://marketplace.visualstudio.com/items?itemName=lextudio.restructuredtext) – **reStructuredText** › reStructuredText language support (RST/ReST linter, preview, IntelliSense and more)
- [`mikestead.dotenv`](https://marketplace.visualstudio.com/items?itemName=mikestead.dotenv) – **DotENV** › Support for dotenv file syntax
- [`ms-dotnettools.csharp`](https://marketplace.visualstudio.com/items?itemName=ms-dotnettools.csharp) – **C#** › C# for Visual Studio Code (powered by OmniSharp).
- [`ms-vscode.cmake-tools`](https://marketplace.visualstudio.com/items?itemName=ms-vscode.cmake-tools) – **CMake Tools** › Extended CMake support in Visual Studio Code
- [`ms-vscode.cpptools`](https://marketplace.visualstudio.com/items?itemName=ms-vscode.cpptools) – **C/C++** › C/C++ IntelliSense, debugging, and code browsing.
- [`naco-siren.gradle-language`](https://marketplace.visualstudio.com/items?itemName=naco-siren.gradle-language) – **Gradle Language Support** › Add Gradle language support for Visual Studio Code
- [`NativeScript.nativescript`](https://marketplace.visualstudio.com/items?itemName=NativeScript.nativescript) – **NativeScript** › NativeScript support for Visual Studio Code
- [`redhat.vscode-yaml`](https://marketplace.visualstudio.com/items?itemName=redhat.vscode-yaml) – **YAML** › YAML Language Support by Red Hat, with built-in Kubernetes syntax support
- [`redhat.vscode-xml`](https://marketplace.visualstudio.com/items?itemName=redhat.vscode-xml) – **XML** › XML Language Support by Red Hat
- [`samuelcolvin.jinjahtml`](https://marketplace.visualstudio.com/items?itemName=samuelcolvin.jinjahtml) – **Better Jinja** › Syntax highlighting for jinja(2) including HTML, Markdown, YAML, Ruby and LaTeX templates
- [`shanoor.vscode-nginx`](https://marketplace.visualstudio.com/items?itemName=shanoor.vscode-nginx) – **nginx.conf** › Syntax highlighter for nginx conf files.
- [`Syler.sass-indented`](https://marketplace.visualstudio.com/items?itemName=Syler.sass-indented) – **Sass** › Indented Sass syntax Highlighting, Autocomplete & Formatter
- [`twxs.cmake`](https://marketplace.visualstudio.com/items?itemName=twxs.cmake) – **CMake** › CMake langage support for Visual Studio Code
- [`william-voyek.vscode-nginx`](https://marketplace.visualstudio.com/items?itemName=william-voyek.vscode-nginx) – **NGINX Configuration** › Syntax highlighting for NGINX configuration files
- [`xshrim.txt-syntax`](https://marketplace.visualstudio.com/items?itemName=xshrim.txt-syntax) – **Txt Syntax** › highlight text files(.txt, .out .tmp, .log, .ini, .cnf ...) and provide general utility tools for text documents
- [`XadillaX.viml`](https://marketplace.visualstudio.com/items?itemName=XadillaX.viml) – **VimL (Vim Language, Vim Script)** › Vim Script language support for VSCode.

## Snippets 🎉

- [`bibhasdn.django-snippets`](https://marketplace.visualstudio.com/items?itemName=bibhasdn.django-snippets) – **Django Snippets** › Common Django snippets for everyday use
- [`Keno.uikit-3-snippets`](https://marketplace.visualstudio.com/items?itemName=Keno.uikit-3-snippets) – **UIkit 3.0 Snippets** › UIkit 3.0 Snippets based on official documentation
- [`msaelices.nativescript-vue-snippets`](https://marketplace.visualstudio.com/items?itemName=msaelices.nativescript-vue-snippets) – **NativeScript-Vue Snippets** › Snippets for Telerik's NativeScript mobile framework with Vue
- [`sdras.vue-vscode-snippets`](https://marketplace.visualstudio.com/items?itemName=sdras.vue-vscode-snippets) – **Vue VSCode Snippets** › Snippets that will supercharge your Vue workflow
- [`tsvetan-ganev.nativescript-xml-snippets`](https://marketplace.visualstudio.com/items?itemName=tsvetan-ganev.nativescript-xml-snippets) – **NativeScript XML Snippets** › XML snippets for Telerik's NativeScript cross-platform mobile applications development framework.
- [`xabikos.JavaScriptSnippets`](https://marketplace.visualstudio.com/items?itemName=xabikos.JavaScriptSnippets) – **JavaScript (ES6) code snippets** › Code snippets for JavaScript in ES6 syntax

## Containers 🚢

- [`ms-azuretools.vscode-docker`](https://marketplace.visualstudio.com/items?itemName=ms-azuretools.vscode-docker) – **Docker** › Makes it easy to create, manage, and debug containerized applications.
- [`ms-vscode-remote.remote-containers`](https://marketplace.visualstudio.com/items?itemName=ms-vscode-remote.remote-containers) – **Remote - Containers** › Open any folder or repository inside a Docker container and take advantage of Visual Studio Code's full feature set.

## Python 🐍

- [`ms-python.python`](https://marketplace.visualstudio.com/items?itemName=ms-python.python) – **Python** › IntelliSense (Pylance), Linting, Debugging (multi-threaded, remote), Jupyter Notebooks, code formatting, refactoring, unit tests, and more.
- [`ms-python.vscode-pylance`](https://marketplace.visualstudio.com/items?itemName=ms-python.vscode-pylance) – **Pylance** › A performant, feature-rich language server for Python in VS Code
- [`ms-toolsai.jupyter`](https://marketplace.visualstudio.com/items?itemName=ms-toolsai.jupyter) – **Jupyter** › Jupyter notebook support, interactive programming and computing that supports Intellisense, debugging and more.

## TeX ✒️

- [`geoffkaile.latex-count`](https://marketplace.visualstudio.com/items?itemName=geoffkaile.latex-count) – **latex-count** › A word counter for latex files (.tex)
- [`James-Yu.latex-workshop`](https://marketplace.visualstudio.com/items?itemName=James-Yu.latex-workshop) – **LaTeX Workshop** › Boost LaTeX typesetting efficiency with preview, compile, autocomplete, colorize, and more.

## Web development 🌐

- [`christian-kohler.npm-intellisense`](https://marketplace.visualstudio.com/items?itemName=christian-kohler.npm-intellisense) – **npm Intellisense** › Visual Studio Code plugin that autocompletes npm modules in import statements
- [`ecmel.vscode-html-css`](https://marketplace.visualstudio.com/items?itemName=ecmel.vscode-html-css) – **HTML CSS Support** › CSS Intellisense for HTML
- [`dbaeumer.vscode-eslint`](https://marketplace.visualstudio.com/items?itemName=dbaeumer.vscode-eslint) – **ESLint** › Integrates ESLint JavaScript into VS Code.
- [`eg2.vscode-npm-script`](https://marketplace.visualstudio.com/items?itemName=eg2.vscode-npm-script) – **npm** › npm support for VS Code
- [`lonefy.vscode-JS-CSS-HTML-formatter`](https://marketplace.visualstudio.com/items?itemName=lonefy.vscode-JS-CSS-HTML-formatter) – **JS-CSS-HTML Formatter** › Format, prettify and beautify JS, CSS, HTML code by using shortcuts, context menu or CLI
- [`ms-vscode.sublime-keybindings`](https://marketplace.visualstudio.com/items?itemName=ms-vscode.sublime-keybindings) – **Sublime Text Keymap and Settings Importer** › Import Sublime Text settings and keybindings into VS Code.
- [`ms-vscode.vscode-typescript-tslint-plugin`](https://marketplace.visualstudio.com/items?itemName=ms-vscode.vscode-typescript-tslint-plugin) – **TSLint** › TSLint support for Visual Studio Code
- [`ritwickdey.LiveServer`](https://marketplace.visualstudio.com/items?itemName=ritwickdey.LiveServer) – **Live Server** › Launch a development local Server with live reload feature for static & dynamic pages
- [`sidthesloth.html5-boilerplate`](https://marketplace.visualstudio.com/items?itemName=sidthesloth.html5-boilerplate) – **HTML Boilerplate** › A basic HTML5 boilerplate snippet generator.
- [`stylelint.vscode-stylelint`](https://marketplace.visualstudio.com/items?itemName=stylelint.vscode-stylelint) – **stylelint** › Modern CSS/SCSS/Less linter
- [`webhint.vscode-webhint`](https://marketplace.visualstudio.com/items?itemName=webhint.vscode-webhint) – **webhint** › Run [webhint](https://webhint.io/) in Visual Studio Code.
- [`Zignd.html-css-class-completion`](https://marketplace.visualstudio.com/items?itemName=Zignd.html-css-class-completion) – **IntelliSense for CSS class names in HTML** › CSS class name completion for the HTML class attribute based on the definitions found in your workspace.

## Markdown 📝

- [`DavidAnson.vscode-markdownlint`](https://marketplace.visualstudio.com/items?itemName=DavidAnson.vscode-markdownlint) – **markdownlint** › Markdown linting and style checking for Visual Studio Code
- [`ms-vscode.Theme-MarkdownKit`](https://marketplace.visualstudio.com/items?itemName=ms-vscode.Theme-MarkdownKit) – **Markdown Theme Kit** › Theme Kit for VS Code optimized for Markdown. Based on the TextMate themes.
- [`ms-vscode.wordcount`](https://marketplace.visualstudio.com/items?itemName=ms-vscode.wordcount) – **Word Count** › Markdown Word Count Example - a status bar contribution that reports out the number of works in a Markdown document as you interact with it.
- [`yzhang.markdown-all-in-one`](https://marketplace.visualstudio.com/items?itemName=yzhang.markdown-all-in-one) – **Markdown All in One** › All you need to write Markdown (keyboard shortcuts, table of contents, auto preview and more)

## Vue.js 💚

- [`sdras.vue-vscode-extensionpack`](https://marketplace.visualstudio.com/items?itemName=sdras.vue-vscode-extensionpack) – **Vue VS Code Extension Pack** › A collection of extensions for working with Vue Applications in VS Code
- [`octref.vetur`](https://marketplace.visualstudio.com/items?itemName=octref.vetur) – **Vetur** › Vue tooling for VS Code

## Android 📱

- [`jeroen-meijer.pubspec-assist`](https://marketplace.visualstudio.com/items?itemName=jeroen-meijer.pubspec-assist) – **Pubspec Assist** › Easily add and update dependencies to your Dart and Flutter project.
- [`richardwillis.vscode-gradle`](https://marketplace.visualstudio.com/items?itemName=richardwillis.vscode-gradle) – **Gradle Tasks** › Run Gradle tasks in VS Code

Well, there you have it! What VS Code extensions do you depend on that aren't on this list? Do you have alternatives to some of the extensions I've listed? Well, let me know in the comments below 🙂.