Hey guys! JD here with my first post. VS Code is a powerful editor used by millions of developers all over the world. Based on my experience, most of the users I know only install a theme and that's their whole customization! So I'm dedicating my first post to show you how I customized my VS Code. Feel free to leave any comments sharing your customization!
Fun fact: With some classmates, we have a saying that goes "Hay que afilar el machete" which translates to "Sharpen the machete" or "Sharpen the knife", basically meaning to sharpen your tool of work.
Themes and Icons
One of the first things we do when we install VS Code is looking for the right theme. I'm a Dark theme user myself, but the themes I'm about to mention include various options in black, white and even red! These themes include:
- Dark+ Material (The one I currently have installed).
- Material Theme
- Dracula Official
As for icons, I like two options equally and always have a hard time deciding on which one to use:
- Material Icon Theme
- vscode-icons
Extensions
I've got two extensions that are a must-have:
- Bracket Pair Colorizer
- Live Share
Bracket Pair Colorizer helps you by coloring each pair of (), {} and [], so you can keep track of the scope you're in and also highlights the body of the scope you're in. Live Share is a powerful tool for working remotely with your teammates. The latest versions of Live Share now include a chat and audio sharing. Other two useful extensions that I've used are Eslint and Prettier for React projects. Here's a guide on how to set them!
Article No Longer Available
You can install all of the above directly from the VS Code Marketplace.
Editing the Settings (JSON)
Now we're getting to the juicy part! We're going to edit the JSON that holds all the settings for VS Code. Don't worry, nothing will explode (probably). To access this JSON file, hit F1 on your computer and type Settings (JSON).
NOTE: Some themes modify this JSON, so if there's some configuration that you didn't write, don't worry about it. Remember to save the file after you make changes for the customizations to take place.
FiraCode
FiraCode is an awesome font with ligatures! Here's my guide on installing FiraCode on Windows and Ubuntu!
To enable Firacode on our VS Code, add the following lines to the Settings JSON:
{
"editor.fontFamily": "Fira Code",
"editor.fontLigatures": true
}
Rendering the minimap
VS Code's minimap is helpful and unreadable. So why even bother on trying to render the characters? Let's give the minimap a better look by disabling the render option by adding the following line to the JSON:
{
"editor.minimap.renderCharacters": false
}
Here's how the minimap looks without rendering:
Customizing the cursor looks and behavior
You can customize your cursor by adding some lines to the JSON file. I have configured it like this:
{
"editor.cursorBlinking": "expand",
"editor.cursorSmoothCaretAnimation": true,
"editor.cursorStyle":"line",
"editor.cursorWidth": 2
}
I encourage you to play with the cursorBlinking and the cursorStyle to find the one that suits you better. You can customize cursorBlinking with blink, expand, phase, smooth or solid and the cursorStyle with block, block-outline, line, line-thin, underline or underline-thin.
Changing comments color
Sometimes we need to locate comments as fast as possible, so what better way to do it than by giving them an annoyingly bright color? Add this line to the JSON file, just change the hex to one of your choice:
{
"editor.tokenColorCustomizations": {
"comments": "#00ff00"
}
}
Making method and function names bold
Finally, we arrived to my favorite customization! This is the type of customization I didn't know I needed, and now that I have it, I can't live without it! Making method and function names bold gives them an awesome look and makes them easier to identify in our code. Here's the JSON:
{
"editor.tokenColorCustomizations": {
"textMateRules": [{
"scope": [
"entity.name.function",
"entity.name.method",
],
"settings": {
"fontStyle": "bold"
}
}]
}
}
Try playing around with the "entity" option, it has many different options you can add.
Conclusion
Here's my JSON:
{
"editor.minimap.renderCharacters": false,
"editor.cursorBlinking": "expand",
"editor.cursorSmoothCaretAnimation": true,
"editor.cursorStyle":"line",
"editor.cursorWidth": 2,
"editor.fontFamily": "Fira Code",
"editor.fontLigatures": true,
"editor.tokenColorCustomizations": {
"comments": "#00ff00",
"textMateRules": [{
"scope": [
"entity.name.function",
"entity.name.method",
],
"settings": {
"fontStyle": "bold"
}
}]
}
}
And that's it! If you know any other customization feel free to share it with me in the comments!
Top comments (2)
Nice vscode setup