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!
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
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-vscodeAuto 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
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
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.
SVGSupporthttpsSupport.- Support for proxy.
- CORS Enabled
- Multi-root workspace supported
Visual Studio 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
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
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 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.