My Visual Studio Code Setup

Even my main tool for coding still is Visual Studio (2010 - if you really care about the version because of some legacy reasons), I use Visual Studio Code (VS Code) more often for learning and side projects and I really love it. In this post, I will walk through my setup for VS Code. If you want to share your setup, please leave it in the comment below. I’m very welcome to learn more useful and interesting tips from you :-)

Theme

After trying a couple of themes (Dracula, Material, Material Palenight, One Dark Pro…), some of them are too light, some of them are too dark and even some of them are too sharp. Then I always come back with One Monokai, it seems the one that catch my eyes.

Fonts

I love ligatures so the first font I used is Fira Code. It is free for use and looks fine then I found Operator Mono. With the ligatures support, I move to Operator Mono and I definitely love it.

You need to adjust the settings a bit when using Operator Mono font by adding these lines to VS Code’s settings.

// in settings.json
“editor.fontFamily”: “Operator Mono Lig”,
“editor.fontLigatures”: true,
“editor.fontSize”: 14,

Emmet

At this time, I’m in progress to learn React so VS Code’s Emmet built-in support for JSX is the thing I turn on immediately after install VS Code.

// in settings.json
"emmet.includeLanguages": {
  "javascript": "javascriptreact"
}

Integrated Terminal

In previous post about setting up fish shell on Mac, I already mentioned how to set up fish shell as default shell for VS Code’s integrated terminal.

Extensions

vscode-icons

vscode-icons is seems the most downloaded extension for VS Code’s file icon theme. It supports many types of file and provides good icons to help to distinguish them.

Bracket Pair Colorizer

Finding matching bracket sometimes seems to be hard. Bracket Pair Colorizer will be here to solve the problem.

Polacode

If you doesn’t install Polacode yet, you should do it now. With just a few keystrokes, you can capture your code to save as an image to post to Twitter or other social networks/forums later.

I really happy with my VS Code setup. With more and more front-end development knowledge I gain, I will have more chance to switch to VS Code as my main code tool. About the back-end side, I use Rider for Mac ;-)