Increase your productivity by setting up your VS CODE!

Increase your productivity by setting up your VS CODE!

“Give ordinary people the right tools and they will design and build the most extraordinary things.” — Neil Gershenfeld

Visual Studio Code is one of the most widely used code editors in the developer community. One of the reasons for VS Code’s popularity is its many extensions that speed up the development process.

Let us know about my favourite VS Code extensions

Live Server launches a local development server with a live reload feature both for static and dynamic pages.

Every time you save your code, you'll instantly see the changes reflected in the browser. You'll be much faster at spotting errors and it's much easier to do some quick experiments with your code.

Screenshot 2021-06-28 at 4.48.25 PM.png


Prettier is an opinionated code formatter. It enforces a consistent style so it formats your code every time you save it, significantly reducing the amount of time you need to spend formatting your code.

Screenshot 2021-06-28 at 4.37.24 PM.png


Automatically rename paired HTML/XML tag. The extension works for HTML, XML, PHP, and JavaScript, and removes the need to change your tag names twice.

Auto Rename Tag


Better Comments is designed to help you write more human-friendly comments in your code. It's good practice to have descriptive comments so that it could save a lot of time for you and your team and the developers won't get lost in their own code.

Screenshot 2021-06-28 at 4.57.17 PM.png


It helps you to navigate in your code, moving between important positions easily and quickly. No more need to search for code. It also supports a set of selection commands, which allows you to select bookmarked lines and regions between bookmarked lines. It's really useful for log file analysis.

Screenshot 2021-06-28 at 5.03.54 PM.png


This extension allows matching brackets to be identified with colours. The user can define which characters to match, and which colours to use. Believe me it will save you from annoying confusion!

Bracket Pair Colorizer Example


Markdown All in One is a single extension that takes care of all your markdown needs, such as auto-preview, shortcuts, autocomplete, etc.

Markdown Example


Sometimes you forget to review the TODOs you've added while coding before you publish the code to production. So this extension highlights them and reminds youy that there are notes or things not done yet.

Screenshot 2021-06-28 at 5.20.12 PM.png


GitLens simply helps you better understand code. Quickly glimpse into whom, why, and when a line or code block was changed. Jump back through history to gain further insights as to how and why the code evolved. Effortlessly explore the history and evolution of a codebase.

GitLens Example


  • CSS Peek

    CSS Peek allows you to extend your HTML and ejs file to show CSS/SCSS/LESS code within the source code. It also allows you to quickly jump to the right CSS code if you know the class or ID name.

CSS Peek example


Before you leave, You can connect with me on Twitter.