My productivity setup for VS Code
Tags: productivity, vscode
Published: 2021-04-22 19:38:39

I spend a lot of hours during the day coding for the company I work for and during nights or weekends for myself, so I want to be comfortable with the tools I use constantly. One of them is my editor of code, specifically [VS Code](https://code.visualstudio.com/). I started with Java and the most extended for it is Eclipse with all its variants. Then I moved to Go and I was a Sublime user for years until I gave a try to VS Code. Oh boy! Since I tried, I never wanted to switch back. Super fast, super configurable, a lot of extensions and A LOT OF THEMES.

So after a long way of researching and tweaking (a never ending story I would say) I found a setup that makes me comfortable, happy and more productive. For that reason I want to share with you lovely readers my theme, my font, my icons and the extensions I have in order to inspire you to reach your own setup same as me.

The default VS Code theme is not bad at all, but I will show you how to move from this
![vscode default](https://charly3pins.dev/images/productivity-setup-vscode/vscode-default.jpeg)

To this amazing setup
![vscode charly3pins](https://charly3pins.dev/images/productivity-setup-vscode/vscode-charly3pins.jpeg)

## Theme
I am a fan of the Dark themes so that was a must for me. I've tried a few like the [Cobalt2](https://marketplace.visualstudio.com/items?itemName=wesbos.theme-cobalt2), [The Best Theme](https://marketplace.visualstudio.com/items?itemName=kohlbachjan.the-best-theme) or even a one more "crazy" like [Cyberpunk](https://marketplace.visualstudio.com/items?itemName=max-SS.cyberpunk), until I found the one called [Radical](https://github.com/DHedgecock/radical-vscode/). It's simply the perfect one for me. A dark theme, a retro futuristic touch with subtle neon colors and the combination of dark blue for the background and blue and grey for the text with the green, yellow and pink. It has the perfect palette for me.
![radical theme](https://raw.githubusercontent.com/DHedgecock/radical-vscode/master/assets/banner.png)

## Font
I've installed the [Hermit](https://github.com/pcaro90/hermit) as my font for the editor. I don't like the ligatures so I tried to find a monospace that was clear and readable and I found this font that I really liked. I also used it for my terminal that probably soon I will publish about how I've configured it too. In addition, for the more curious of you, the font size I'm using is of 14.
![hermit font](https://charly3pins.dev/images/productivity-setup-vscode/hermit-font.jpeg)

If you wanna find your favorite font I recommend you to check the following website https://www.programmingfonts.org where you can see in a live demo all the fonts and the links to their websites.

## Icons
Previously I had some Material Icons extension installed but currenlty I'm using the default [Seti](https://marketplace.visualstudio.com/items?itemName=qinjia.seti-icons) icons for VS Code.
![seti icons](https://github.com/hellopao/vscode-seti-icons/raw/master/screenshot.png)

## Extensions
The extensions that I have currently installed in my editor are the following ones:
![extensions](https://charly3pins.dev/images/productivity-setup-vscode/vscode-extensions.jpeg)

- [Auto Rename Tag](https://marketplace.visualstudio.com/items?itemName=formulahendry.auto-rename-tag)
![auto rename tag](https://github.com/formulahendry/vscode-auto-rename-tag/raw/master/images/usage.gif)

It's a big time saver when you're working with HTML or XML because it renames the open/close tags at same time you're changning one of them.

- [Bracket Pair Colorizer 2](https://marketplace.visualstudio.com/items?itemName=CoenraadS.bracket-pair-colorizer-2)
![bracket pair colorizer 2](https://github.com/CoenraadS/Bracket-Pair-Colorizer-2/raw/master/images/example.png)

It helps a lot to identify the open-close pairs of brackets in your code, colorizing them with the same color. Also if you put your cursor inside a block it underlines the starting line and connects to the closing bracket with a vertical line of the same color. It really helps!

- [Colorize](https://marketplace.visualstudio.com/items?itemName=kamikillerto.vscode-colorize)
![colorize](https://raw.githubusercontent.com/kamikillerto/vscode-colorize/master/assets/demo.gif)

If your file contains some color code this extension will highlight the code with the actual color.

- [Dart](https://marketplace.visualstudio.com/items?itemName=Dart-Code.dart-code)

Simply the Dart language support for the editor.

- [Flutter](https://marketplace.visualstudio.com/items?itemName=Dart-Code.flutter)
![flutter](https://dartcode.org/images/marketplace/flutter_hot_reload.gif)

Simply the Flutter language support for the editor.

- [Go](https://marketplace.visualstudio.com/items?itemName=golang.Go)
![go](https://github.com/golang/vscode-go/raw/master/docs/images/completion-signature-help.gif)

Simply the Go language support for the editor.

- [Live Share](https://marketplace.visualstudio.com/items?itemName=MS-vsliveshare.vsliveshare)

It enables you to collaboratively edit with others in real time, regardless what programming languages you're using or app types you're building. It allows you to instantly and securely share your current project in another workspace. Developers that join your sessions receive all of their editor context from your environment (e.g. language services, debugging), which ensures they can start productively collaborating immediately, without needing to clone any repos or install any SDKs.

![live share](https://aka.ms/vsls/quickstart/invite)

- [Radical](https://marketplace.visualstudio.com/items?itemName=dhedgecock.radical-vscode)

The theme already explained on its section.

- [TODO Highlight](https://marketplace.visualstudio.com/items?itemName=wayou.vscode-todo-highlight)

It highlights the TODOs inside the code to make them more visible once you're reading code.

![todo highlight](https://github.com/wayou/vscode-todo-highlight/raw/master/assets/material-night-eighties.png)

- [Todo Tree](https://marketplace.visualstudio.com/items?itemName=Gruntfuggly.todo-tree)

It displays the TODO and FIXME in a tree view in the explorer panel. Clicking a TODO within the tree will open the file and put the cursor on the line containing the TODO.

![todo tree](https://raw.githubusercontent.com/Gruntfuggly/todo-tree/master/resources/screenshot.png)

- [vscode-proto3](https://marketplace.visualstudio.com/items?itemName=zxh404.vscode-proto3)

Simply the proto3 language support for the editor.

![vscode proto3](https://github.com/zxh0/vscode-proto3/raw/master/images/gif1.gif)

I hope it helped you and feel free to comment here or contact me on my social media for any comments, questions or suggestions.