VS Code has been my favourite editor for a few years now and my go-to tool when it comes to programming, adjusting SVGs or simply editing files.

I’ve never been a fan of IntelliJ IDEA or WebStorm because they are not as performant and are overblown with features that are usually not needed. I also love how easy it is to customize and install extensions for VS Code.

Another useful feature is to set up settings sync to share config (including settings, keybindings and extensions) across different devices. It is currently in preview but worked flawlessly for me so far.

Fira Code

You know, I’ve never bothered to use a custom font and just used the default font since the beginning of my career. Well, that is until I’ve come across programming ligatures.

Programming ligatures are font glyphs designed to improve the readability of code.

Neat! It helps and makes code much easier to read after getting used to it. I can highly recommend to try out the free font Fira Code and see if it floats your boat. There’s also JetBrains Mono which is also available for free.

Please note that font ligatures have to be enabled in the settings:

// settings.json

{
  ...
  "editor.fontLigatures": true
}

One Dark Pro

Before switching to VS Code I’ve been using Atom and the one thing that stuck with me was the colour theme called One Dark. This was probably the first thing I looked for after the switch and was super happy someone recreated the theme called One Dark Pro.

Sometimes I try out other themes but I’m always coming back to my all-time favourite. Maybe I’ll try to create my own theme someday, who knows? Could be fun!

Extensions

The amount of extensions I use (9 to be exact) is quite straightforward so here’s a short overview:

Bracket Pair Colorizer 2 allows matching brackets to be identified with colours. Especially helpful when things are nested.

DotENV adds syntax highlighting for .env files.

ESLint to find and fix problems in my JavaScript/TypeScript code.

GitLens extends the Git capabilities that are already built into VS Code and has many useful sidebar views.

Material Icon Theme adds a lot of icons for almost every type of file/folder.

PostCSS Language Support adds syntax highlighting and better support for PostCSS.

Prettier is a code formatter and an absolute must-have. It saves a lot of time and enforces consistent code.

Project Manager adds a new tab to the sidebar to easily access all local projects. It can auto-detect Git repositiories as well.

Tailwind CSS IntelliSense is an extension for Tailwind CSS (duh) and features autocomplete, syntax highlighting and linting.

♥️ VS Code & Open Source ♥️