DEV Community πŸ‘©β€πŸ’»πŸ‘¨β€πŸ’»

Cover image for Kickass VS Code Extensions To Make Your Life Easy
notmahnoor
notmahnoor

Posted on • Updated on

Kickass VS Code Extensions To Make Your Life Easy

Here is a list of some of the extensions that could be useful for primarily front-end developers who want to get the most out of their VS Code. You might be familiar with a lot of them, or you might be not. Either way, these extensions can drastically improve your workflow and make your IDE more attractive.

For Faster Coding

  • Kite: You just have to press the TAB button to have your code auto-completed, saving you a ton of time. Kite works with almost every language!
  • Live Server: A live reload feature reflected on a local server with whatever it is you’re coding.
  • Live SASS Compiler: Compiles your SASS/SCSS file to CSS files in real time all with a live browser reload.
  • blox: helps you access the full code of pre-built UI kit components with just a click.
  • Code Spell Checker: This will tell you when you’ve mistyped something in your code.
  • stylint: Amazing to clean up your messy CSS.
  • CSS Peek: Manages pull requests and conducts code reviews in your IDE with full source-tree context.
  • Path Intellisense: Automatically suggests paths you’re currently working with if you forget the location of your image or you need to fill β€˜href’ and β€˜src’ tags.
  • DotENV: Supports and highlights .env files.

For Easy Reading

  • Beautify: de-minifies and properly spaces your ugly markup.
  • Prettier: Very similar to Beautify, Prettier makes your code pretty and more readable like placing brackets and properly spacing everything automatically.
  • Better Comments: Creates human-friendly comments in your code.
  • Bookmarks: Helps you navigate your code, jumping from one section to the other easily.
  • Log File Highlighter: This gives your VS Code .log file support so the next time you’re reading a log dump, you won’t go bonkers.
  • MetaGo: Focused on more keyboard usage with fast cursor movements/selections.
  • Material Icon Theme: Adds visual icons for every file you’re currently using to help you keep track of all the files.
  • Bracket Pair Colorizer 2: Helps you find where one bracket starts and ends, and helps you understand the structure of a function.
  • Image Preview: Helps you check if you’ve referenced the correct image/icon by showing a preview on hover and in the gutter.
  • Rainbow Brackets: Highlights the current bracket-set you are in to identify your location easily.

Other Fun Extensions

  • Discord Presence: Displays your discord status as β€˜coding’ so your friends know when it’s best to not disturb you.
  • Settings Sync: Syncs your settings, themes, snippets, launch, file icons, keybindings, extensions, and workspaces between multiple VS Code instances using a private gist.
  • Polacode: Highlights your code and snaps a clean screenshot with your code’s theme colors. Great tutorials and documentation.
  • One Dark Pro: This is for when you don’t quite like VS Code’s default design theme. You can configure everything as you want itβ€”font size, italics, etc.

A lot of these have been tried and tested by me and my fellow devs, so if you spot the one that's your ideal choice and a choice you can’t live without, give a hoot! And if this article helps you find β€˜the one’ for you, please comment and let others know so they could hop on the bandwagon as well!

Top comments (10)

Collapse
 
morvy profile image
morvy

you don't need bracket pairs / rainbow anymore as it's built in VS Code for a few months

Collapse
 
barhuumi profile image
Ibrahim Farah

Thanks for sharing, really useful!

Collapse
 
notmahnoor profile image
notmahnoor

always here, mate!

Collapse
 
cubikca profile image
Brian Richardson

I love the modular nature of VS Code and the considerable customizability. Thanks for pointing me at a couple of productivity and formatting extensions I'd missed.

Collapse
 
notmahnoor profile image
notmahnoor

I know, right! So glad I could help you, mate. Cheers!

Collapse
 
dannyengelman profile image
Danny Engelman

What is the relation with the #webcomponents tag you used?
That tag is for Native JavaScript Web Components

Collapse
 
elias_soykat profile image
Elias Soykat

If anyone install all of extensions in one single ide than he / she maybe couldn’t coding smoothly for vs code slowness..

Collapse
 
organizedfellow profile image
Jaime Aleman

I have 38 extensions installed with 32GB DDR4 RAM ... you need more RAM!

Collapse
 
lukasvv101 profile image
lukasVV101

even with 16gb it's fast enough

Thread Thread
 
organizedfellow profile image
Jaime Aleman

Should be, But poorly-coded Electron apps are notorious for memory
leaks.

Take a look at this:

Settings

Go to your customization settings to nudge your home feed to show content more relevant to your developer experience level. πŸ›