10 helpful Visual Studio code Extensions

10 Helpful extensions

ยท

3 min read

Hello

you should have visual studio code install in your computer

if visual studio code not installed read this article and then read article โคโค๐Ÿ˜Ž

1- Auto Rename Tag

The extension when you rename tag have open and close tags the two tags rename

Example:


<span></span>
if you want to rename to icon
first you rename the first tag
<i></span> the second will rename automatically !! to <i></i>

vscode-auto-rename-tag-1.gif

2- Prettier - Code formatter

The extension can format html css js code !!!

download.jpg

3- One Dark Pro

The extension is a beautiful Theme for your interface in visual Studio code

OIP (2).jpg

4- Live Server

Live Server is the best server to refresh the code automatically when you had edited your code he refresh your page

The extension is for Html

5- Live SASS Compiler

If you write code with Sass instead of css you should install this extension

The extension do a live compiler to convert sass to CSS

Steps:

  1. Create A file with in end .sass
  2. In the Status bar word(Watch Sass) click on it
  3. Visual Studio code automatically create an CSS file and do a live compiler

Note ๐Ÿ—’ : if you close the compiler the code you write it not write in the CSS File and if you go to the sass file and open it and open the compiler from the status bar in the bottom he do a live compiler and write your sass in the css file !!!

OIP (4).jpg

6- Path Intellisense

Path Intellisense help you when you want to find a folder path in your code editor

download (2).jpg

7- WakaTime

WakaTime is an extension that read your time on Visual Studio code

This extension is allow for all code editors

sign in and the website will show for you the editors that the extension allow for ....

OIP (5).jpg

  1. PolaCode

PolaCode is an extension that make A pretty Screenshot for code

usage.gif

  1. Vibrancy

Vibrancy is an extension for make a transparent effect

image.png

  1. Better Comments

C#, F#, C/C++, and JavaScript:

image.png

Python:

image.png

Html/XAML:

image.png

Multiline delimited comments (Works only in C#).:

ClassificationMultilineCS.png

Single-line delimited comments (Works in C#, F#, C/C++, and JavaScript):

image.png

Use Pola Code in windows

  1. status bar

Go to Status Bar in the top and hover (View) Tab and Select (Open view...) then click on it

image.png

Then Clear this:

Screenshot 2022-01-27 161334.jpg

Then write:

>polacode

then select the first one and there is A New tab in the right side called PolaCode ๐Ÿ“ธ Follow the instructions in this tab:

image.png

Thanks for reading

Hey, my name is Mohamed Ehab and if you want to join us go to my links:

Twitter
Instagram
Hashnode
Youtube2.

Did you find this article valuable?

Support Programming School by becoming a sponsor. Any amount is appreciated!

ย