Subrata Sarkar

8 VSCODE Extensions to increase your Development Skill in 2022

Visual Studio Code or VSCODE is the most popular free code editor available. It is lightweight, fast and efficient cross-platform editor out there till date. As a result of that, Visual Studio Code had become the number one code editor and is maintaining its paosition in the list of popular code editors for a while!

Comparison between various Code Editors

Hundreds of free extensions are available for VSCODE and they are meant for different purposes. Finding the right one is not easy. So, to make things easy, I will hand-pick eight of them which are extremely helpful and easy to use. For me, these are absolutely essential ingradients in my daily development recipe!

NOTE: PHPStorm is another very popular IDE mostly used by PHP developers. However, unlike VSCODE, this is not free. You need a license to use it. I have a separate article on PHPStorm. If you are interested, youmay visit https://subratasarkar.com/7-essential-phpstorm-tips-tricks-to-boost-your-productivity/ and learn more.

VSCODE Extensions for code layout

Prettier – Code Formatter

Pretier Code Formatter

Prettier is an opinionated code formatter. It enforces a consistent style by parsing your code and re-printing it with its own rules that take the maximum line length into account, wrapping code when necessary.

INSTALLATION

Install through VS Code extensions. Search for Prettier - Code formatter

Visual Studio Code Market Place: Prettier – Code formatter

Can also be installed in VS Code: Launch VS Code Quick Open (Ctrl+P), paste the following command, and press enter.

ext install esbenp.prettier-vscode

Auto Rename Tag

Extension: Auto Rename Tag

Automatically rename paired HTML/XML tag, same as Visual Studio IDE does.

INSTALLATION

Start VSCODE. Press Ctrl+Shift+X to open the Extension panel. Serch for Auto Rename Tag and hit Install.

CONFIGURATION

Add entry into auto-rename-tag.activationOnLanguage to set the languages that the extension will be activated. By default, it is ["*"] and will be activated for all languages.

{
  "auto-rename-tag.activationOnLanguage": ["html", "xml", "php", "javascript"]
}

Rainbow Brackets

VSCODE Extension: Rainbow Brackets

Provide rainbow colors for the round brackets, the square brackets and the squiggly brackets. This is particularly useful for Lisp or Clojure programmers, and of course, JavaScript, and other programmers.

INSTALLATION

After starting VSCODE, hit F1 and type ext. Select Install Extension and type rainbow-brackets. Hit enter and reload window to enable.

VSCODE Extensions for sharing and collaboration

Live Server

VSCODE Extension: Live Server

Launches a development local Server with live reload feature for both static & dynamic pages.

INSTALLATION

Run VSCODE and press ctrl+P. Type ext install ritwickdey.liveserver.

FEATURES

  • A Quick Development Live Server with live browser reload.
  • Start or Stop server by a single click from status bar.
  • Open a HTML file to browser from Explorer menu.
  • Support for excluding files for change detection.
  • Hot Key control.
  • Customizable Port Number, Server Root, default browser.
  • Support for any browser using advance Command Line.
  • Chrome Debugging Attachment is supported.
  • Remote Connect through WLAN (E.g.: Connect with mobile)
  • Use preferable host name (localhost or 127.0.0.1).
  • Customizable Supporting Tag for Live Reload feature.
  • SVG Support
  • https Support.
  • Support for proxy.
  • CORS Enabled
  • Multi-root workspace supported

Visual Studio Live Share

VSCODE Extension: Live Share

“Visual Studio Live Share” extension for VSCODE enables you to collaboratively edit and debug with others in real time, regardless what programming languages you’re using or app types you’re building. It allows you to instantly and securely share your current project, and then as needed, share debugging sessions, terminal instances, localhost web apps, voice calls, and more!

INSTALLATION

Search for “Live Share” and click Install.

VSCODE Extensions for quick development

Live SASS Compiler

Live SASS Compiler

A VSCode Extension that helps you to compile/transpile your SASS/SCSS files to CSS files at realtime with live browser reload.

INSTALLATION

Inside VSCODE Editor, press ctrl+P. Type ext install live-sass.

DEPENDENCY

This extension has dependency on “Live Server” extension for live browser reload.

FEATURES

  • Live SASS & SCSS Compile.
  • Customizable file location, file name extension and exported CSS Style.
  • Quick Status bar control.
  • Exclude Specific Folders by settings.
  • Live Reload to browser (Dependency on Live Server extension).
  • Autoprefix Supported (See setting section)

JavaScript (ES6) Code Snippets

EX6 Code Snippet VSCODE Extension

It contains code snippets for JavaScript in ES6 syntax for VSCODE editor (supports both JavaScript and TypeScript).

Note:
All the snippets include the final semicolon(;). There is a fork of those snippets here made by @jmsv where semicolons are not included. So feel free to use them according to your needs.

INSTALLATION

In order to install an extension you need to launch the Command Palette (Ctrl + Shift + P or Cmd + Shift + P) and type Extensions. There you have either the option to show the already installed snippets or install new ones. Search for JavaScript (ES6) code snippets and install it.

SUPPORTED LANGUAGES

  • JavaScript (.js)
  • TypeScript (.ts)
  • JavaScript React (.jsx)
  • TypeScript React (.tsx)
  • Html (.html)
  • Vue (.vue)

VSCODE Extensions for repository management

GitLens

GitLens - bring Git inside VSCODE

GitLens supercharges Git inside VS Code and unlocks untapped knowledge within each repository. It helps you to visualize code authorship at a glance via Git blame annotations and CodeLens, seamlessly navigate and explore Git repositories, gain valuable insights via rich visualizations and powerful comparison commands, and so much more.

Note:
All the snippets include the final semicolon(;). There is a fork of those snippets here made by @jmsv where semicolons are not included. So feel free to use them according to your needs.

INSTALLATION

Go to Extenstions Panel, seach for GitLens and install it.

Leave a Reply

Your email address will not be published.