PROGRAMMING
My Top 20 VS Code Extensions
Extensions. Redefined.
We all love a good code editor. It speeds up our workflow, increases our productivity, and just makes our life a whole lot easier. What everyone loves about Visual Studio Code is that it’s not just fast, but it also leaves significant room for one to style it to his or her own personal preference. The Visual Studio Marketplace has thousands (maybe even tens or hundreds of thousands, who knows 🤔) of extensions for you to do just that, and here’s 20 of them you won’t be able to live without!
TL;DR
1 + 2. Atom One Light & One Dark Theme
3. Material Theme by Mattia Astorino
4. Snazzy Plus by akarlsten
5. Material Icon Theme by Philipp Kief
8. Bracket Pair Colorizer 2 by CoenraadS
9 + 10. Auto Close Tag & Auto Rename Tag by Jun Han
11. CSS Peek by Pranay Prakash
12. Path Intellisense by Christian Kohler
13. Project Manager by Alessandro Fragnani
14. Live Server by Ritwick Dey
15. Better Comments by Aaron Bond
16. GitLens by Eric Amodio
17. Git History by Don Jayamanne
18. Prettier — Code Formatter by Esben Petersen
19. [Updated] Polacode-2020 by Jeff Hykin
20. Settings Sync by Shan Khan
Themes
1 + 2. Atom One Light & One Dark Theme by Mahmoud Ali
I used Atom as a primary editor before jumping ship 🚢 to VS Code. Perhaps it’ll make the transition from Atom to VS Code easier. 🤷♂
3. Material Theme by Mattia Astorino
For the Material Theme lovers.
4. Snazzy Plus by akarlsten
A really cool theme which comes with superb syntax highlighting. It’s one of my favourites for VS Code. Not a common one but definitely one that you should try out.
5. Material Icon Theme by Philipp Kief
Beautiful and simple icons for your files and folders. I often underestimate how important this is — it’s not just about aesthetics. It helps melocate your files and folders more easily!
Productivity
6. WakaTime by WakaTime
See how much time you spend programming and building and question whether you are a truly productive programmer. Seems like I’m not. 👀
8. Bracket Pair Colorizer 2 by CoenraadS
Eliminate the confusion caused by a sea of brackets. 🌊 😳
9 + 10. Auto Close Tag & Auto Rename Tag by Jun Han
Automatically rename paired HTML/XML tags. Super simple, yet super effective!
11. CSS Peek by Pranay Prakash
View a hover image of your CSS within your HTML file. Eliminates all the trouble of switching between your HTML and CSS!
12. Path Intellisense by Christian Kohler
Autocomplete file names and paths and never fret about path-ing in large projects again.
13. Project Manager by Alessandro Fragnani
With this extension, you can quickly switch between your projects easily and efficiently. Never need to navigate through Finder/File Explorer to re-open a project you were working on again.
14. Live Server by Ritwick Dey
Never have to refresh a page again when developing for web! Live Server refreshes your browser whenever you make changes. So simple!
15. Better Comments by Aaron Bond
With Better Comments, you can categorise your annotations into
- Alerts
- Queries
- TODOs
- Highlights
Productivity 📈
Version Control
16. GitLens by Eric Amodio
GitLens helps you to understand code better. Quickly glimpse into whom, why, and when a line or code block was changed. Jump back through history to gain further insights as to how and why the code evolved.
17. Git History by Don Jayamanne
Display a beautiful line graph of the commit history, compare files, commits, and much more!
Aesthetics
18. Prettier — Code Formatter by Esben Petersen
Prettier is an opinionated code formatter. It enforces a consistent style in your code by parsing your code and re-printing it with its own rules, wrapping code when necessary. Do take note of the supported languages, though.
19. [Updated] Polacode-2020 by Jeff Hykin
Take aesthetic screenshots of your code. Never have to fret about presenting your code nicely during meetings again.
20. Settings Sync by Shan Khan
Now that you’ve got your editor set up, time to sync everything to GitHub so that you can transfer your preferences easily to another computer. Have fun!
