VS Code Extensions I Wish I Knew About Before My Bootcamp

Learning a new skill can be incredibly daunting. Having these tools helped me tremendously but I didn’t know about most of them until half way through my coding bootcamp. Here are some extensions that I use in my set up that you may find useful.

Code Spell Checker

Though it seems simple, this extension has caught more bugs than probably any other tool I use! Your code can’t compile if you typed calss instead of class — Code Spell Checker will catch those little typos by underlining them in VS Code.

Auto Rename Tag

If you need to rename an HTML element tag this extension allows you to edit both the opening and closing tags at the same time. It also works with JSX so this extension will come in handy with React as well!

Prettier — Code Formatter

Prettier is a code formatter that will parse through your code and leave it more readable. This extension helped me to write cleaner looking code and understand best practices.

Live Server

Live Server allows you to right click on an html file and open a locally served browser window. The best part is that the connection is live — every time you save your file, those changes are visible in the browser window without needing to refresh.

HTML CSS Support

This extension offers code completion and other support features for writing HTML/CSS in VS Code — very helpful!

JavaScript (ES6) Code Snippets

This extension is incredibly useful when learning JavaScript basics. It will provide code snippets that will improve your workflow.

vscode-icons

This extension improves the file icons that appear in your code editor and can be very helpful when searching for specific file types. It helps everything stand out.

Simple React Snippets

This extension will come in handy when learning React. I use this extension every day of my professional developer life! It provides commands and snippets to set up React components quickly.

GitLens

This is a powerful tool especially for collaboration — it will show you information about the the changes to code inside your editor. Super handy to track down commits.

Path Intellisense

Autocompletion suggestions for file paths. You will do a lot of linking and importing of files within your projects — this extension reduces errors in your path names.

Markdown All in One

A large percentage of your grade depends on having a quality README.md — this extension helps with mardown syntax highlighting, keyboard shortcuts, and auto completion.

Where To Add Extensions:

By clicking on the extensions icon (fifth one from the top) you can search extensions in the Market place.