10 VS code extensions to make your Web development journey easier
Coding on Visual Studio Code can be boring and unproductive at times when you don’t have the conveniency of testing/debugging. Luckily for us, Microsoft has a marketplace of extensions that we can pick and choose whatever we like. I’m going to give you a list of some of my favorite extensions I personally use when I code to prevent me from pulling out my hair. To get started, first find the extension tab on VS code located on the left-hand side with the 4 squares icon. You can also press Shift + Ctrl + X on Windows, or Shift + Cmd + X on Mac . Once you open the extensions tab up, this is where the list of fun begins.
1. Code Spell Checker
Code Spell Checker help catch any common spelling errors you might have typed. It also works with camelCase words as well.
2. vscode-icons
VScode-icons is more for a visual flair to help located your long list of files and folders in a massive project. Each one of your files/folders will be equipped with a icon to help visually find a specific folder.
3. Bracket Pair Colorizer
This is one is a personal favorite of mine due to the amount of brackets there are in various projects. This extension will help developers identify which bracket is which with the paired colors.
4. Path Intellisense
This extension can help pinpoint the exact location of certain files by autocompleting the filename/path.
5. Git Lens
Git Lens takes the current Git commands and sends it flying. It helps you to visualize code authorship at a glance via Git blame annotations and code lens, navigate and explore Git repositories, gain insights via powerful comparison commands, and so much more.
6. Prettier
The Prettier extension help gives a consistent style by parsing your code and re-aligning it to its own rules (or your rules). Prettier formats your code for you, significantly reducing the amount of time formatting it yourself.
7. Quokka.js
Quokka is a neat little tool that can increase your JavaScript prototyping. Taking access to your project’s files, Runtime values are updated and displayed in your IDE.
8. Git History
Very similar to Git Lens, Git History gives you an entire log of git commands on a certain repository. It allows you to compare branches, commits, and files across commits. You can also look up Github avatars, which is quite neat.
9. Debugger for Chrome
Developed by Microsoft, Debugger for Chrome allows you to debug your JavaScript code in VS code. You can set breakpoints, step your way through the code, debug scripts, and more. No more having to open up devtools in chrome anymore.
10. JavaScript (ES6) code snippets
JavaScript Code Snippet enhances the experience by adding a list of import/export triggers, class helpers, and method triggers. This extension also supports JavaScript, TypeScript, React, HTML, Angular and Vue.
