My setup for web development, 2020 edition - Vim, linux, zsh, tmux, Jetbrains and docker

Last updated Oct 24, 2021 Published Nov 14, 2020

The content here is under the Attribution 4.0 International (CC BY 4.0) license

Usually I like to jump from one setup to another just for fun of learning some new tricks, I have worked on windows, linux and macos. Currently, my setup is linux, though, previously I used a macos. The latest version that I got in touch was macos Catalina.

This post aims to cover my currently setup that I have been using in 2020 and provide details on configuration and why the decision to chose a given tool.

Disclaimer: this is my personal setup, I am not endorsing any particular tool over another, I just use them because I feel they are useful to my workflow (mostly Web Development).

Operating system

There are two major distros that I have been using, Elementary OS for work and my personal laptop has Manjaro (Gnome version). The Manjaro specs are as follows:

OS Name              Manjaro Linux; Build ID: rolling
OS                   Type64-bit
Gnome version        3.38.1
Windowing system     X11

Development environment

My development environment changes based on the type of application that I am working on, but for this section, I am describing the tools that I use for the overall development cycle, which means that I will use those regardless of the app I am building.

Fonts

For font I use nerd font, which provides a lot of custom fonts and also icons (based on the font) for the terminal.

Zsh

Personally I use the zsh shell instead of the default one that comes with linux distros. Besides that I also use the plugin oh my zsh that provides extra functionality to the zsh shell. It has been a companion of mine for many years, despite of its ease of installation it helps me to keep a acceptable productive level, avoiding repetitive key strokes and auto completing my terminal commands.

The plugins that I have enabled on my configuration are:

Besides that I personally have a few aliases that I configured to help me to avoiding typing repetitive commands, the follow list depicts the custom aliases:

alias hh="cd ~/Projects"

As a theme for zsh I use powerlevel10k which provides a easy to setup, custom terminal look.

Tmux

For a more productive terminal I stopped using the terminal tabs in favor of tmux windows/panes. The tmux approach allows me to create, delete, split, resize panes with a few key binding and the most important, without leaving the keyboard.

As a companion to tmux I use a plugin called .tmux that self describes it as a “oh my tmux”, which I think is influenced by the “oh my zsh” and also provides extra functionality to tmux, without the need of trcking the tmux config yourself.

Docker

I got started in the virtualization via virtual box and specifically for development with Laravel homestead (vagrant images), then, I decided to move to docker as it setup require less steps compared to the virtualization approach (I also wrote a bit on docker).

Besides docker, I often use docker compose to compose my services. Currently the versions that I am using are:

Docker version 19.03.13-ce, build 4484c46d9d

docker-compose version 1.26.2, build eefe0d31

Docker became the standard for for any dependency that the apps I am building depend on, for example, if I need redis, I will use docker for setting up the service, the same applies for databases, those are the docker images that I use often in my flow:

mysql
redis
nodejs
python
php
rabbitmq

Instead of have those dependencies installed locally, I setup them using docker instead. For example, the most common workflow with nodejs is to use nvm and switch between node version locally:

nvm install 12

Once the version is installed, the nodejs is available in the path, such as:

node --version

My approach is to use docker first, instead of nvm:

docker run --rm node:12 -v $(pwd):/app -w /app node --version

The gotcha is to use the flag w (workspace) and v(volume). Those flags translate into something like: I have an app in this directory and I want to map them to the container, and also I want to use /app as the default directory to execute the commands inside the container.

IDE’s and text editors

I have used a bunch of IDE’s (Integrated Development Environment) and text editors, professionally and also as a hobby just to get the gist of it. I remember using, netbeans for php, eclipse for java,and sometimes notepad++ as well for simple HTML editing.

During the years I became more familiar with: vim, vscode and PHPStorm. Those are the ones I use most often.

Vim

Vim has been one of the text editor that I use the most due its key bindings. I previously discussed about vim and how was the process of adopting it as a full time text editor [1] [2].

I still use vim but in another flavor, neovim. Besides that used to setup my vim configuration using vim bootstrap, but since I discovered SpaceVim, I switched to it.

I often use this setup to edit configuration files related to the operating system. For development, I use vscode.

Vscode

Vscode is the text editor that I spend most time in, as it has support for javascript/typescript out of the box. I do not use vscode as it comes, I have a list of plugins that I work with to make it as productive as possible for my use case. The extension list is as follows:

vim
eslint
settings sync
file utils
formate: CSS/LESS/CSS
gitlens
jest runner
macrosRe
tailwind CSS Intellisense
wakatime

Theme used:

Onde dark pro

Font:

JetBrainsMono

The vim (1) extension is the one I use the most, as it brings the vim key bindings to vscode, in a normal workflow I often use a mix of vim and vscode bindings.

Sync settings (2) is the first extension that I get working on a fresh install of vscode, in two special occasions: New laptop or new operating system installed. The extension helps me to get the extensions, fonts, themes and custom settings up in seconds.

Phpstorm

PHPstorm is my preferred IDE to edit PHP files or to do refactoring. I tried to keep all my use cases in PHP on vscode code but the intelisense and experience that PHPStorm has for PHP is better.

DBeaver

DBeaver is been the DBMS that I have used the most for MySQL and postgres. Previously I used MySQL workbench for MySQL, but since I started to require more than one type of database, DBeaver suited better my needs.

Robo 3T

For mongodb the GUI that helped my since I started is Robo 3T, which provides a simple interface and with the features I need to go through collections, connect to different servers and query data.

References

[1]M. Marabesi, “30 days of VIM,” 2020 [Online]. Available at: https://marabesi.com/thoughts/2018/01/22/30-days-of-vim.html. [Accessed: 20-Nov-2020]
[2]M. Marabesi, “30 days of VIM - One week after,” 2020 [Online]. Available at: https://marabesi.com/thoughts/2018/01/29/30-days-of-vim-1-week-after.html. [Accessed: 20-Nov-2020]