One of the most important things for a developer, at least if you ask me, is to have a well functioning set of tools that are easy to use, have a good UI and tools that are stable. If you manage to make all of that look pretty, that’s a bonus.

In this article I’ll go through setting up and customising the tools I use daily. Tools that I feel are extremely good and are the best solutions to the problems we as developers have, daily.

I use a MacBook Pro 13', so some of the tools I’ll be talking about might be macOS exclusive, sorry about that.

List of tools:

Development tools:

1. Visual Studio Code

2. Sublime Text 3

3. Oh my Zsh

4. GitKraken

Productivity tools:

1. Todoist

2. Pocket

3. Spark

4. Bear

5. Slack

Other random stuff I use daily:

1. Spotify

2. Lionshare

Let’s set this stuff up…

Visual Studio Code

VSC is one of the most popular editors used nowadays and it’s the one I use for most things.

Extensions:

All of the extensions can be found in the VSC Extensions tab.

1. Babel ES6/ES7 — Adds support for ES6/ES7 syntax highlighting.

2. Clock in status bar — Displays a small clock in the bottom status bar.

3. ESLint — Integrates ESLint into VSC.

4. GitLens — Enhances the Git capabilities built into VSC, this is one of my favorites.

5. Path Intellisense — Adds path autocompletion to VSC.

6. PostCSS Syntax — Adds PostCSS language support.

7. Stylelint — Integrates CSS linting into VSC, works with pretty much all CSS preprocessors.

The font I use is Fira Code. After installing the font you need to add the following to your editor config file to enable the font ligatures, you open the editor config by pressing ⌘ + ,

"editor.fontLigatures": true,

"editor.fontFamily": "Fira Code"

The theme I use is called City Lights , the theme isn’t in the VSC ‘store’, you can install it by running this in your terminal:

git clone https://github.com/Yummygum/city-lights-syntax-vsc.git ~/.vscode/extensions/city-lights-theme

After setting everything up, you’ll get something like this: