Al RomanoI'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.
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 your 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
CSS Peek - Inspired by a similar feature in Brackets called CSS Inline Editors. One of my favourite Brackets 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
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:
-
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:
Prettier - Very "Pretty" markup cleaner. Used by Stackoverflow to display nice code snippits. But, doesn't handle HTML inside
.js/.ejs/.jade/.pugtemplates so not the best if working with many static site generators.
