VS code Plugins and built-ins to boost productivity (with previews)

babib

ππšπ›π’ ✨

Posted on April 13, 2021

VS code Plugins and built-ins to boost productivity (with previews)

Are you trying to setup your workspace so as to ease your work and boost your productivity? This is for you

When I started out, there was an overwhelming urge to test out every code editor there was, try out every shortcut and install every extension. Yeah, the excitement was immense!πŸ˜….

Here are some extensions that I have found truly useful in my learning journey.

PS: The text editor used here is visual studio codes...did I say that already?

1. Prettier

Prettier integrates with your editor, so your code is tidied up every time you save your changes. It makes the code more readable and consistent with your project's style guide.

Alt Text

How to set up Prettier plugin

2. Linked Editing

VS code now has a built-in, called linked editing, separate from auto rename tag extension for editing a tag when its matching closing tag is modified.The command to enable linked editing is Start Linked Editing (Ctrl+Shift+F2) and Escape disables linked editing mode.

Or on the UI, search for editor.linkedEditing your settings and enable it

image

Alt Text

How to set up plugin

3. Live server

This extension automatically refreshes the browser whenever you save your work. It is especially useful when working with html, css and js projects.

Alt Text

How to set up plugin

4. Bracket Pair Colorizer2

Alt Text

This extension matches a bracket pair with a unique color. You'll find this extension quite useful when browsing through your code especially when you have several scopes deep in your code.

Alt Text

How to set up plugin

5. Indent-rainbow

This extension increases the readability of your code and makes it easy to browse throught your work.

Alt Text

How to set up plugin

6. Path intellisense

This extension autocompletes file paths when referencing them in a link.

Alt Text

How to set up plugin

7. Material Icon Theme

Material Icon Theme makes icons more obvious to the eye. So you can quicky identify different files types from each other.

Alt Text

How to set up plugin

8. Theme

It's always nice to enjoy your coding experience and you could definitely spice it by adding a theme and the good news is the is a long list from which you could pick according to your taste.

Personally, I like the Palenight theme. It's quite elegant😏

Alt Text

How to set up plugin

Hey this is just a limited list of extensions you can find on VS code, there's so much more out there.

Comment down below on which extension you found(or think is) most useful as a beginner programmer.

Edited: Thank you all for the corrections in your comments.

                                          πŸ’ž Babi
Enter fullscreen mode Exit fullscreen mode
πŸ’– πŸ’ͺ πŸ™… 🚩

Join Our Newsletter. No Spam, Only the good stuff.

Sign up to receive the latest update from our blog.

Related