What's up Dev !!! 🐱‍💻

Want to be become a Vscode master ?

Want to outshine your peers in development ?

If so, then, this is will show you which are the top 5 Vscode extensions which are needed to start your web development (front-end) in a productive way. 😊

Without wasting time lets jump to our first extension

- Live Server 🌏

If you are tired of jumping from one window to another to get a glimpse of output of your dirty code 😁 you just written a while ago,,, then this extension can give you the soft relief.

What this extension do is:

It will launch a local development server with live reload feature for static & dynamic pages.
So you don't have to reload your browser every time you want to give a look at your output.

You just have to press Ctrl + S to save your work and it will automatically reload your local server where your output is showing.

Things aren’t always #000000 and #FFFFFF 😜

Next one is about fast autocompletion

- Auto Close Tag 🏷

Things can get exhausting when you have to write html tags again and again.

Short story is, After typing in the closing bracket of the opening tag, the closing tag will be inserted automatically.

• Features

  • Automatically add closing tag when you type in the closing bracket of the opening tag
  • After closing tag is inserted, the cursor is between the opening and closing tag
  • Set the tag list that would not be auto closed
  • Automatically close self-closing tag
  • Support auto close tag as Sublime Text 3
  • Use Keyboard Shortcut or Command Palette to add close tag manually

If at first you don’t succeed; call it version 1.0 🐱‍👤

You just written the code and, What now then ? 🤷‍

- Beautify 🥳

Beautify javascript, JSON, CSS, Sass, and HTML in Visual Studio Code.

This will turn your messy code into the human readable way (no pun here).

What else you need.

You just have to right click on desired file and press format file option and then select beautify extension.
And you are good to go.

Now give your CSS some superpowers by :

- Live SASS Compiler 🎨

If you want to extend your CSS powers with pre-compiler like SASS, then this extension can save you.

It compiles your .scss file and generate it's equivalent pure .css on the go.

- Features

• Live SASS & SCSS Compile.
• Customizable file location of exported CSS.
• Customizable extension name (.css or .min.css).

Make your workplace better and sexier.

- Peacock 🦚

Another creation from John Papa.

Subtly change the color of your Visual Studio Code workspace.

Ideal when you have multiple VS Code instances, use VS Live Share, or use VS Code's Remote features, and you want to quickly identify your editor.

Have a great day !

Author: Jayesh 🧡