5 vs code extension to make coding environment more attracting
Tags: vscode, extension, codenewbie, codequality
Published: 2021-07-14 07:22:51

VS code is simply awesome. These 5 extensions are like **cherry on top**.
so let's jump to the extensions-

1. SynthWave '84 : 
----------------- 
Link: [click here](https://marketplace.visualstudio.com/items?itemName=RobbOwen.synthwave-vscode)
  * This is a theme extension and it's become popular day by day for it's beautiful dark look and feel. It also has certain text glow option which also looks great .
  * sometimes the text glow disappear (very rare case) then you just need to do `shift + ctrl + p` and type 'synthWave' and select it. Then just need to reload vs code and now it's fine.
  * But if you don't like the glow you can turn off in setting. 
![SynthWave '84](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/22khyoutuxs1h6xczeli.jpg)
some other themes are '[JellyFish Theme](https://marketplace.visualstudio.com/items?itemName=PawelBorkar.jellyfish)', '[Omni Theme](https://marketplace.visualstudio.com/items?itemName=rocketseat.theme-omni)', '[Palenight Theme](https://marketplace.visualstudio.com/items?itemName=whizkydee.material-palenight-theme)', '[Viow Color Theme](https://marketplace.visualstudio.com/items?itemName=Youssef.viow)' , '[Material themes](https://marketplace.visualstudio.com/items?itemName=Equinusocio.vsc-material-theme)' etc.



2.  Indent-Rainbow :
-----------------
Link: [click here](https://marketplace.visualstudio.com/items?itemName=oderwat.indent-rainbow)
Most of programming language need to follow indentation and it increases the code readability. TO make the indentation more clear this extension will help you much.
![Indent-Rainbow](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/atgmusakr5jnsvpfhju9.jpg)
Now let see how it's looks like in code: 👇🏻
![Indent-Rainbow-ex](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/87iadgo8ayokcygbkwii.jpg)
* You can also change the indentation color in setting, but i think black is quite good.
* If your indentation is wrong then the color turns to red and gives you warning.



3. @import-font :
--------------
Link: [click here](https://marketplace.visualstudio.com/items?itemName=titenq.import-font)
when we writing CSS , for fonts we need to go google font then get the font's link and then paste on html or CSS file. Now with this extension you don't need to go anywhere. you just write font name starting with '@'. And thats it.
![@import-font](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/otmc33jcjksdjyw4zoqx.jpg)
how to use in CSS file 👇🏻
![@import-font-ex](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/rjmbu0yvqdcna6fxy66g.jpg)
![@import-font-ex2](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/ka6qq6btaofy2iqp1hze.jpg)

4. Better Comments :
----------------
Link: [click here](https://marketplace.visualstudio.com/items?itemName=aaron-bond.better-comments)
Everybody do comments on code. sometimes whatever we commenting is maybe very important to remind or less important or writing a question on whatever you learning on that point. Main point is there is various level of comments and to filter the comment's level this extension will help you.
* you can give different colors in more important, less important, heading, question and whatever you want all can be customize in setting.
* you need to give some symbol after the actual comment command like * or ? or # or any symbol you can customize from default.
![Better Comments](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/ddw9bzy0brynwwadx8tq.jpg)

Here is an example for you about how it's looks👇🏻
![Better Comments ex](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/fezsqfylb9osy4bn5k6i.jpg)
👆🏻Here symbols are customized from default symbols that you also can do.

5. Code Spell Checker :
-----------------------
Link: [click here](https://marketplace.visualstudio.com/items?itemName=streetsidesoftware.code-spell-checker)
while writing code there we gets auto complete so there this extension has not much use but in writing comments we don't get word suggestion or auto complete so there if we write wrong spelling of a word then the word will be underlined and to get correct word's suggestion we need to type `ctrl + .` having cursor on the word.

![Code Spell Checker](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/mn4f5bdml7t3o7jw7uqz.jpg)

------------------------------------
I assure you these 5 extension will attracts your attention day by day while coding.

-------------------------------------------
###And connect with me on [twitter](https://twitter.com/Sahilsaif2002) for other JavaScript and CSS stuff.

so for today this ends here. But let me know should I make part 2 of this?