• Whizzystack Solutions

15 Essential Plugins for Visual Studio Code

Updated: Jun 28




Visual Studio Code could be a free, cross-platform text editor developed by Microsoft. It’s quickly changing into a crowd favorite because of its glorious performance and therefore the exuberant quantity of options it offers.

Just like most day, VSCode has AN extension marketplace containing thousands of plugins with varied quality. To assist you decide out that value downloading, we have a tendency to create this assortment of the extensions we have a tendency to found most helpful and fun.


Open-In-Browser



VSCode does not supply any inbuilt interface for gap files directly within the browser. This extension adds a Open With Default Browser item to the discourse menu, likewise as command palette choices for gap in an exceedingly consumer of your selection (Firefox, Chrome, IE).


Quokka


Quokka may be a debugging tool that offers live feedback on the code you're writing. It shows you previews of the results of functions and calculated values for variables. The extension is straightforward to tack and works out of the box with JSX or matter comes.


Faker


Quickly insert placeholder knowledge mistreatment the popular cheat JavaScript library. you'll generate random names, addresses, images, phone numbers, or simply paragraphs of classic Lorem Ipsum. every class has numerous subcategories thus you'll create the information suit your wants.


CSS Peek


With this extension you'll trace the definitions of CSS categories and ids in your stylesheets. after you right click on a selector in your hypertext markup language files, selecting the choices move to Definition and Peek definition can send you to the CSS code during which you've got titled them.


HTML Boilerplate


The hypertext markup language boilerplate extension can prevent from having to manually write the head and body tags of a new HTML document. Just type html top and body tags of a document. in empty file, hit the tab, and a clean document structure are going to be generated.


Prettier


Prettier is that the preferred code formatter in internet dev at once. It permits your team's code look a similar, notwithstanding WHO wrote it. This extension makes it doable to mechanically apply Prettier and quickly format whole JS and CSS documents. If you furthermore might need to throw ESLint within the combine, there's is Prettier - Eslint.


Color Info


Small plugin that provides you numerous info concerning the colours you've got utilized in your CSS. By hovering on a color you'll see a bigger preview of however it's, further as data concerning its translation to any or all formats (hex, rgb, hsl, and cmyk).


SVG Viewer


This extension adds variety of utilities for operating with SVGs in Visual Studio Code. It makes it doable to render SVG files and see however they appear like while not having to depart the editor. There are choices for changing to PNG and generating information URI schemes.


TODO Highlight


This tool marks all TODO comments in your code, creating it easier to trace down any loose end before pushing to production. By default it's for TODO and FIXME keywords however you'll add your custom expressions likewise.


Icon Fonts


Tiny snippets for together with icon fonts in your project (from a CDN) then adding the icons themselves. The extension supports over twenty in style icon sets, together with Font awe-inspiring, Ionicons, Glyphicons, and Material style Icons.


Minify


Extension for minifying your code. It offers a ton of customization settings and the option to automatically minify on save and export to a .min file. Minify works with JavaScript, CSS, and HTML through uglify-js, clean-css, and html-minifier respectively.


Change Case


VSCode has restricted choices for reworking text. Out of the box it will solely do minuscule and majuscule transforms. This plugin adds a great deal additional commands for modifying strings, together with camelCase, kebab-case, snake_case, CONST_CASE, and others.


Regex Previewer


Useful tool for live testing your regular expressions. It works by applying the regex pattern over any document opened to the facet, highlight all the matches. kind of like RegExr however right within your editor!.



Language and Framework Packs


VSCode ships with support for an outsized range of languages. If for a few reason your programing language of alternative is not enclosed, you'll be able to transfer associate degree extension pack which is able to add autocompletion, correct indentation, and different utilities. Some net dev frameworks like like react native and vue also offer language packs.



Themes


Of course, the foremost necessary of all extensions area unit the themes. you will be watching your VSCode editor daily, why not build it additional beautiful? There area unit loads of customization plugins that amendment the colour theme and therefore the icons within the sidebar. Here area unit a number of our favorites:

  • One Monolai

  • Aglia

  • One Dark

  • Material Icon

I hope you understand the article…..


We will be happy to answer your questions on designing, developing, and deploying comprehensive enterprise web, mobile apps and customized software solutions that best fit your organization needs.

As a reputed Software Solutions Developer we have expertise in providing dedicated

remote and outsourced technical resources for software services at very nominal cost. Besides experts in full stacks We also build web solutions, mobile apps and work on system integration, performance enhancement, cloud migrations and big data analytics. Don’t hesitate to get in touch with us!

0 views
whizzystack logo

About Us

 

We build & support your own talented, trusted, full-time development team hosted out of Whizzystack’s headquarters in India. We also deliver world class product and software development services Read more

Whizzystack

Our Developers

Contact Us

 New Jersey     

+1(877)3685420

 sid.baker@whizzystack.com 

 

 India   

+91(95)60641297

 +91(120)4287309 

 info@whizzystack.com

Subscribe to Our Blog

Sign up to receive email notifications when Whizzystack drops more knowledge.

  • LinkedIn
  • Facebook
  • Twitter
  • Instagram
  • RSS