20 Visual Studio Code Extensions You'll Actually Use

UpdatedJanuary 9, 2022

I'm Al. I'm a self-taught web developer with a nack for learning new things and breaking stuff. I enjoy being creative but find expressing it artistically, difficult. But, once I found coding, I was able to express that creativity that no paint-brush or paint-mouse ever quite could do for me and I've never looked back since.

🎶 Started with the LAMP-stack, now I'm all about that JAM-stack. 🎶

Comments (3)

Join the discussion

Deactivated User4y ago

Al Romano4y ago

Thanks Programing-School! Appreciate the feedback. Do you have a favourite plugin you use?

Deactivated User4y ago

Al Romano

This article is My favorite extension in VScode: https://programing-school.hashnode.dev/7-helpful-visual-studio-code-extensions-ckxxljg1d0iqaxts14hyk5z33

Deactivated User4y ago

And Prettier - Code formatter is for Making the VS code easy to read

John Palmgren4y ago

This is great. I've installed a few of these immediately. Now I just need to find an extension that will make the Ctrl + tab key switch tabs in the same way that it does in a browser. It always does it in a different order.

Al Romano4y ago

Nice! Which ones are you trying out?

Personally, I always use Win Key + Tab to cycle through my windows, I like that more. I can see what's going on better/faster.

Omkar Adhali4y ago

Thank you for sharing. Will definitely check out Metago and guide.

Al Romano4y ago

Awesome! Glad to hear you're checking a few out.

Metago changed it up for me! As I didn't want something as robust as Vim in VS Code but it's a nice touch when I'm in a flow and don't feel like using the mouse to move around.

More from this blog

Co-Gaming: Building Bonds Through Shared Passions

Listen up, virtuosos of the virtual realm and champions of childhood! As we reach the grand finale of our Agile Parenting saga, we reveal the ultimate boss-level strategy: Co-Gaming. It's time to draw on our shared passion for gaming to build lasting...

Sep 18, 20233 min read

Co-Gaming: Building Bonds Through Shared Passions

Understanding Gaming Culture and Its Impact on Your Child

Hark, digital devotees and pioneers of parenting! Our Agile Parenting saga now takes us on a quest to decode gaming culture and understand its impact on our young adventurers. Strap in, folks! It's time to unravel this intricate tapestry of bytes and...

Sep 14, 20232 min read

Understanding Gaming Culture and Its Impact on Your Child

Taking Care of the Gamer Parent: Self-Care Strategies

Greetings, warriors of the gaming realm and guardians of growing minds! Our Agile Parenting odyssey brings us to a vital stage often overlooked in our quest - the self-care of you, the Gamer parent (Dad, in my case). Yes, noble knights of the network...

Sep 11, 20233 min read

Taking Care of the Gamer Parent: Self-Care Strategies

Gaming as a Tool for Emotional Connection

All hail, sultans of the software and emperors of emotion! Our Agile Parenting saga draws us into a territory that pulses at the core of our journey - emotional connection. Yes, fellow gaming parents, today's quest unveils the power of gaming as a to...

Sep 7, 20233 min read

Gaming as a Tool for Emotional Connection

The Gamer Dad's Guide to Homework and Housework

Greetings, patriarchs of pixels and defenders of domestic duties! Today, on our Agile Parenting journey, we delve into a realm even the bravest of us may dread - the mundane yet crucial world of homework and housework. Fear not, fellow gamers! With o...

Sep 4, 20232 min read

The Gamer Dad's Guide to Homework and Housework

Virtually(Creative) Hash-Stack (Blog)

34 posts

Your go-to hub for empowering Ontario’s small businesses with cutting-edge digital marketing strategies and accessibility solutions. Join us to elevate your brand and reach a wider audience!

I've noticed several VS Code extension posts and have been thoroughly disappointed with the mentioned extensions with the exception of a couple so I thought I'd compile my list of plugins that I personally use.

