DEV Community

Cover image for Visual Studio Code Extensions, not just the "Must have top 10..."
Tre Tuna
Tre Tuna

Posted on • Edited on

Visual Studio Code Extensions, not just the "Must have top 10..."

#vscode #productivity #webdev

It's no secret that Visual Studio Code has become one of (if not the) most popular code editors in the world today. It's everywhere, and people are extending it to do nearly anything that deals with text! When you boot it up for the first time, it already has a lot of power, but it truly gets to spread its wings with its fantastic extension system. Sure, extensions are no new thing in the world of code editors, but I think that the community around VSCode has hit a stride that is hard to match.

However, it can be perhaps daunting or time-intensive for someone new to sort through and know what extensions can help them when they first get started. I can't count how many times people have asked me about useful extension recommendations. I've always ended up answering this by taking a screenshot of my extension panel and sending that to the person with a few recommendations, suggestions scratches the surface of them as I only really get to talk about a few core ones. I've tried to look for some good posts on recommended extensions. There are tons of "Top 10/20" posts and even a few "Top 50", but never a comprehensive list that approaches making a cohesive development environment. There's always the good ol' Awesome VSCode list, but that list doesn't go into things in a coherent manner of building a development space, it's more of a brain dump of everything (as it should be). While this is also basically a brain dump of my extensions, I tried to give it a little extra organization.

In this post, we're going to dive into all the extensions I have installed and use regularly and a few that I just know to be good. Now, a couple of things here before we get started:

First, I don't always have all of these enabled, some I just have installed so that they are quickly accessed when I need them.

VSCode will enable/disable extensions on a global, and project/workspace scale, which is fantastic! So we can do things like only activating those C++ extensions when we're working in C++ projects—or merely having the full gamut of Markdown extensions when I'm in my notes/writing workspace.

Second, I'm in no way claiming these are the best extensions out there (though you will see many that you may recognize from those "Top extensions" posts out there). Some of these extensions have 5-10 million installs, one of them has less than 200. These are simply the ones that I've found very useful in my own experience, and that fit my workflow well. There are thousands of extensions out there to explore! If you don't see one of your favorites, let me know! I'd love to check it out! As you can tell, I kind of like them.

Alright, let's get to it then and learn about some excellent extensions!

