Productivity, Technical

Become more productive on Visual Studio Code with these extensions

Visual Studio Code (VS Code) is a great IDE for every developer not for it’s free but also from various of extensions that can boost your daily coding productivity. Today let’s check some extensions that have helped me to be more productive on VS Code.


GitLens — Git supercharged - Visual Studio Marketplace

GitLens is VS Code extension that helped you to review the author or every line of code also you can explore author’s commits, explore and discover histories between files.



Want to write more strict and clean JavaScript code? This extension can help you a lot on it. This extension analyzing your code statically and quickly find bad format code or potential bugs on your code.

Furthermore it also raises some suggestion for you to quickly fix code problem which really convenient when coding. You can also config a lot of factor with ESLint on your own so that your project have a right structure that defined by your own strict.


Prettier helps you to formatting your code quickly on a consistent style. With lot of users and contributors, this extension now support most of require for front-end development.

Todo Tree

You can always count on this extension to help you manage all TODO comments you marked on your entire project folder.

open in browser

This simple extension can help quickly open your html file within VS Code IDE which cut the time you have to search html file on your explorer. You can choice between open file on default browser or open on other browsers you like.

Live Server

If above extension is not enough for your coding requirement, this extension can help you on review live change of your code with on click by launch a local development server on your default browser. Beside, this extension also support other features like:

  • Customizable Port Number, Server Root, default browser.
  • Remote Connect through WLAN.
  • Support for proxy.
  • CORS enable.

Auto Import

This extension helps you on remove your paint of import manually on JavaScript development by automatically import and parse available imports on your project. This also support import on TSX and TypeScript files.

Auto Rename Tag

Change your html tags and we always have to rename the tags twice. This one helps you automatically rename when you make a change on html tag.

Here is my list of extensions that boost my productivity. If you like this article please don’t hesitate to share and like.