DEV Community

loading...
Cover image for My VS Code customization

My VS Code customization

josuerodriguez98 profile image Josué Rodríguez (He/Him) Updated on ・4 min read

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!


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).
Preferences: Open 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 Example
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 
}
Enter fullscreen mode Exit fullscreen mode

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
}
Enter fullscreen mode Exit fullscreen mode

Here's how the minimap looks without rendering:
Nonrendered minimap

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
}
Enter fullscreen mode Exit fullscreen mode

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"
  }
}
Enter fullscreen mode Exit fullscreen mode

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"
      }
    }]
  }
}
Enter fullscreen mode Exit fullscreen mode

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"
      }
    }]
 }
}
Enter fullscreen mode Exit fullscreen mode

And that's it! If you know any other customization feel free to share it with me in the comments!
Keep moving forward!

Discussion (2)

Collapse
markoshiva profile image
Marko Shiva Pavlovic

Nice vscode setup

Collapse
wdavidcalsin profile image
WDavid Calsin

i like the configuration of your vscode

Forem Open with the Forem app