menu

Frontend Cafe

A community for discussing frontend engineering news, best practices, and new technologies.

Channels
Chat
view-forward
# All channels
view-forward
# General
view-forward
# Articles
view-forward
# Jobs
view-forward
# Opinion
view-forward
# Questions
view-forward
Team

Favourite VS Code Extensions?

March 2, 2019 at 5:18pm

Favourite VS Code Extensions?

March 2, 2019 at 5:18pm
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.
  • Import Cost - Shows the filesize cost of importing.
  • 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.
  • 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.

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.
  • 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!

March 3, 2019 at 12:29am
I will add some things that I find useful:
  • JSON Tools - You can pretty/minify JSON with this extension
  • NPM - This extension supports running npm scripts defined in the package.json file and validating the installed modules against the dependencies defined in the package.json.
  • Npm Intellisense - Visual Studio Code plugin that autocompletes npm modules in import statements.
  • Trailiing Spaces - highlight trailing spaces and delete them in a flash!
  • Auto Close Tag - Automatically add HTML/XML close tag, same as Visual Studio IDE or Sublime Text does.
  • Auto rename tag - Automatically rename paired HTML/XML tag, same as Visual Studio IDE does.
  • BracketPair - This extension allows matching brackets to be identified with colours
Edited
like-fill
2
  • reply
  • like
I will add some things that I find useful:
  • JSON Tools - You can pretty/minify JSON with this extension
  • NPM - This extension supports running npm scripts defined in the package.json file and validating the installed modules against the dependencies defined in the package.json.
  • Npm Intellisense - Visual Studio Code plugin that autocompletes npm modules in import statements.
  • Trailiing Spaces - highlight trailing spaces and delete them in a flash!
  • Auto Close Tag - Automatically add HTML/XML close tag, same as Visual Studio IDE or Sublime Text does.
  • Auto rename tag - Automatically rename paired HTML/XML tag, same as Visual Studio IDE does.
  • BracketPair - This extension allows matching brackets to be identified with colours
Nice I will check those out!
  • reply
  • like
Awesome list 👏
This ones are great -
Peacock - Colorize your VS Code workspace instances
Highlight - Advanced text highlighter based on regexes. Useful for todos, annotations etc.
You can check out all extensions by Fabio Spampinato, they're usually great
like-fill
1
  • reply
  • like

March 3, 2019 at 5:32pm
Awesome list 👏
This ones are great -
Peacock - Colorize your VS Code workspace instances
Highlight - Advanced text highlighter based on regexes. Useful for todos, annotations etc.
You can check out all extensions by Fabio Spampinato, they're usually great
Sweet! I'll have to check these out and give them a shot. Thanks!
  • reply
  • like
Awesome, always when i start to read this kind of lists, I think there can’t be anything I’m missing, but again I find couple of new ones 🔥
like-fill
1
  • reply
  • like

March 4, 2019 at 8:37am

March 4, 2019 at 3:26pm
Thanks!
Thanks for the addon suggestions, I'll check 'em out!
  • reply
  • like
This thread is legendary. Thanks all for sharing!
like-fill
1
  • reply
  • like
I agree with thanks for sharing. Also, which is the best one to pull out all my todos and show in one place (similar to webstorm) ?
like-fill
2
  • reply
  • like
I agree with thanks for sharing. Also, which is the best one to pull out all my todos and show in one place (similar to webstorm) ?
Ah for that you can try ToDo Tree!
  • reply
  • like
I love this kind of posts, and you always find some new gems. Will add some of my favorites as well.
like-fill
2
  • reply
  • like
I love this kind of posts, and you always find some new gems. Will add some of my favorites as well.
Nice list! Checkin' some of those out. I love GitLens - must have extension for VS Code imho.
  • reply
  • like
Hello all, new to the community. My favorite extension at this point is Quokka.js
like-fill
1
  • reply
  • like
Hello all, new to the community. My favorite extension at this point is Quokka.js
Quokka is a great extension! I use it every day. Didn't make the list however as I didn't want to stuff it with too many.
  • reply
  • like

March 6, 2019 at 8:50am
.
Edited
  • reply
  • like
.
Edited
  • reply
  • like
Make API calls straight from you code editor :)
like-fill
1
  • reply
  • like
Make API calls straight from you code editor :)
Nice addition, I'll have to check this out for sure!
  • reply
  • like

March 7, 2019 at 8:21am
Another one i founded today. Organize imports and remove unused ones. Extension: TypeScript Hero Link: https://marketplace.visualstudio.com/items?itemName=rbbit.typescript-hero
like-fill
1
  • reply
  • like

March 7, 2019 at 2:32pm
Another one i founded today. Organize imports and remove unused ones. Extension: TypeScript Hero Link: https://marketplace.visualstudio.com/items?itemName=rbbit.typescript-hero
Nice! I'll have to check this out too!
  • reply
  • like