Skip to main content

Beautify your VS code

Extensions to make VS code more beautify

VS code is the most popular text editor used by web developer. VS code is lightweight, open-source and cross platform these are some main reasons behind the popularity of VS code. But the main reason behind the popularity is VS code is very extensible and you can install extensions for almost all the popular programming languages, you can find an extension or a plugin which will satisfy your need. Most of the text-editors and IDE become slow as you add more extensions to it but that's not the case with VS code. 

You can also customize the look and feel of VS code to a great extent using extensions. So, here is the list of my recommended extensions which you can use to increase the beauty of your VS code.

1. Themes 

Themes are the first thing that comes in my mind when you start thinking of customization. So, here are my favorite themes. 

[ I personally prefer dark themes, So forgive if you don't find good light themes in the list]

a) Winter is Coming

In the extension there are three themes: Dark, Dark Blue and light themes with italics and no-italics. The best theme I found in the list is Dark Blue, this theme, I find it soothing my eye and give VS code a nice look. This is my current theme.

winter is coming
Winter is Coming Dark Blue theme with italics


b) Material Theme 

If you are in search of simple and elegant themes then you should try Material themes. It got nine different options from which you can choose from. Everyone can find a good theme in the list. From the list I like the ocean the most. 

Material Theme Ocean
Material Theme Ocean

c) Material Icon Theme

Bring icons to VS code, Material Icon Theme adds icon to the folder/file you created based on its name and file type. Sometimes the icons help you to identify what is the file type or what type of files a folder contains, I suggest you should try the icon theme once. 
Material Icon Theme
Material Icon Theme


2. Bracket Pair Colorizer

Bracket Pair Colorizer is an amazing extension which colorizes the bracket pair which makes it easy to find the brackets, this extension also shows a line around code in which the cursor is present. You can customize it according to your use by defining which characters to match and which color to use.
Bracket Pair Colorizer
Bracket Pair Colorizer


3. Intent Rainbow

Intent Rainbow colorizes the intention in front of your text. Developers working in python and Nim find it useful. This colorization intents looks good and gives a good feel.
Intent Rainbow
Intent Rainbow


4. Prettier- code formatter

Prettier does what its name suggests, it increases the readability of your code and makes it look good. Prettier enforces a consistent style by parsing your code and reprinting it with its own rules. Prettier takes the maximum length in count and wraps the code whenever necessary. 

6.  Better Comments 

Now it is time to make your comments more beautiful and informative and you can achieve this by using Better Comments. You can write comments in a more informative way. Using Better Comments you can categorize comments in alerts, to-dos, query, highlights and comments in amore readable way. 
Better Comments
Better Comments


7. ligatures 

Those who don't know what ligatures fonts are, ligatures font changes the symbols like (=>) into (fat arrow ligature). Some people like to use ligature fonts for coding so that symbols like (=>,!=,===)  look good in the  code. 
To use ligatures in the code you can use fira-code.
To use fira-code you can the article written by Medium.com
ligature font
ligature font



  



Location: Udaipur, Rajasthan, India

Popular posts from this blog

Typescript overview

 TypeScript overview TypeScript is an open-source object oriented language developed and maintained by Microsoft. As its name suggests it is related to JavaScript. It extends JavaScript by adding features which originally JavaScript lags. TypeScript was first released in October 2012. Why to use TypeScript JavaScript is a programing language used primarily by web browsers to create a dynamic and interactive experience for the users. But like every other programing language it has its own flaws which leads the developers in spending more time in debugging than coding. TypeScript solves a major portion of problems in JavaScript. TypeScript simplifies JavaScript code, make it easier to read and debug. In the following way. TypeScript adds a robust system of types TypeScript. If you are from a typed language background like c, c++, java then you will know that in JavaScript there are no types by default. That means it is very easy to make errors in JavaScript like syntax, code logics o...
Read more

Learn web developement for free

 Learn web developement for free  If you ever wanted to learn web developement and you do not have the money to pay to the expensive online courses. Here i came to help you to give you a list of website were tou can learn web developement for free and even some of the listed sites will give you certificates for the completion of the course. You can easily can start learning from these sites . Some things i want to tell you that if you master the any course you must be consistent and practice what you have learn. 1. Coursera ( Visit ) and Udemy ( Visit )  These are the two platforms where you can get huge list of free and paid courses not only  limited web development. In these platform you can get good free courses. They have courses in the form of video lectures. In Coursera you can get apply for a course scholarship. If your application got selected you can get a paid course for free. Most of the courses on these platforms reward you with certificates and have some...
Read more