First and Foremost

  • Settings Sync - (Update 8/24 - A few people mention in comments that VSCode does this natively now. Yes, this is true, but if you read on here you'll see why I recommend using both.) - This is the first install for me on any new instance of VSCode. Why? Because as you may be able to guess, this is a way to sync your VSCode settings between machines using GitHub Gists. Giving you an easy way to store and restore all of your VSCode settings (preferences, snippets, keybindings, and extension settings) for use on any machine you use. You can even share your settings with other people through public Gists. It's great to be able to tweak some settings on my work computer, upload them, then have them available when I boot up my personal computer. The VSCode team has also implemented its native version of syncing settings, and it's pretty good. It saves the UI state and allows time-traveling; however, I like to have my information in more than 1-2 places for safety, so this one will be sticking around.

Visual

Time to make the editor look beautiful (and helpful too)!

  • Night Owl - VSCode comes with some great built-in themes, but there's a reason this has become one of the most popular in the community. Sarah Drasner is a fantastic person, and she created this as a highly accessible theme for readability during the night/low-light circumstances, especially for people with colorblindness. I've gone through many themes in the three years I've been using VSCode, but since it's release, I keep coming back to this one. It also has a light theme that is great, and I use it often during the daytime, and I try to keep my screens matching the light around me.
    • Andromeda - Another theme that I like as well. It's a little higher contrast with a darker and brighter text, but I still keep going back to Night Owl.
    • If you have a favorite theme from another editor, I would suggest searching for it as there's probably a version for VSCode!
    • If these aren't for you, I would suggest looking at Best VSCode Themes: 50 VS Code themes for 2020
  • iTerm Theme Sync - Automatically syncs your VSCode theme to iTerm! ?? It's relatively new, having been released in June 2020, but I still can't believe it has less than 200 installs as of the date of writing this!
  • Material Icon Theme - So, we've got some good colors going for your editor, let's get some better visual cues on your file tree. That's where icon themes come in, of which, Material Icons are my favorite. There's an icon for nearly every file type you can hope for, they are colored, and even some icons for folders as well. This makes it easy to look through the file tree and see precisely what format a file is or what types of files a folder contains.
    • VSCode Icons - Is the most popular one in the marketplace at the time of writing this, so that's also another great option you can check out.
  • Peacock - Alright, going back to another visual extension. Peacock makes it easy to distinguish which project is open in each window. It stores a color theme for the activity bar, title bar, status bar, and borders on a per-project basis. Making it super easy to switch between open projects and know which one you are looking at just by the color scheme.
  • Bracket Pair Colorizer 2 - Colors matched brackets ((){}[]) for easier visual matching. You can set it up with custom colors, and it has a few different modes for rotating through those colors. There are also options to display brackets in the gutter or the ruler. If you haven't realized yet, I love visual cues for what's going on in the code. Note: This is version 2 of this extension, make sure you are getting this one and not the original as the former is no longer maintained.
  • Highlight Matching Tag - Highlights matching opening and closing tags in HTML and JSX and can add the path down the tree to the status bar. Defaults to a yellow underline, but has lots of options for customization.
  • Color Highlight - Highlights color values in the color they represent.
  • Indent Rainbow - Adds color to the indentions to the left of your code. Through the settings, you can adjust an array of colors that you want to use for depths of indentation. I use very muted greys for this: 
  "indentRainbow.colors": [
    "rgba(50,50,50,0.05)",
    "rgba(50,50,50,0.1)",
    "rgba(50,50,50,0.15)",
    "rgba(50,50,50,0.2)",
    "rgba(50,50,50,0.25)",
    "rgba(50,50,50,0.3)",
    "rgba(50,50,50,0.35)",
    "rgba(50,50,50,0.4)",
    "rgba(50,50,50,0.45)",
    "rgba(50,50,50,0.5)",
    "rgba(50,50,50,0.55)",
    "rgba(50,50,50,0.6)",
    "rgba(50,50,50,0.65)",
    "rgba(50,50,50,0.7)",
    "rgba(50,50,50,0.75)",
    "rgba(50,50,50,0.8)",
    "rgba(50,50,50,0.85)",
    "rgba(50,50,50,0.9)",
    "rgba(50,50,50,0.95)",
    "rgba(50,50,50,1.0)"
  ],
  "indentRainbow.errorColor": "rgba(128,32,32, .6)",
  • Image Preview - Shows a tiny version of a linked image in the gutter of the file. Excellent to quickly ensure you are using the right image.
  • Output Colorizer - Adds syntax highlighting to output/debug/extensions panels and *.log files.
  • Better Comments - Helps categorize comments into Alerts, Queries, TODOs, highlights, and other tags that you can set yourself. Using these tags, you can set it to highlight these comment blocks with text effects (color, background color, strikethrough, underline, bold, italic)
  • Highlight Line - I've been going back and forth with this one. The concept is simple; it underlines your cursor's current line in the editor to make it stand out and easier to find. Finding the right color and opacity to go with your theme is the main thing here. I like it, but it can be too distracting at times.
  • Indented Block Highlighting - Another one I've gone back and forth with that also has a simple concept. It adds a background highlight your cursor's current block scope. Once again, finding the right color and opacity is key to this one.

One more thing to add here, if you don't already have a beautiful coding font, that's important as well. I highly recommend downloading one from Nerd Font as they patch them all with TONS of icons for your terminal as well. My personal favorite is Victor Mono!

Alright, things are looking good. Now, let's get into some extra functionality.

Language and file support

There's LOTS of language support in VSCode with extensions. I'm only listing the ones here that I currently have installed as I only keep ones for languages I'm routinely working within.

  • Python
  • C/C++
  • YAML
  • XML Tools
  • lit-html - Syntax highlighting and IntelliSense for html inside of JavaScript and TypeScript tagged template strings.
  • Docker - Create, manage, deploy, and debug Docker containers from inside VSCode.
  • Kubernetes - Kind of like the Docker extension, but for Kubernetes. You can develop, deploy, and debug form in the editor.
  • Arduino - If you do any Arduino programming, you know their code editor SUUUUUUUCKS... This extension adds support to flash to Arduino devices right from VSCode. So much nicer.
  • DotENV - Syntax highlighting for .env files. This is a port from the popular SublimeText package of the same name.
  • MDX
  • EditorConfig for VSCode - .editorconfig is a configuration file you can include in your repo that attempts to bridge the gap of editor settings between different editors. If you work with any codebases that use this, you can use this installation to work with those files.
  • Sass/Less/Scss/Typescript/Javascript/Jade/Pug Compile Hero Pro - This gives you a nice option to "compile on save" for several superset languages for HTML/CSS/JS. With Compile Hero Pro, you can write using those formats without all the setup involved in the normal compilers. A perfect match for prototyping things out.

Code navigation

  • Code Ace Jumper - VSCode implementation of Ace Jump. I just saw this one recently via a recommendation by John Lindquist, who build the original Ace Jumper for the JetBrains family of editors. I'm still getting used to it, but it's an excellent concept, and I can already see benefits!
  • Bookmarks - Create, name, and navigate between bookmarks in your code. This extension will add icons in the gutter and a side panel showing bookmarks, either in the file or in the whole project.
  • TabOut - This is one I found while writing this, but solves an annoyance I've had for a while. It's a simple concept; since VSCode, by default, automatically adds a closing bracket/parenthesis/quotation mark, you always have to get out of it at the end somehow, right? Sure... I could just hit the right arrow (or l for you VIMers), but this lets me use the tab key instead, which seems more natural and requires less finger movement. It's only been two days since I've installed it, so we'll see if it sticks around, but it's here for now.

VIM Emulation

Disclaimer: I am not an avid VIM user, but I have dabbled a few times, and I talk to many that are. I include this because of those people; these are the ones they recommend.

  • vscodevim.vim - The most popular VIM emulator for VSCode.
  • amVim - This is the next one that I hear excellent things about from people that were dissatisfied with the top installed vscodevim.vim.
  • Neo Vim - This one uses a full embedded instance of Neovim as the backend for VSCode editing.

Code quality

  • ESLint - Linting with the most popular linting package there is.
  • TSLint - For the Typescripters!
  • LintLens - Never lookup an ESLint rule again. Get inline annotations of each rule in your configuration, including plugins!
  • Prettier - Opinionated code formatter, you either love it (like I do) or hate it.
  • Stylelint - Lets round out the liners with one for CSS/SCSS/Less!
  • Code Spell Checker - Pretty good spell checker for code. It lets you build up a dictionary of your own words both globally and on a per-workspace configuration.
  • Format Toggle - Quick on/off toggle for automatic formatting without having to go into your settings. For those times you just don't want your editor to format your code on save automatically.

Debugging

  • Turbo Console Log - This is perhaps the most invoked extension I've ever had. We spend a lot of our time debugging code, and while many people have their methods, I love my good ol' console.log. I have another snippet I will share in another post for a unique logging line, but I use the hotkeys from this extension more than that. It has four hotkeys for working with console.log statements that have become integral in my work.
    • ctrl+option+L: select one or more variables then hit this hotkey to build a console.log on the next line of each variable with a custom prefix, the parent scope, the variable name, and the value. The prefix is TCL: by default, but you can set this to whatever you want in the settings. I have mine set to ????>>>>>>>. You can also have it set to wrap the log in two other logs, which helps identify it in your console by setting it apart from other things for readability.
    • option+shift+c: Comment out all console.log statements inserted by the extension from the current document.
    • option+shift+u: Uncomment all console.log statements inserted by the extension from the current document.
    • option+shift+d: Delete all console.log statements inserted by the extension from the current document.
  • Error Lens - (Added on 8/24 from comments) - Recommended by several people after releasing this post. I just tried it out and it's definitely staying! It highlights lines with warnings and errors, inline diagnostic text, shows icons in the gutter, and messages in the status bar.
  • Debugger for Chrome/Firefox/Edge - VSCode comes with a powerful JavaScript debugger built-in. These two extensions allow you to target the respective browser with that debugger. Letting you run your code in the browser, set breakpoints and watch variables, and the call stack inside VSCode's debugger. Combine this with Turbo Console Log, and you've got some great debugging tools at your disposal right off the bat!
  • Microsoft Edge (Chromium) Tools for VSCode - Now we're in Microsoft's browser with Microsoft's editor, so you know there's gotta be a little extra. With this one, you can see browser elements, the network tool, and even screencast your browser right inside the VSCode editor! Honestly, I switched entirely over to Chromium Edge as my daily driver about six weeks ago, and I have no regrets.......... I never thought I'd say that.

IntelliSense, Autocompletion, and Snippets

  • Emojisense - Autocompletion for emojis, do I really need to say anymore? You know your code needs more emojis. ????????
  • Visual Studio IntelliCode - Microsoft's AI-assisted Intellisense for Python, TypeScript/JavaScript and Java. Shows you recommended completion items while you are coding with consideration to your code context.
  • IntelliSense for CSS class names in HTML - IntelliSense for your CSS class names that are in the workspace, even from external stylesheets brought in through <link> tags!
  • npm IntelliSense - Intellisense for your npm modules in import statements.
  • Path Intellisense - Intellisense for filenames
  • Auto Rename Tag - (Update 8/24 - I've been told in the comments that VSCode does this natively now without need for this extension! Thanks @robole !) - When you are renaming one HTML/JSX/XML tag, this extension will rename the other one for you. Simple, efficient, so lovely.
  • ES7 React/Redux/GraphQL/React-Native snippets - Awesome snippets for a lot of FE libraries. It even has full file template snippets!
  • Cypress Snippets - Do you write a lot of Cypress integration/e2e tests? Then you need this extension. If you don't, you need to start, which means you need this extension as well.

I always recommend looking for extensions for your favorite libraries (there are tons out there), or making your own! One of the posts I have planned is about precisely this. Look out for that one coming up (I'll add the link here for it once it's finished).

File management and search tools

  • Advanced-New-File - Do you hate taking your hands off the keyboard? Yeah, me too... Sure, it's easy to start a new file with cmd + n, but when you go to save that file, it's a P.I.T.A. to keep it where you want it without your mouse. Why not create it in the right place, to begin with? That's where this one comes in. Either activate from the Command Palette or do what I did, replace the cmd + n hotkey with this! Once activated, you just select what folder and then type out the filename and extension you want, and it makes it. Easy peasy lemon squeezy...
  • File Utils - This adds file management commands to the command palette such as rename, move, duplicate, delete, copy the name of the active file, and several commands to add new files in different directories (though I'd recommend using Advanced New File for this)
  • Folderize - With this extension, you can take a file and turn it into a directory with that file, an index.js file that exports it, and optionally a test file and a CSS module file. I've used Folderize on several projects I've adopted in the past when reworking the folder structure. More of one of those that I generally leave disabled or uninstalled until I need it, but when I need it, it's nice to know about it.
  • Search node_modules - Ever need to reference the code inside one of your install packages? Well, this extension's got your back. VSCode's built-in search doesn't include node_modules for a good reason, leave it out of there and use it to look inside your installed packages quickly.

JavaScript

  • Import Cost - Puts an annotation next to any package imports with how much you are adding to the bundle when you import some code. It utilizes Webpack to figure this out and isn't going to be 100% accurate, but it does get close enough to give you an idea when you might want to guess that shiny new JS package second.
  • JS Refactor - Some handy commands when you are refactoring JS code. Here are some of the common ones I use:
    • Extract Method
    • Extract Variable
    • Convert To Arrow Function
    • Convert To Function Declaration
    • Convert To Template Literal
  • JSON to JS Object - Select some JSON, activate, now you have a JS object!
  • JSON to TS - Select some JSON, activate, now you have TypeScript types!
  • Paste JSON as Code - Another JSON manipulation extension, but this one goes a little further than the previous. Here you don't just get a matching TypeScript interface, but you also have options for:
    • inferMaps
    • inferEnums
    • inferDateTimes
    • inferUuids
    • inferBoolStrings
    • inferIntegerStrings
  • AWS Toolkit - This is a new to me one as I have only recently started to work with the internals of AWS since I now work for them. This Toolkit adds a side panel with all kinds of AWS goodies. Access to services like Lambdas and CloudFormation, a CDK (Cloud Development Kit) explorer, and many AWS commands in your command palette. I'm still getting my workflow down with this one, but I'm working with a lot of the CDK this upcoming week, so maybe you'll hear more from me on it soon.
  • Jira and Bitbucket (Official) - This is the only way I ever want to interact with Jira ever again. I don't like their interface, but it is what it is. With this extension, you can look at any of your tickets, make new tickets, and more all without a browser. The workflow of it feels more like it's built for developers than the web interface, most likely because it is. Admittedly, I've never used the Bitbucket side of things, but if it's anything like the Jira integration, it's probably pretty good. I don't work at a place that uses Jira anymore, but if you do, I highly recommend taking a look at this.

Live share

Visual Studio Code's Live Share features have been impressive since release, but in today's crazy pandemic world, with most tech companies working from home, this has become one of the best pair programming tools. Through this, you can have multiple people working on your code at the same time. Share a project, co-edit, co-debug, share a server, and share a terminal! It includes a voice call and chats with the session as well. Use it to show the new dev on the team through your codebase, give remote technical interviews, present a new feature to your team, and so much more!

Official docs here

Note: One thing I would highly recommend looking over is the invitations and join access docs to prevent the chance of unwanted visitors into your session. You can also check out the Live Share Gatekeeper extension I talk about below.

  • Live Share Extension Pack - Extension pack that includes the following extensions:
  • Live Share Gatekeeper - If you are having sessions about your proprietary codebases, there's a good chance your company doesn't want just anyone to be able to join in. Gatekeeper locks a live share session to only people that share the same domain/AAD tenant. Effectively preventing people from outside of your organization from joining your session even if they somehow got your session URL. You set a list of domains that are allowed, and it blocks everyone else.

Remote development

Now you have this fantastic VSCode setup, but then you have to remote into a server or container to do your work. Or perhaps your company does all of its work on deployed servers (Google, Facebook, Amazon do a LOT of this). Well... Damn, there's no GUI there, you can't install VSCode onto a command line. I guess it's back to vim or emacs right?............... Not anymore! This has become one of my FAVORITE things in VSCode. With the following extensions, you can use VSCode to remotely develop inside containers, remote servers, or the Windows Subsystem Linux with no source code on your machine! For my work at Amazon, I have a remote server that I do my development work on, and I use this to SSH into it and use all the power of VSCode for working on my team's code. This effectively offloads all the computing stress from my computer and keeps our code safer as well. It's been a great experience so far! Facebook has gone all-in on it too, which means they are also working with Microsoft to make it a great experience.

Official docs here

Code execution

  • Code Runner - Just going to let this one speak for itself from its description, but TL:DR is, "Run code from LOTS of languages." > Run code snippet or code file for multiple languages: C, C++, Java, JavaScript, PHP, Python, Perl, Perl 6, Ruby, Go, Lua, Groovy, PowerShell, BAT/CMD, BASH/SH, F# Script, F# (.NET Core), C# Script, C# (.NET Core), VBScript, TypeScript, CoffeeScript, Scala, Swift, Julia, Crystal, OCaml Script, R, AppleScript, Elixir, Visual Basic .NET, Clojure, Haxe, Objective-C, Rust, Racket, Scheme, AutoHotkey, AutoIt, Kotlin, Dart, Free Pascal, Haskell, Nim, D, Lisp, Kit, V, SCSS, Sass, CUDA, Less, and custom commands.
  • Jest - This is a plugin that runs your tests in the background and gives you live feedback. It's pretty nice, but I prefer Wallaby, which is listed as the inspiration for this extension and is much more comprehensive but also costs money (more about that next!). This extension also adds syntax highlighting to snapshot files.

PAID

I know, I know, paid extensions?! But seriously, hear me out on this. These have paid for themselves MANY times over in time savings for me! The same company makes both of these, and they are great. After the first year, you get a DEEP discount on renewal.

  • Wallaby - https://wallabyjs.com/ - $120 individual/$240 company the first year, renewals get a discount (more about that below) - Wallaby is a fantastic extension for testing. It continuously runs your tests in the background and gives you immediate feedback as you type (either your tests or the code you are testing) in the gutter next to your code! If you practice TDD, this is a near MUST HAVE. It also adds:
    • Time travel debugging
    • Inline runtime values (see what the result of your code from your tests is)
    • Inline error reporting
    • Inline code coverage
    • A hosted web application with a test and coverage explorer
    • Interactive test output
    • Runtime value explorer, and better diffs and snapshots.
  • Quokka - https://quokkajs.com/ - Community edition is Free, Pro version is $50 individual/$100 company per year, renewals get a discount (more about that below) - While Wallaby concentrates on tests, Quokka is a live scratchpad for your code. In the free community version, runtime values are displayed inline with your code, a basic value explorer, code coverage, live logging/compare, and live share integration. With the Pro version, you add a live value display, more extensive value explorer, live comments, project files, import quick package install, performance testing, and the ability to run only on save or a single time. Quokka is a phenomenal tool for prototyping, and I've used it a LOT in teaching people how to code.

You can also bundle these two together for $150 for the first year for individuals. Renewal discounts are 50% for Wallaby, 30% for Quokka, and I believe it's around 40% for the bundle (I paid $89 + tax this past year).

If your company pays for it, it's more of course, but your company is paying, so not as much of a big deal, right?

Git

  • Local History - Ok, this doesn't really have anything to do with Git, but it's local version control for every time you modify any file. Ever had that time when you wished you could time travel to that idea you had an hour ago that you didn't commit and ended up wiping out? Yeah, this extension has got your back! This has genuinely saved my ass so many times. It's one of those you think you probably don't need until you do, and you are cursing yourself for not installing. Just be sure to add .history to your .gitignore, preferably globally.
  • GitHub Pull Requests and Issues - Connects with GitHub and allows you to do PR reviews straight from VSCode without ever having to open a browser! Awesome, right?!?! You can create PRs, see any active ones, see which ones are assigned to you, comment, review, check out PR branches to test them, approve, merge, and close PRs right from your editor! You also get all the benefits of your editor. Code highlighting, search, all the power of VSCode, and the other amazing extensions you are installing! I use this all of the time for PR review. It's been one of my favorites.
  • VSCode Conventional Commits - If you use Conventional Commits, this is the extension for you. It allows you to go through the same prompt as the Commitizen tool has on the CLI (except it also adds Gitmoji!!!! ????????) right in your editor. There's also a Commitizen extension out there, but it doesn't have Gitmoji, sooooooooooo... I now use this one.
  • Open in GitHub, Bitbucket, Gitlab, VisualStudio.com! - Goto a line in your project and activate this to either navigate right to the line of code in GitHub or copy the link to your clipboard to post out to a teammate.
  • GitLens - The most powerful extension in VSCode for looking at git history. It started mainly as an extension with git blame annotations, but has added SO MUCH MORE! I've been using it for three years and haven't really tapped into the power of this extension to it's fullest. Here's a list of just some of its features
    • Current line blame
    • Code block blame - With how many authors have edited the block
    • Status bar blame
    • Hovers
    • blame
    • details
    • changes
    • annotations
    • Side bar views
    • Repository information
    • File history
    • Line history
    • Commit comparison
    • Commit search
    • Gutter blame
    • Gutter heatmap
    • Recent changes annotations
    • And a WHOLE LOT MORE!

Markdown

Alright, I had to give Markdown its own section, because I have a LOT going on with Markdown. In fact, I'm writing this entire thing in Markdown, in VSCode, using these extensions. I use VSCode and Markdown for all my writing, note-taking, and my personal website/blog/digital garden development (which is currently in development, I'll add a link here when it's published). Through extensions, VSCode becomes a very robust environment for all of this work. You get all the text editing power of VSCode itself and can customize your own writing experience through extensions to be whatever you want it to be. There's so much you can do here, so let's dig into things.

  • Foam - Note-taking concepts like Networked thought, Second Brain, and Zettelkasten are all the rage right now. Perhaps you've heard of the note-taking phenomenon that is Roam. Foam is inspired by Roam, built inside VSCode, and uses Markdown files stored on your computer, not somewhere up in the cloud where you have no control over it. Created by Jani Eväkallio, it's a fast-growing system of intertwining different Markdown extensions together with some extra functionality to give you an excellent networked thought note-taking environment.
  • Markdown All in One - If you're going to have any Markdown extensions, at least have this one. As its name suggests, it is an all-in-one gathering of functionality. This extension adds keyboard shortcuts for creating/updating a table of contents, list editing, table formatter, printing to HTML, math, auto completions, and more.
  • Markdown Notes - Mainly for all my notes, this adds the ability to use [[wiki-links]], backlinks, and #tags in Markdown for quick navigation.
  • Markdown Links - Another one is mainly for Foam and my notes. It takes all those links between local Markdown files and creates a graph showing how they are interlinked to each other.
  • MarkdownLint - Linting for Markdown?! Yep! It has a pretty extensive set of rules you can configure how you would like to in your preferences.
  • LaTeX Math for Markdown - To be honest, I don't use this, but I do seem to know a lot of people that do, so I wanted to include it here.
  • Grammarly (unofficial) - Grammarly in VSCode?! Yep! I just found this while working on this post, and it does a pretty good job!
  • Markdown Image - Paste an image directly into your Markdown file and it will generate the Markdown code and save the image either to a local folder (default) or you a hosting service like Imgur.
  • Markdown PDF - Convert your nice Markdown file to a PDF.
  • Word Count - Adds a word count in the status bar when editing Markdown files. All my writing is in Markdown files, and I challenge myself to write 1000+ words per day, so this helps me keep track.
  • Liquid - Syntax highlighting for the Liquid template language. I put this here rather than languages because Markdown is the only place I use them. Dev.to uses Liquid tags for many features, so when I'm writing in VSCode with these tags, it's nice to have some syntactic highlighting in my editor.
  • MDC Preview - Preview panel for MDX as well!

Extensions by Matt Bierner

If there's anyone that I recommend following to learn more about VSCode, it's Matt Bierner. He's actually on the VSCode dev team, so he kind of knows his way around it. Not only does he make great extensions, but he tweets out a VSCode tip every day and just started a Code 0 to 20 video series on YouTube! So, let's go over his extensions because they are all pretty great!

  • markdown-link-expander - Let's start with one of my favorites. Highlight a link, activate this plugin, and grab the title from the page of the link and generate the filled Markdown link tag for you!
  • Markdown Table Prettifier - Simple table formatting
  • Markdown Shortcuts - Keyboard shortcuts for common markdown commands. A little more of an extensive list than Markdown All in One has.
  • GitHub Markdown Preview - Extension pack to make the Markdown preview window look like the one on Github
    • Markdown Preview GitHub Styling - Core styles for the preview window to match Github. Note: With this extension, the markdown preview will have a white theme even if you have a dark theme set overall.
    • Markdown Emoji - MOAR EMOJI!!! ????????
    • Markdown Checkboxes - Add checkbox/task list support to the preview window. Great for making todo lists in your notes!
    • Markdown YAML Preamble - If you use the YAML front matter style heading in your Markdown, this will render it as a table at the top of the preview window.
  • Markdown Preview Mermaid Support - Mermaid is a library for making diagrams and flowcharts. This extension adds support for it in the preview window!
  • Markdown Footnotes - Footnote syntax support in preview
  • Markdown Image Size - Gives the ability to add size to image tags in Markdown and render the match in the preview.
  • JSDoc Markdown Highlighting - Markdown syntax highlighting to JSDoc comments
  • Gif Player - Play/pause/scrub animated gifs in the editor!

Working with Images and colors

  • SVG - This one's a little more involved than the simple viewer. This is a self-proclaimed SVG Language Extension. It adds auto-completes, a document symbol tree, live preview, PNG export, MDN reference, color pickers, and SVGO integration for code formating and minification. It's an SVG toolbox for the really digging in.
  • Draw.io Integration - Unofficial integration of Draw.io directly into VSCode. This puts the entire Draw.io editor right in your code editor!
  • Color Info

Showing off

  • CodeTour - Code tour is an excellent extension that does something pretty unique. It allows you to create guided tours through a repo inside VSCode by recording steps that a user can follow through. Navigate files, call shell commands, run tasks, export different tours for different situations, it even has it's own version control for your tours! CodeTour is one of the ultimate onboarding documentation extensions, but can be used for any situation where you want to show someone through some bits of code, but can't do so in person.
  • CodeRoad - https://coderoad.github.io/ - Ok, so this is another unique one that just came on my radar while writing this. It's a lot like CodeTour, but the difference here is that CodeRoad is more for making interactive tutorials. I honestly have not tried this one out yet, but it looks promising, and I can't wait to dig in with it!
  • Carbon-now-sh - Do you take a lot of screenshots of code? Do you use Carbon to make those look nice? Well, this is here for you to make that easy. Highlight the code you want, activate the extension, and take you to carbon.now.sh with your code already input. Tweak the style, export, done.

Other utilities

  • Live Server - If you work on a lot of static sites, this is a great little extension that starts up a quick server for you to serve those files up to the browser.
  • REST Client - Do you like Postman but don't really use all of its fancy features? This is another extension that could replace another open application on your computer (isn't it beautiful clearing out RAM?). It doesn't have the real fancy stuff that Postman does, but don't let that fool you, it's got the goods where it counts. Send HTTP requests, GraphQL queries, cURL commands with request history, authentication support, env variable support, Cookie support, and more.

There you have it

Alllllllllright! That's it! One BIG 'OL list of extensions with some brief intros into them! I hope you found some that you like and can use! As I said earlier, if you have an extension you have found instrumental to your work, please, leave a comment and let me know! I would love to check it out, and even if it's not the right one for me, maybe it is for someone else reading this!

Coming up soon in this series, I'm going to start taking sections of these extensions and breaking down how you can optimize your experience in VSCode. We're going to go through how to set them up and use them in more depth so you can get a better taste of the workflows that I've come to depend on while working in my applications.

Top comments (25)

Collapse
 
robole profile image
Rob OLeary •

Settings syncing and auto rename are built-in features in VS Code now, you can check out my recent article to see the details, so those extensions you mentioned are no longer necessary (depending on your exact use case).

robole

VS Code: You don't need that extension

Rob OLeary ・ Aug 5 '20

#webdev #vscode #productivity #tips
Collapse
 
tretuna profile image
Tre Tuna •

Good point on the auto renaming, I actually had found about 4 or 5 other extensions that were no longer needed while writing this out.

Collapse
 
tretuna profile image
Tre Tuna •

Added a note that Auto Rename is no longer needed. Thanks for pointing that out!

Thread Thread
 
robole profile image
Rob OLeary • • Edited

Youre welcome 😎

Collapse
 
tretuna profile image
Tre Tuna •

On Settings Sync, I mentioned in the article that I actually use both the built in and this extension with why I kept it around. There's still things that the entensions can do that the built in cannot, like sharing your setting publicly and keeping different setting configurations saved for easy recall.

Collapse
 
klvenky profile image
Venkatesh KL •

I like the big list but I think few of extensions are now baked into vscode.
Ex: npm intellisense, auto close tag etc.
Also with such a big curation of extensions, I'm sure vscode's gonna become webstorm essentially in terms of speed. No pun intended.
Great collection.
Thanks

Collapse
 
tretuna profile image
Tre Tuna •

Completely! In terms of the speed, the great thing with VSCode is you can activate/deactivate extensions on a workspace basis. You can keep them installed, but only activated in particular projects when needed so that you aren't bogging down VSCode itself.

Collapse
 
mitchstewart08 profile image
Mitchell Stewart •

Great post Tre! Thanks for including why/how of how you use the extensions, I will be slowly adding these to my toolkit that way I can remember/memorize the hotkeys instead of overloading myself, will definitely be revisiting this post. Eagerly looking forward to more posts!

Collapse
 
tretuna profile image
Tre Tuna •

Thanks Mitchell! That's the way to do it for extensions that add hotkeys. Don't overload yourself, add in one or two, get used to the hotkeys, then come back for more. This gives you time to evolve your workflow naturally.

Collapse
 
priteshkeleven profile image
Pritesh K. •

Nice list!!

One more extention that I think could ease your life is Error Lens

To see an error right in to editor screen

Collapse
 
tretuna profile image
Tre Tuna •

Just tried it out today and I would agree it's really nice! Just added it to the Debugging list.

Collapse
 
tretuna profile image
Tre Tuna •

You are the second person to recommend this! Definitely going to take a look and possibly add it to this list!

Collapse
 
robole profile image
Rob OLeary • • Edited

Markdown All in One is a bit too much of a kitchen sink approach for my taste. If you just want to choose specific extensions for what you need in markdown, try the following:

Choose one of the 'Markdown Shortcuts' extensions, whichever style you prefer!

Collapse
 
tretuna profile image
Tre Tuna •

I'll take a look at these! I understand some don't like the kitchen sink approach. The main thing for me here is that I use Foam to write my notes and it's meant to be used with Markdown All in One. I'm always refining though and will definitely check these out!

Collapse
 
aslasn profile image
Ande •

Quite a list buddy. Some of these I didn't even knew is there in the internet xd

Collapse
 
tretuna profile image
Tre Tuna •

Indeed! Some I didn't even know until I started going through this. 😅 I've been using Visual Studio Code for nearly four years now though, so it's been an extended time of refining and curating them.

Collapse
 
bhagatparwinder profile image
Parwinder 👨🏻‍💻 •

Just a FYI that native settings sync has made it to the latest stable version of VS Code.

Good write up ♥️

Collapse
 
tretuna profile image
Tre Tuna •

Yeah, I mention that in here as well. I use that in addition to the Setting Sync plugin as there's advantages in both of them that the other does not have.

Collapse
 
cristiancastrodc profile image
cristiancastrodc •

Great list! Output colorizer is now one of my favorites 😀

Collapse
 
fasani profile image
Michael Fasani •

Added to my read later list, I am on the phone right now, but there must be some gold in this exhaustive list! Nice one!

Collapse
 
lrdiv profile image
Lawrence Davis •

Awesome post! Lots I had never heard of before that I installed immediately and a few that I bookmarked to check out later. Thanks for sharing

View full discussion (25 comments)

Read next

antoniocardenas profile image

Novedades en Angular 19, ¿Qué hay de nuevo?

Antonio Cardenas -

thangchung profile image

CoffeeShop App Infused with AI - Intelligent Apps Development

Thang Chung -

testifytech profile image

Retail Application Testing: What It Is & Why Your App Needs It

Steve Wortham -

carrie_luo1 profile image

SafeLine WAF Waiting Room: The Terminator of HTTP Flood DDoS Attack

Carrie -