Posted on Jan 11, 2020 • Updated on Jan 15, 2020

My VS Code customization

#vscode #codenewbie #beginners

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!

Installing FiraCode on Windows and Ubuntu

Josué Rodríguez (He/Him) ・ Jan 13 '20

#firacode #fonts #windows #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"
      }
    }]
 }
}