I think these are helpful for any primarily front-end developer who wants to get the most out of using Visual Studio Code. Some of these you'll already have - as they're the most recommended extensions on the platform - but others you may not.

Make VS Code Easy to Read

Beautify - Makes HTML, CSS and JS very easy to read by de-minifying and properly spacing your horrendous markup.
Better Comments - Create more human-friendly comments in your code. I use this all. the. time. It's a mandatory extension for our dev team.
Bookmarks - It helps you to navigate in your code, moving between important positions easily and quickly. I use this in conjunction with MetaGo to be almost mouse-free while coding.
MetaGO - Wicked fast cursor movement/selection for a focus on keyboard usage. This changed how I use VS Code forever. Seriously.
Log File Highlighter - Just as it sounds, gives VSCode .log file support so you can actually read those log dumps without your eyes bleeding.
Guides - Now you don't have to collapse and open all you're freaking elements to figure out nesting. This works really great with Beautify mentioned above and Rainbow Brackets, below.
Rainbow Brackets - Highlights the current bracket-set you're in and colours the rest differently for very easy location identification. If you're a heavy JS developer this is a great extension.
Image Preview - Shows an image preview in the gutter and on hover. So key for checking if I just referenced the correct image/icon.
GitLens - One of the most used extensions for sure; Gitlens is a must have for VS Code and just makes the Git experience so much better all around. Pair this with the .gitignore and .diff extensions for good coverage.

Faster Coding inside VS Code

CSS Peek - Inspired by a similar feature in Brackets called CSS Inline Editors. One of my favourite Bracket features now in VS Code.
stylelint - We lint our JS, so why not our LESS/SASS/CSS too? Great for quickly cleaning up sloppy CSS.
Live Sass Compiler - Sure, you got Gulp, Webpack, NPM, Grunt but sometimes you want to compile/transpile your SASS/SCSS files to CSS files in realtime with live browser reload. This does just that.
Live Server - Best local development Server with live reload feature for static & dynamic pages (even PHP!).
Version Lens - Update dependencies/devDependencies to latest version for specified package.json. Recommended by: Mihail
DotENV - Adds support and highlighting for .env files - something I rely on heavily pushing to Heroku, Netlify, etc...

Pretty Screenshots

Polacode - Highlight code, snap a really nice screenshot with your code theme's colours. Great for tutorials or documentation and you want to provide code examples.

Multiple Instances of VS Code

Settings Sync - Uses a private gist to save a setting file so you can sync Settings, Snippets, Themes, File Icons, Launch, Keybindings, Workspaces and Extensions between multiple VS Code instances. I use this to keep my Laptop, Work Desktop and Home Desktop all in sync with two simple commands.
EditorConfig - Override user/workspace settings with settings found in .editorconfig files. I use this to enforce specific rules for the development team on a per-project basis.

So there you have it, while I have lots of other plugins more specific to the environments I use (Front-End Web + Azure Cloud) hopefully you'll find these extensions useful in your daily use of VS Code!

Let me know if you already use them and if you love or hate them. Or, some extensions I might have missed and should try out!

Noteworthy Mentions

After getting some feedback in the comments of you guys showing me some of your favourite VS Code extensions here are some new ones that I think are solid enough to also include:

Import Cost - Shows the filesize cost of importing. - Recommended by: miku86
Window Colors - Run multiple instances of VS Code? Have each window uniquely coloured so you don't lose track of which project is in what window. - Recommended by: Jefry Pozo
Prettier - Very "Pretty" markup cleaner. Used by Stackoverflow to display nice code snippits. But, doesn't handle HTML inside .js/.ejs/.jade/.pug templates so not the best if working with many static site generators.

This post was originally written on, dev.to

Command Palette

Comments (3)

Thanks for sharing this article it is very good

More from this blog

Make VS Code Easy to Read

Faster Coding inside VS Code

Pretty Screenshots

Multiple Instances of VS Code

Noteworthy Mentions