How to better customize Your Visual Studio Code Editor!
Note: These customizations are my personal preferences based on my needs and my likes/dislikes. Please feel free to twerk them according to your need.
First Things First, download the following font-family:
- Cartograph CF
- Cascadia Code
- Any of these fonts would work great!
Now that you have downloaded and installed the fonts on your machine, we can get into customization.
This Article flow is as follow:
- Theme
- Fonts
- Font Styling (Ligature)
- Icons
- Brackets Pair Colorizer
- Color Highlight
- Prettier
- TODO Tree
- Tabnine
Theme
Not that the original VS Code’s theme is bad, we would want something that we like. To get a theme, go to the extensions store. We will be using Tokyo Night by enkia. It is a dark focused theme but has a great light theme as well.
Change the fonts
Go to VS Code’s settings by pressing ctrl + , and type in Editor:Font Family and in the text, field Enter the font family’s name in quotes as following 'Cartograph CF', 'Cascadia Code' Note that I have 2 fonts, the second one is the fallback font, which means if for some reason Cartograph fails to load, Cascadia Code will take its place.
Font Ligature
Here is a detailed article on Font Ligature but in short, it combines two special characters into one, such as this:
These characters without font ligatures will look like this:
==, ===, !=, !==, <-, <=>, ->, !!, ??, &&, ||
Go to settings.json by pressing ctrl+p and typing settings.json in there, a JSON file will now open, search for editor.fontLigatures if it exists, change the value to true from false if it doesn’t just add it to the main object.
Icon Pack
There are some great Icon Packs in the Visual Studio Extension Store, please do explore them on your own as well, we will be using the VSCode Great Icons by Emmanuel Béziat, alternatively, you can use Material Icon Theme, which provides a lot of icons for different extensions.
Your code editor will already be giving you a warm feeling now, but it’s just the start.
Bracket Pair Colorizer 2
Up next is Bracket Pair Colorizer 2 by CoenraadS, which helps us identify the code block by coloring the opening and closing bracket in the same color.
Color Highlight
This extension Color Highlight by Sergii Naumov helps us identify colors in our editor, not only highlighting the color bug also on the code pan it will show the color snippet, it will catch the RGB, and Hex Codes and show the color as it can be seen in the image.
Prettier
One of the must-have extensions, Prettier — Code formatter by Prettier, will perfectly indent your code is it’s more readable and all that just on simple save, although if you have a different code formatter installed for different languages, simply like when we enabled Fonts Ligature in settings.json we can add the following line in our settings.json file:
"prettier.disableLanguages": [".min.css", ".min.js", ".dart", ".yaml"],In the array pass the extensions of the file you do not want to format by prettier, yes, it is that simple.
TODO Tree
Another great extension to help you keep track of what you have left in the past, “to do” later. TODO Tree by Gruntfuggly, will highlight the keyword TODO in the code, and keep track of its dedicated extension menu as can be seen in the image.
Tabnine
And the best is in the last! Tabnine Autocomplete AI by Tabnine is a code assist extension that actually helps you write code, literally. It can make your one-hour work reduced to ~40 minutes. You can read this article, for extra details.
Thanks for reading it to the end, Please drop your suggestions and I’ll keep updating this article with new enhancements and suggestions by you all.
