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!
Latest comments (10)
you don't need bracket pairs / rainbow anymore as it's built in VS Code for a few months
If anyone install all of extensions in one single ide than he / she maybe couldn’t coding smoothly for vs code slowness..
I have 38 extensions installed with 32GB DDR4 RAM ... you need more RAM!
even with 16gb it's fast enough
Should be, But poorly-coded Electron apps are notorious for memory
leaks.
Thanks for sharing, really useful!
always here, mate!
What is the relation with the #webcomponents tag you used?
That tag is for Native JavaScript Web Components
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.
I know, right! So glad I could help you, mate. Cheers!