Top 6 VS-Code Extensions for Software Developers

Dec 7th 2020 | 3 Min Read

vscodehtmlcssextendions

Visual Studio Code is a product of Microsoft for Windows, macOS, and Linux operating systems. VS-Code includes support for embedded Git control, debugging, GitHub, snippets, syntax highlighting intelligent code completion, and the most important thing it will refactor your code.

Prettier

Prettier is an opinionated code formatter. The prettier extension makes your code nice and formatted. The awesome thing is that it’s not only working on js but it also works on HTML and CSS files. Instead of manually run a command to format the code, Prettier allows you to format your code on save. This has some great benefits.



Live Server

Normally when we change our code or write something new we do need to refresh the browser manually to see the changes. Let’s say we have 50 changes each day we need to refresh the browser 50 times. Luckily with the Live Server extension, the browser is automatically refreshed when something is changed in the code. Almost every developer categorizes this extension as a must-have because it boosts productivity.



EsLint

This extension autoformats code for consistent formatting across teams. Sounds familiar? Yeah, it’s very similar to Prettier, but it also has its own unique features. e.g, EsLint, whenever devs make an error in their code, will make sure they are aware of it, and EsLint gives them options to fix the issue. EsLint also takes care of code quality rules such as no-implicit-globals, no-extra-bind no-unused-vars, etc.



ES6 JavaScript

While VSCode includes built-in JS IntelliSense, Javascript Code Snippet enhances that experience by adding a slew of class helpers, import/export triggers, and method triggers.

ES6 Javascript extension supports JS, JS React, TS React, TypeScript, HTML, and Vue. In the VSCode Marketplace, code snippets for other flavors, such as Angular, are also readily available.


Live Server

Live Server extension is used for launching a development local server with a live reload feature for both dynamic and static pages. This saves enough time for previewing the changes made to the source code by just making the changes in the VS code and saving the file and Liver Server will automatically refresh the browser and reflect the changes you have made in it, instead of manually refreshing the browser page. 

 

Settings Sync

Modern developers often need to work on multiple systems for different projects. You might use an entirely different workstation for every individual project while office work may require some entirely different systems. Anyhow, it can take considerable effort to concentrate on projects rather than IDE settings, and this results in a severe decline in productivity. Luckily for you, the Settings Sync extension is here to manage your dev configs conveniently and hassle-free across all of your workstations.

 










More From Web Development

Subscribe to our news letter

Enter your email to get wapgee notification