DEV Community

loading...
Cover image for My productivity setup for VS Code

My productivity setup for VS Code

charly3pins
By day I’m a Software Engineer. By night I’m open sourcing, learning, reading, listening and blogging. In love with Go and willing to learn new things every day. Posts in English and Spanish.
Originally published at charly3pins.dev on ・4 min read

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. 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

To this amazing setup
vscode charly3pins

Theme

I am a fan of the Dark themes so that was a must for me. I've tried a few like the Cobalt2, The Best Theme or even a one more "crazy" like Cyberpunk, until I found the one called Radical. 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

Font

I've installed the 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

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 icons for VS Code.
seti icons

Extensions

The extensions that I have currently installed in my editor are the following ones:
extensions

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.

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!

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

Simply the Dart language support for the editor.

Simply the Flutter language support for the editor.

Simply the Go language support for the editor.

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

The theme already explained on its section.

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

todo highlight

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

Simply the proto3 language support for the editor.

vscode proto3

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

Discussion (6)

Collapse
laxedo17 profile image
laxcivo

thanks! Not a Go programmer, but..., have you tried either Code Autocomplete (based on Tabnine) or Tabnine? That extension enhances your productivity a LOT! Sometimes it manages to surprise me

Collapse
charly3pins profile image
charly3pins Author

I haven't tried either, but I will, thanks for the suggestion!

Collapse
abhishektripathi profile image
Abhishek Tripathi

Loved the theme. Thanks for sharing

Collapse
charly3pins profile image
charly3pins Author

Indeed it is! I also tried to customize my terminator colors following the same palette

Collapse
sadid369 profile image
Sadid

Nice

Collapse
charly3pins profile image
charly3pins Author

Thank you :)