How to make VS Code Beautiful?

4 min readMay 6, 2020

Think of all the beauty still around you and be happy.
So as we need beauty everywhere why to compromise it in Things we use in our daily life. So here is an article for making Vs code beautiful. For Starters Vs code stands for Virtual Studio code , it is a source-code editor developed by Microsoft for Windows, Linux and macOS. It includes support for debugging, embedded Git control and GitHub, syntax highlighting, intelligent code completion, snippets, and code refactoring.

Color Theme

Starting with the Color Theme : So Vs code has inbuilt some of the colorthemes like

So to add Theme which you like just go to https://vscodethemes.com/ and select the theme you like . I personally use “Just Black”. For adding it just select open extension and then click on open in vs code, it will redirect you to vs code and there just click install and just use it.

File Icon-Theme

Second Feature is File Icon-Theme: The icon theme feature changes the icons of the files and folders . The inbuilt Icon themes are

Adding more beautiful icon themes is very simple just do ctrl+shift+p and search for file icon theme and click on Install additional file icon themes and Extensions view pops up with tag:icon-theme written in search just add vscode icons to it and download that file icon thats it we are done.

Font

Third is the Font : Their are millions of free as well as free fonts available but the top 10 fonts for programming are https://developer-tech.com/news/2018/may/16/10-best-fonts-programming/ . So you can select one from it and just change it in the open settings UI or json.

MiniMap

Fourth is the MiniMap: The minimap is the slide down toggling which helps to move up and down in the code.

So if you dont like it or you want a clean code just go to settings and search minimap and change True to False or disable it and you are good to go!

Ligatures

If you want === to look more like ≡, >= to look more like ⩾, or !== to look more like ≠, then there’s a font for you.

It’s called FiraCode, and to enable it you need to:

Install the FiraCode Font locally on your computer. (Click here, then scroll down in README.MD and click ‘Download’. If in doubt about what font type to install, I’d recommend the TTF versions).
Add the following code to settings.json :

{
    "editor.fontFamily": "Fira Code",
    "editor.fontLigatures": true
}

Prettier

You don’t need to use any fancy terminal commands to install Prettier. Instead, you can grab it straight from the extension marketplace.

I like the following settings. The first one makes sure Prettier works smoothly with ESLint; the second means Prettier will automatically format code every time you save.

{ 
  "prettier.eslintIntegration": true,
  "editor.formatOnSave": true
}

Matching Bracket Colours

When you have a lot of parentheses, square brackets and braces, it can be difficult to see where each block of code opens and closes.

The Bracket Pair Colorizer by Coenraads solves this problem. The author has recently released a second version of the extension called Bracket Pair Colorizer 2, which is supposed to bring improvements in speed and accuracy. It’s currently in beta mode, but so far it’s worked well for me.

To get started, install the extension by clicking here for version 2 (in beta), or here for version 1.

All These features make Vs Code Beautiful to code and increase the Efficiency of doing the work.

Overall, I hope this article has helped you customise your version of Visual Studio Code. If you’d like to share your own VS Code setup, feel free to post it in the comments!