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!