8 VS Code Extensions for Beginners

and useful shortcuts to make coding easier and prettier

Thanks for the visit! Check out my work on GitHub or connect with me on LinkedIn.

Photo by Maxwell Nelson on Unsplash

I recently took the time to organize my VS Code by installing some extensions that I have found to be helpful in the earlier days of my coding journey. If you haven’t already downloaded VS Code… what are you doing?? Go get it and come back to get the extensions.

Download Visual Studio Code - Mac, Linux, Windows

It’s no surprise that VS Code is one of the most popular editors to date. With its many options and features available, (mostly open source and free) of course, it’s user base continues to grow.

If you’re new to the editor or looking to make life a bit easier, this list is perfect for you. These extensions will cover the basic needs of most all developers getting started. From the more functional time savers to simply personalizing the look of your editor; these will not disappoint. Not to mention, the list of shortcuts that will get you closer to your machine!

Open Extensions Marketplace by clicking on this icon in your VS Code side bar menu.

1. Auto Close Tag (3.37M installs)

http://peterforgacs.github.io/2017/05/25/Best-vscode-plugins/

This extension is a no brainer for all html users. Once you create an opening tag, the corresponding closing tag will be created as well. Tags are easy to lose track of- this will eliminate that headache.

2. Bracket Pair Colorize (3.58M installs)

https://twitter.com/Nico_codes/status/1265384397223743490/photo/1

Keep track of your paired brackets with this fun colorizer. This allows you to easily recognize where your bracket sets are within your code. Also, a great help for seeing the scope of nested data.

3. Material Theme (2.58M installs)

Easily customize your VS code with this extension by choosing a color theme. With a handful of light or dark, colorful or monotone options to choose from, you can continue to keep your code looking fresh!

4. Prettier (8.3M installs)

https://www.quora.com/What-are-the-best-VS-Code-extensions-for-Javascript

This code formatter is a must for those with OCD, for better readability & mostly, for keeping your indentations right where they should be.

5. Color Highlight (1.22M installs)

https://ihatetomatoes.net/useful-vscode-extensions-visual-enhancements/

Styles any CSS/ web colors found in your document by giving you a sample of the color that you have set.

6. Live Share (2.8M installs)

https://visualstudio.microsoft.com/services/live-share/

This is the Google docs of VS Code. You are able to collaboratively edit code with shared terminal use in real time with any language.

7. Live Server (7.2M installs)

https://ritwickdey.github.io/vscode-live-server/

With this we can launch a local development server with a live reload feature for static and dynamic pages. Ensuring that your browser refreshes exactly when it should.

8. Settings Sync (1.96M installs)

https://marketplace.visualstudio.com/items?itemName=Shan.code-settings-sync

Now that you have all of your extensions installed and settings just how you like them, use Settings Sync to carry over these preferences onto your other machines.

Shortcuts :

(Specific to Mac users)

ctrl + `

Pulls up your in editor terminal- no need to leave your VS Code!

ctrl + C

This is the in terminal break key

ctrl + shift + F

Searches text through all files at once

ctrl + shift + T

Reopens previously closed tabs- can be used multiple times

ctrl + option + R

Reloads your editor without having to close your window

ctrl + delete

Deletes the last word typed- time saver!

ctrl + /

Highlight what you want to comment out then use this key combo to comment or un-comment your selection

option + arrow key

Select the line(s) of code that you want to move up or down with this shortcut and make it happen

I hope this list helps you get started with your VS Code and on your coding journey!

Haley Proctor - Flatiron School - Austin, Texas Area | LinkedIn