Kickass VS Code Extensions To Make Your Life Easy
Tags: webdev, vscode, webcomponents, programming
Published: 2021-12-17 11:01:30

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](https://marketplace.visualstudio.com/items?itemName=kiteco.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](https://marketplace.visualstudio.com/items?itemName=ritwickdey.LiveServer)**: A live reload feature reflected on a local server with whatever it is you’re coding. 
- **[Live SASS Compiler](https://marketplace.visualstudio.com/items?itemName=ritwickdey.live-sass)**: Compiles your SASS/SCSS file to CSS files in real time all with a live browser reload. 
- **[blox](https://marketplace.visualstudio.com/items?itemName=vsblox.blox)**: helps you access the full code of pre-built UI kit components with just a click. 
- **[Code Spell Checker](https://marketplace.visualstudio.com/items?itemName=streetsidesoftware.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](https://marketplace.visualstudio.com/items?itemName=pranaygp.vscode-css-peek)**: Manages pull requests and conducts code reviews in your IDE with full source-tree context.
- **[Path Intellisense](https://marketplace.visualstudio.com/items?itemName=christian-kohler.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](https://marketplace.visualstudio.com/items?itemName=mikestead.dotenv)**: Supports and highlights .env files. 


## For Easy Reading

- **[Beautify](https://marketplace.visualstudio.com/items?itemName=HookyQR.beautify)**: de-minifies and properly spaces your ugly markup. 
- **[Prettier](https://marketplace.visualstudio.com/items?itemName=esbenp.prettier-vscode)**: Very similar to Beautify, Prettier makes your code pretty and more readable like placing brackets and properly spacing everything automatically. 
- **[Better Comments](https://marketplace.visualstudio.com/items?itemName=aaron-bond.better-comments)**: Creates human-friendly comments in your code. 
- **[Bookmarks](https://marketplace.visualstudio.com/items?itemName=alefragnani.Bookmarks)**: Helps you navigate your code, jumping from one section to the other easily. 
- **[Log File Highlighter](https://marketplace.visualstudio.com/items?itemName=emilast.LogFileHighlighter)**: This gives your VS Code .log file support so the next time you’re reading a log dump, you won’t go bonkers. 
- **[MetaGo](https://marketplace.visualstudio.com/items?itemName=metaseed.metago)**: Focused on more keyboard usage with fast cursor movements/selections. 
- **[Material Icon Theme](https://marketplace.visualstudio.com/items?itemName=PKief.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](https://marketplace.visualstudio.com/items?itemName=CoenraadS.bracket-pair-colorizer-2)**: Helps you find where one bracket starts and ends, and helps you understand the structure of a function. 
- **[Image Preview](https://marketplace.visualstudio.com/items?itemName=kisstkondoros.vscode-gutter-preview)**: Helps you check if you’ve referenced the correct image/icon by showing a preview on hover and in the gutter. 
- **[Rainbow Brackets](https://marketplace.visualstudio.com/items?itemName=2gua.rainbow-brackets)**: Highlights the current bracket-set you are in to identify your location easily.
 
 

## Other Fun Extensions

- **[Discord Presence](https://marketplace.visualstudio.com/items?itemName=icrawl.discord-vscode)**: Displays your discord status as ‘coding’ so your friends know when it’s best to not disturb you. 
- **[Settings Sync](https://marketplace.visualstudio.com/items?itemName=Shan.code-settings-sync)**: Syncs your settings, themes, snippets, launch, file icons, keybindings, extensions, and workspaces between multiple VS Code instances using a private gist. 
- **[Polacode](https://marketplace.visualstudio.com/items?itemName=pnp.polacode)**: Highlights your code and snaps a clean screenshot with your code’s theme colors. Great tutorials and documentation.
- **[One Dark Pro](https://marketplace.visualstudio.com/items?itemName=zhuangtongfa.Material-theme)**: 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!