Posted in Extention, IDE, Interview, Plugin, VS Code

Top Visual Studio Code extensions for developers

Live Sass compiler

This VS Code extension is used for compiling SCSS files to CSS files quickly compared to other compilers like Visual Studio extensions. This is handy for web developers while developing webpages with SCSS files. You can find detailed information regarding this in the following link.

https://marketplace.visualstudio.com/items?itemName=ritwickdey.live-sass

Auto Rename Tag

As the name implies, it aids in renaming tags. This saves time when renaming tags in a nested codebase and also helps in preventing future runtime bugs.

https://marketplace.visualstudio.com/items?itemName=formulahendry.auto-rename-tag

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

CSS Peek

As its name suggests, this extension lets you jump to the CSS code using classes and IDs.

The extension supports all the normal capabilities of symbol definition tracking but does it for css selectors (classes, IDs and HTML tags). This includes:
Peek: load the css file inline and make quick edits right there. (Ctrl+Shift+F12)
Go To: jump directly to the css file or open it in a new editor (F12)
Hover: show the definition in a hover over the symbol (Ctrl+hover)

https://marketplace.visualstudio.com/items?itemName=pranaygp.vscode-css-peek

Live Server

This extension is used for launching a development local server with a live reload feature for static and dynamic pages. This saves times for previewing the changes made to your source code by just making the changes in the VS code and saving the file. This will automatically refresh the browser and reflect the changes you have made in it, instead of us manually refreshing the browser page. You can find the detailed information regarding this extension in the following link.

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.[Quick Gif Demo].
  • Support for excluding files for change detection.
  • Hot Key control.
  • Customizable Port Number, Server Root, default browser.
  • Support for any browser (Eg: Firefox Nightly) using advance Command Line.
  • Support for Chrome Debugging Attachment (More Info). [Quick Gif Demo].
  • Remote Connect through WLAN (E.g.: Connect with mobile) [Need Help? See FAQ Section]
  • Use preferable host name (localhost or 127.0.0.1).
  • Customizable Supporting Tag for Live Reload feature. (Default is Body or head)
  • SVG Support
  • https Support.
  • Support for proxy.
  • CORS Enabled
  • Multi-root workspace supported.
  • Support for any file even dynamic pages through Live Server Web Extension.

GitLens

GitLens is a git tracker that watches the entire code and keeps track of:

  • Which part of the code was updated or pushed.
  • when it was pushed.
  • who pushed it, what was pushed.
  • Overall changes made.

This helps in understanding the codebase quickly when working in a team.

https://marketplace.visualstudio.com/items?itemName=eamodio.gitlens

Leave a Reply

Your email address will not be published. Required fields are marked *