Extensions allow you to add functionality to VS Code. Learning how to work with them will help you to work faster and more efficiently and sometimes better understand your files and see mistakes that you’ve made.
How to Add Extensions
VIEWING INFORMATION
These change the VS Code interface to add color coding, information about things like Git, mistakes and more.
- GitLens:
- Shows who edited each line and when
- Adds Options to the Source Control Layout to see Commits/repositories/branches etc.
- Can show as separate GitLensarea instead.
- Git History
- Lets you compare files/commits/banches
- Adds options to create branches
- Prettier
- Format Selection
- Format Document
- Can get to it through right click
- Highlight Matching Tag
- When you select a tag, it puts a yellow underline by its pair so you can see the opening and closing tags.
- Bracket Pair Colorizer 2
- In JavaScript matches brackets [ { (
WORKING WITH CODE
These let you peform actions on the files in your repository
- Live Server
- Allows you to run a server and have your page updated.
- HTML CSS Support
- This gives you HTML id and class completion so you don’t accidentally type the wrong class or ID name when making an element. Requires that you’ve already defined the id or class in your CSS file.
- CSS PEEK
- This is a feature like Brackets that lets you see what CSS styles area applied to an element and even edit those styles.
- Auto Rename Tag
- When you change the name of an opening or closing tag this will also change the name of the other tag for you so you don’t forget to change both.
VIDEOS
- Visual Studio Code Web Dev Setup in 6 Minutes [6m 46s] (codeSTACKr) https://youtu.be/4NfFFsQC77M
- 10 best VS Code Extensions [17m 36 s] (codeSTACKr) https://youtu.be/c5GAS_PMXDs
- Visual Studio Code Crash Course: [1hr 32m 5s] (freeCodeCamp.org): https://youtu.be/WPqXP_kLzpo
1 comment