Una terminal agradable te evitará estrés durante el desarrollo: Cómo configurar WSL2 con Docker

12 de marzo de 2024

¿Qué es "La terminal"? 🤔

A lo largo de nuestra vida en el desarrollo tarde o temprano llegará un momento donde tengamos que utilizar La Terminal...

Esa herramienta oscura y misteriosa que solemos ver en las películas cuando el hacker de turno tiene que infiltrarse en alguna organización malvada. Eso que aparece en su pantalla con muchas letras escritas en blanco sobre negro y parece que está leyendo la Matrix de lo rápido que va todo...


Hacker navegando la matrix


Pero realmente en la vida real, para muchos, el hecho de tener que usar la terminal es algo que se percibe más como un laberinto de comandos confusos y una interfaz incómoda, lejos del glamour con el que a menudo se la asocia en la gran pantalla suele parecerse más a esto que a las películas...


Hombre cansado de la vida


El objetivo de este post es intentar cambiar eso y conseguir que el tiempo que inevitablemente pasarás en la terminal sea más agradable, para lograrlo configuraremos tu terminal con un conjunto de herramientas y scripts que he ido recopilando y configurando a lo largo de los años mientras te explico lo que te aporta cada una de ellas.

Al final del artículo lograremos tener una terminal similar a esta:


Resultado final

¿Qué vamos a utilizar para lograrlo? 📦


Todas las recetas necesitan ingredientes, para esta primero los vamos a listar brevemente y luego los vamos a ir instalando y configurando uno a uno en orden.

Así te haces una idea de lo que vamos a hacer y puedes ir directamente a la parte que te interese.

🐧 Windows Subsystem for Linux (WSL2)

Esto nos permitirá tener una máquina virtual de Linux integrada directamente con Windows, en contrapartida de tener que usar una máquina virtual o una partición de Linux, esta gestionará automáticamente su propia memoria y disco duro, además de integrarse directamente con el sistema de Windows.

🐳 Docker - Sin utilizar Docker Desktop

Docker es una maravilla del software moderno que nos permite construir, empaquetar y levantar aplicaciones rápidamente.

En este caso vamos a utilizar solamente el servicio Docker, sin utilizar Docker Desktop, ya que vamos a configurar todo manualmente y no necesitaremos la ayuda que nos proporciona.

🚢 Portainer (opcional)

Dependiendo de lo mucho que uses Docker en tu día a día, con la terminal bien configurada o con la extensión de VsCode podría ser suficiente para ti, pero si necesitas una interfaz gráfica para gestionar tus contenedores, en mi opinión, Portainer es la mejor opción.

🖥️ ZSH

Diminutivo de "Z Shell", es una shell alternativa a la que lleva el sistema por defecto (bash).

En este caso la elegimos por su gran comunidad, que nos proporciona temas y plugins ya probados y configurados. Probablemente se pueda llegar a configurar bash de una forma similar, pero ZSH ya viene con muchas cosas que nos van a facilitar la vida.

🎩 Oh My ZSH

Si no fuese por esto no usaría ZSH, uno de los problemas que te encuentras cuando quieres tener una buena terminal es que tienes que configurarlo todo a mano, Oh My ZSH nos proporciona un framework para gestionar la configuración de ZSH, viene con un montón de configuraciones, plugins, temas y funciones que te harán la vida más fácil.

🎨 Powerlevel10k

Es solamente un tema visual para ZSH, pero es muy configurable y estéticamente agradable, lo que nos va a permitir tener una terminal que además de funcional (mostrar en que rama de git estamos, si hay cambios sin "commitear", etc) sea agradable a la vista.

📚 Antigen

Es un gestor de plugins para ZSH, que nos va a permitir instalar y gestionar los plugins que vamos a necesitar tan solo añadiendo unas líneas a nuestro archivo de configuración.

Nos facilita la vida permitiéndonos instalar/gestionar/actualizar los plugins de una forma muy sencilla.

🧩 NVM

Nos permite tener varias versiones de node instaladas en nuestra máquina y cambiar entre ellas fácilmente.

🔍 FZF

Esta potente herramienta nos permite sacar un "autocomplete" dentro de la terminal para buscar de todo, desde comandos que hemos ejecutado anteriormente,archivos/directorios y hasta el PID de un proceso por su nombre.

📺 Tmux

Es una herramienta que nos permite dividir nuestra terminal en varias ventanas y paneles, para visualizar varios comandos a la vez y recuperar sesiones anteriores, entre otras cosas.

🐙 Gitkraken (extra)

Esto no es una herramienta de la terminal, es solo que por muchas mejoras que le añada a la terminal sigo prefiriendo un cliente gráfico para gestionar los repositorios de git.

Ahora sí, manos a la obra 🛠️

Ahora que ya conocemos un poco el objetivo y las herramientas que vamos a utilizar, vamos al meollo del asunto...

Prepárate un té o un café y acomódate, porque esto va a llevar un rato, aunque te aseguro que el resultado final merecerá la pena, además de que solo lo tendrás que hacer una vez.

1. Instalar WSL2

La instalación de WSL2 es muy sencilla, tienes dos maneras de hacerla:

Puedes elegir entre varias distribuciones de Linux, yo personalmente uso Ubuntu porque es el más popular, así cuando necesite información será más fácil encontrarla, pero puedes elegir la que más te guste. Además también, puedes tener varias distribuciones instaladas a la vez y usarlas en paralelo.


Windows Store


Cuando hayas terminado de instalar tu distribución de Linux, y lo arranques por primera vez, verás una pantalla parecida a esta:


alt text


Si lo que ves es algo similar pero la ventana de tu terminal no te da la posibilidad de tener varias pestañas, es que estás usando la antigua aplicación de terminal de windows.

La nueva terminal la encontrarás en la Windows Store - Terminal.


En este punto tenemos que configurar un usuario y una contraseña, que se convertirán en las credenciales por defecto de tu máquina virtual de Linux y las que usaremos cuando el sistema nos solicite permisos de administrador o como lo llaman en Linux "sudo" (superuser do).

Asegúrate de que sean seguras, ya que si alguien accede a esta máquina virtual potencialmente tendrá control total sobre tu sistema.


Para un manejo decente de contraseñas te recomiendo usar KeePassXc o Bitwarden ya que conforme aumenta el número de credenciales que manejas, se hace inviable el recordarlas.


Cuando hayas terminado de configurar tu usuario y contraseña, ya tendrás tu máquina virtual de Linux funcionando en tu sistema de Windows 🙂

¿Que me aporta WSL2 o usar Linux para el desarrollo?

Ahora podrás desarrollar en un entorno completo de Linux sin tener que salir de tu sistema de Windows. Mientras usas aplicaciones de los dos sistemas operativos a la vez. E incluso puedes interconectarlos para que se comuniquen entre sí.

Desarrollar en Linux tiene varias ventajas, pero principalmente es que la mayoría de las herramientas de desarrollo están pensadas para Linux, y cuando tu aplicación vaya a producción, probablemente también lo desplegarás en un entorno Linux. Así que es lo mejor es desarrollar en un entorno lo más parecido posible al de producción para evitar problemas inesperados.

Las máquinas virtuales (VM a partir de ahora), no son algo nuevo pero WSL2 tiene varias características que lo hacen la alternativa más cómoda a la hora de trabajar con Linux en Windows.

Como hemos comentado antes WSL2 se encarga de gestionar dinámicamente cuanta RAM necesita la VM y reserva más o menos según lo necesite.

En una VM normal por defecto tienes que asignar un tamaño de RAM y este se quedará fijo, si quisieras tener un tamaño de RAM dinámico tendrías que buscar como configurar tu gestor de VM para que tenga algo parecido o apagar la VM y cambiar la configuración. Lo mismo ocurre con el disco duro, WSL2 se encarga de gestionar el espacio que necesita la VM y de asignarle más o menos según lo necesite.

Además de eso WSL2 al estar hecho por Microsoft, está muy integrado con el sistema operativo y VsCode.

Por ejemplo, sin tener que hacer nada más, podremos acceder a la VM directamente desde el explorador de Windows, aparecerá como un recurso más.

Explorador de archivos mostrando linux


También nos da la posibilidad de lanzar el comando explorer.exe . dentro de WSL para abrir la carpeta actual en el explorador de Windows.

Funciona de forma similar con VsCode, si tienes instalado VsCode en Windows, puedes lanzar el comando code . dentro de WSL para abrir VsCode dentro de la carpeta actual. Para ello tienes que tener instalada la extensión Remote - WSL para VsCode.

Y si te parecía poco, también puedes abrir aplicaciones con interfaz directamente en windows. Por ejemplo, si lanzas el comando gedit se abrirá el editor de texto de Gnome en una ventana de Windows o nautilus para abrir el explorador de archivos de Gnome.

Windows y Linux en un mismo escritorio


La diferencia entre WSL y WSL2 es que la primera versión no tenía un kernel de Linux, sino que usaba un traductor de llamadas de sistema para que las llamadas de sistema de Linux funcionasen en Windows, lo que hacía que fuese más lento y que no pudiese ejecutar todas las aplicaciones de Linux.

En cambio la segunda version tiene un kernel de Linux completo, lo que le permite ejecutar todas las aplicaciones de Linux y ser mucho más rápido.

2. Instalar el servicio de Docker

Como he comentado antes, Docker es una maravilla para el desarrollo, lo que antes nos costaría horas de configuración y despliegue, ahora lo podemos hacer ejecutando un comando como si fuese un ejecutable 🪄

Como ya lleva años en el mercado y es la base de casi todo el desarrollo moderno, no me voy a extender mucho en explicar qué es y para qué sirve, pero si quieres profundizar más en el tema de Docker + WSL2, nuestro compañero Jorge Mora escribió un post al respecto.

Para instalar Docker debemos ejecutar estos comandos en la terminal de WSL: (sacados directamente de la documentación oficial)

Actualizar apt para que reconozca Docker

# Add Docker's official GPG key:
sudo apt-get update
sudo apt-get install ca-certificates curl
sudo install -m 0755 -d /etc/apt/keyrings
sudo curl -fsSL https://download.docker.com/linux/ubuntu/gpg -o /etc/apt/keyrings/docker.asc
sudo chmod a+r /etc/apt/keyrings/docker.asc

# Add the repository to Apt sources:
echo \
  "deb [arch=$(dpkg --print-architecture) signed-by=/etc/apt/keyrings/docker.asc] https://download.docker.com/linux/ubuntu \
  $(. /etc/os-release && echo "$VERSION_CODENAME") stable" | \
  sudo tee /etc/apt/sources.list.d/docker.list > /dev/null
sudo apt-get update

Instalar los paquetes necesarios

sudo apt-get install docker-ce docker-ce-cli containerd.io docker-buildx-plugin docker-compose-plugin

Comprobar que se ha instalado correctamente

sudo docker run hello-world

Si todo ha ido bien, deberías ver un mensaje similar a este:

Mensaje de confirmación de docker-hello-world

Ahora ya tenemos Docker instalado en nuestra VM, pero aún no hemos acabado, necesitaremos más cosas para desarrollar de forma cómoda.

sudo usermod -aG docker $USER

Ahora necesitamos reiniciar la máquina virtual para que los cambios surtan efecto.

Esto lo tendremos que hacer varias veces a lo largo de este proceso, el comando para apagar la VM de WSL2 es este:

wsl --shutdown

Lo debes ejecutar en una consola de comando de windows ya sea cmd o powershell.

Ahora, al volver a abrir la terminal de WSL2, ya deberías poder ejecutar el comando docker sin tener que escribir sudo delante.

Prueba con el mismo comando de antes, pero esta vez sin sudo, deberías ver el mismo mensaje

docker run hello-world

Para ello, como sudo tenemos que editar el archivo /etc/wsl.conf ejecutando:

sudo nano /etc/wsl.conf

E insertar el siguiente contenido:

[boot]
command = service docker start

⚠️ Si en ese archivo ya estaba configurado systemd=true, no hace falta que añadas nada más, ya que systemd es el sistema de inicio de servicios de Linux y ya se encargará de iniciar Docker. Esto es algo nuevo que se ha añadido recientemente, anteriormente esa configuración no estaba por defecto.

Así siempre que arranquemos la máquina virtual, el servicio de Docker se iniciará automáticamente. Y de igual forma, cuando apaguemos la VM con wsl --shutdown, todos los servicios que estén corriendo en ella se detendrán incluyendo Docker.

Por defecto WSL2 ya hace bastante magia para que no tengamos que preocuparnos de esto, cuando levantamos un contenedor que expone el puerto 3000, por ejemplo, podemos acceder a él desde el navegador de Windows a través de localhost:3000.

Esto es gracias a una traducción que hace WSL2 para traducir localhost a la IP de la VM de WSL2. Pero recordemos que WSL2 es una máquina completa, y como tal, tiene su propia IP, que podemos ver con el comando ip a dentro de WSL2.

Así que si quieres acceder a tu servidor web, digamos que desde tu móvil, que está conectado a la misma red que tu ordenador, no podrás hacerlo a través de la IP de tu Windows, sino que tendrás que pasar por windows para llegar a WSL2.

Microsoft ya escribió un artículo explicando esto en detalle

Por mi parte en su momento (hace 3 años ya) convertí estos comandos en unos scripts porque me cansé de tener que buscarlos cada vez que reiniciaba la máquina... Aún los puedes encontrar aquí si tienes curiosidad.

Pero el año pasado con el auge de ChatGPT me decidí a pedirle que convirtiese mis .bat a una CLI de powershell algo decente. Este fue el resultado final:

▸ Script para exponer puertos de WSL2

param(
    [string]$command,
    [int]$port
)

function Get-WSLIP {
    wsl -e bash -c "ip addr show eth0 | grep -oP '(?<=inet\s)\d+(\.\d+){3}'"
}

function Add-FirewallRule {
    param(
        [int]$port
    )
    New-NetFirewallRule -Name "web_server_$port" -DisplayName "Web Server on Port $port" -Direction Inbound -LocalPort $port -Protocol TCP -Action Allow
}

function Remove-FirewallRule {
    param(
        [int]$port
    )
    Get-NetFirewallRule -Name "web_server_$port" -ErrorAction SilentlyContinue | Remove-NetFirewallRule
}

function Add-PortProxy {
    param(
        [int]$port
    )
    $wslIP = Get-WSLIP
    netsh interface portproxy add v4tov4 listenport=$port listenaddress=0.0.0.0 connectport=$port connectaddress=$wslIP
}

function Remove-PortProxy {
    param(
        [int]$port
    )
    netsh interface portproxy delete v4tov4 listenport=$port listenaddress=0.0.0.0
}

function Show-PortProxyStatus {
    netsh interface portproxy show v4tov4
}

switch ($command) {
    "fw" {
        Add-PortProxy -port $port
        Add-FirewallRule -port $port
    }
    "rm" {
        Remove-PortProxy -port $port
        Remove-FirewallRule -port $port
    }
    default {
        Show-PortProxyStatus
    }
}

Como puedes ver, es un script sencillo, por eso me fié de de chatGPT para ello. Hace la conexión entre las máquinas con netsh y añade una regla correspondiente al firewall. Eso me sirvió para darme cuenta que Powershell es mucho más cómodo que bash para hacer este tipo de cosas, se parece mucho a un lenguaje de programación común.

¿Por qué no vamos a usar Docker Desktop?

Aunque Docker Desktop no está mal, mi objetivo de esta configuración es tener un setup que no dependa de cosas externas como: de si la empresa tiene licencia, si está permitido usarlo o cualquier otro problema que pueda surgir.

En su momento tuve que enfrentarme a varias dificultades e investigar bastante, pero ahora que ya tengo la configuración hecha, no me tengo que volver a preocupar de Docker Desktop nunca en la vida.

Portainer: una interfaz gráfica para Docker

Al no usar Docker Desktop, toda la gestión de tus contenedores la tienes que hacer a través de la consola o de algún cliente de Docker, uno muy común es la extensión de VsCode. En este paso opcional vamos a instalar Portainer, que es una interfaz gráfica para gestionar tus contenedores.

Es súper sencillo, solo tienes que ejecutar estos dos comandos en la terminal de WSL2:

# Creamos un volumen para guardar sus datos de forma persistente
docker volume create portainer_data
# Levantamos el contenedor de Portainer
docker run -d -p 8000:8000 -p 9443:9443 --name portainer --restart=always -v /var/run/docker.sock:/var/run/docker.sock -v portainer_data:/data portainer/portainer-ce:latest

Easy peasy, ahora puedes acceder a Portainer desde tu navegador en https://localhost:9443/ y gestionar tus contenedores de una forma más visual.

⚠️ Es importante escribirlo en la barra de navegación del navegador a mano o copiarlo, si solo pones localhost:9443, te intentará llevar a http://localhost:9443.

El navegador te dará un error el certificado SSL, pero puedes ignorarlo pulsando en el botón , ya que no estamos exponiendo este puerto al exterior, solo lo usamos para acceder desde nuestra máquina.

Cuando accedas lo primero que te pedirá es que crees las credencias de administrador para Portainer.


Interfaz de creación de admin


A continuación verás una pantalla como esta, en la que pincharemos en la primera opción "Get started".


Primera pantalla de Portainer


Esto hará que Portainer se conecte a tu entorno local y te muestre todos los contenedores que tienes levantados. Esto te lo pregunta porque desde un portainer puedes gestionar varias máquinas con Docker a la vez.

Lo siguiente que verás es el dashboard de Portainer, que te mostrará un resumen de tu sistema de Docker y a partir de ahí ya puedes empezar a gestionar tu Docker.


Dashboard de Portainer

Dashboard de Portainer para contenedores


Y una mención especial a la pestaña de "App Templates" que te permite levantar aplicaciones preconfiguradas con un solo click.


Interfaz de templates de Portainer

3. Configurar la terminal

Ahora que ya tenemos las bases de nuestro entorno de desarrollo, vamos a empezar a configurar la terminal para que sea más agradable y productiva.

ZSH

Para instalarlo simplemente tenmos que ejcutar este comando en la terminal de WSL2:

sudo apt install zsh

Ahora ya tenemos ZSH instalado, pero aún no lo estamos usando, para cambiar la shell por defecto a ZSH tenemos que ejecutar este comando:

chsh -s $(which zsh)

A continuación tendrás que cerrar la terminal y volver a abrirla para que los cambios surtan efecto. Deberías ver algo como esto:

Primer mensaje de ZSH


Pulsamos la Q para salir de la pantalla de bienvenida sin tocar nada y ya estamos en ZSH.

Y dirás, "¡Pero bueno, esto es peor que antes! ¿Por qué he cambiado de shell? ¿Cómo vuelvo a la anterior?😱".

Confía en mí, en el siguiente paso ya se verá mucho mejor.

Oh My ZSH

Para instalar Oh My ZSH simplemente tenemos que ejecutar este comando en la terminal de WSL2:

sh -c "$(curl -fsSL https://raw.githubusercontent.com/ohmyzsh/ohmyzsh/master/tools/install.sh)"

Ahora nuestra terminal debería verse así, vamos mejorando, ¿verdad?

Pantalla de bienvenida Oh My Zsh

Powerlevel10k

Lo siguiente ahora será instalar el tema PowerLevel10k, que añadirá información útil a nuestra terminal y la hará más agradable a la vista.

Este es un paso un poco más complicado, ya que necesitamos descargar las fuentes necesarias para que el tema se muestre correctamente.

Primero, debemos descargar e instalar todas las fuentes desde aquí.

Luego, deberemos configurar nuestra terminal para usar una de estas fuentes. En mi caso uso "MesloLGS NF".

Configuración de "Aspecto" de la terminal

Ahora ya estamos listos para instalar el nuevo tema, simplemente ejecutamos este comando en la terminal de WSL2:

git clone --depth=1 https://github.com/romkatv/powerlevel10k.git ${ZSH_CUSTOM:-~/.oh-my-zsh/custom}/themes/powerlevel10k

Y para seleccionar el tema editamos el archivo ~/.zshrc para cambiar el tema por defecto.

Simplemente cambiamos la línea que pone:

ZSH_THEME="robbyrussell" por

ZSH_THEME="powerlevel10k/powerlevel10k".

Ahora reiniciamos la terminal y ya deberíamos ver algo como esto:

Pantalla de inicio de PowerLevel10k

Que nos empezará a hacer varias preguntas, para comprobar que tenemos las fuentes instaladas y para decidir como queremos personalizar nuestra terminal

Al responder a todas las preguntas, veremos algo como esto, aunque será diferente según lo que hayas respondido:

Terminal con PowerLevel10k configurado

Antigen

Lo siguiente será instalar Antigen, que nos permitirá instalar y gestionar los plugins que vamos a necesitar.

Simplemente tenemos que ejecutar este comando en la terminal de WSL2:

curl -L git.io/antigen > $HOME/antigen.zsh

Y editar el archivo .zshrc para que tenga este contenido

if [[ -r "${XDG_CACHE_HOME:-$HOME/.cache}/p10k-instant-prompt-${(%):-%n}.zsh" ]]; then
  source "${XDG_CACHE_HOME:-$HOME/.cache}/p10k-instant-prompt-${(%):-%n}.zsh"
fi

source ~/antigen.zsh

# Quitar del path todo lo que venga de windows y sea de node o nvm para evitar que se mezcle con lo de linux (me ha pasado)
PATH=$(echo "$PATH" | sed -e 's/:\/mnt[^:]*node[^:]*//g' -e 's/:\/mnt[^:]*nvm[^:]*//g');

# Load the oh-my-zsh's library.
antigen use oh-my-zsh

# Bundles from the default repo (robbyrussell's oh-my-zsh).
antigen bundle git
antigen bundle nvm
antigen bundle unixorn/fzf-zsh-plugin@main
antigen bundle zsh-users/zsh-autosuggestions
antigen bundle grigorii-zander/zsh-npm-scripts-autocomplete@main
antigen bundle agkozak/zsh-z

antigen theme romkatv/powerlevel10k

antigen apply


export FZF_DEFAULT_OPTS='--height 50% --layout=reverse --border --inline-info'
export FZF_ALT_C_COMMAND='fdfind --type directory'
export FZF_CTRL_T_COMMAND="fdfind --type file --follow --hidden --exclude .git"
export FZF_CTRL_T_OPTS="--preview 'batcat --color=always {}' --preview-window '~3' --bind 'ctrl-/:change-preview-window(50%|hidden|)'"

alias cat='batcat --paging=never'


[[ ! -f ~/.p10k.zsh ]] || source ~/.p10k.zsh

Pero para que esta configuración funcione necesitamos instalar algunos paquetes más:

curl -o- https://raw.githubusercontent.com/nvm-sh/nvm/v0.39.1/install.sh | bash

Cuando acabe de instalarse añadirá unas líneas al final de tu .zshrc para que se cargue automáticamente al abrir la terminal.

NVM instalado

sudo apt install bat
sudo apt install fd-find

Luego tendrás que reiniciar la terminal para que los cambios surtan efecto. Es necesario cada vez que hagas cambios en .zshrc

Ya con todo eso configurado, tendremos muchas más funcionalidades en nuestra terminal, algunas de las que más uso son:

Autocomplete para el historial de comandos

Es común que nos encontremos en la situación de tener que ejecutar un comando que ya hemos ejecutado anteriormente. En lugar de escribirlo nuevamente, podemos usar la flecha hacia arriba para recorrer el historial y encontrar el comando deseado.

Meme - Buscando en la terminal

Con todo lo que hemos configurado hasta ahora, eso es cosa del pasado, con tan solo pulsar Ctrl + R y empezar a escribir el comando que queremos buscar, nos mostrará un autocomplete con la lista de comandos que coincidan con lo que hemos escrito.

Buscando en tu historial de comandos

Autocomplete para los archivos y directorios

Similar a esto, si quieres navegar a un directorio anidado, pero solo recuerdas el destino al que quieres llegar, puedes simplemente pulsar ALT + C y empezar a escribir el nombre del directorio, te mostrará una lista con los directorios que coincidan con lo que has escrito. Al elegirlo te llevará a ese directorio directamente.

Buscando para hacer cd

Lo mismo funciona para los archivos, digamos que quieres borrar uno que no recuerdas donde está, puedes escribir rm -rf y pulsar CTRL +T y empezar a escribir el nombre del archivo, te mostrará una lista con los archivos que coincidan con lo que has escrito. Junto con una preview a la derecha (se activa/desactiva con CTRL + /).

Cuando elijas el archivo que quieres borrar, simplemente pulsas Enter y se añadirá la ruta del archivo a tu comando.

Buscando un archivo

Esto funciona similar con varios comandos, por ejemplo si quieres matar un proceso, puedes escribir kill y pulsar TAB dos veces, te mostrará una lista con los procesos que coincidan con lo que has escrito.

Buscando un proceso

TMUX

Lo último que vamos a instalar es Tmux, que nos permitirá dividir nuestra terminal en varias ventanas y paneles, para visualizar varios comandos a la vez y recuperar sesiones anteriores.

Lo primero es instalarlo con este comando:

sudo apt install tmux

Lo siguiente que tenemos que instalar es TPM que es un gestor de plugins para Tmux, que nos permitirá instalar y gestionar los plugins que vamos a necesitar.

git clone https://github.com/tmux-plugins/tpm ~/.tmux/plugins/tpm

Ahora editamos el archivo ~/.tmux.conf para que tenga este contenido: (creamos el archivo si es necesario)

# # List of plugins
# set -g @plugin 'tmux-plugins/tpm'
# set -g @plugin 'tmux-plugins/tmux-sensible'

# # Other examples:
# # set -g @plugin 'github_username/plugin_name'
# # set -g @plugin 'git@github.com:user/plugin'
# # set -g @plugin 'git@bitbucket.com:user/plugin'

# # Initialize TMUX plugin manager (keep this line at the very bottom of tmux.conf)
# run '~/.tmux/plugins/tpm/tpm'

# set -g @plugin 'dracula/tmux'

# # Set 256 colors
# set -s default-terminal 'tmux-256color'


# set -g @plugin 'tmux-plugins/tmux-resurrect'
# set -g @plugin 'tmux-plugins/tmux-continuum'




# Set 256 colors
set -s default-terminal 'tmux-256color'
set-option -sa terminal-overrides ",xterm*:Tc"
set -g mouse on

unbind C-b
set -g prefix C-Space
bind C-Space send-prefix

# Vim style pane selection
# bind h select-pane -L
# bind j select-pane -D 
# bind k select-pane -U
# bind l select-pane -R

# Start windows and panes at 1, not 0
set -g base-index 1
set -g pane-base-index 1
set-window-option -g pane-base-index 1
set-option -g renumber-windows on

# Use Alt-arrow keys without prefix key to switch panes
bind -n M-Left select-pane -L
bind -n M-Right select-pane -R
bind -n M-Up select-pane -U
bind -n M-Down select-pane -D

# Shift arrow to switch windows
bind -n S-Left  previous-window
bind -n S-Right next-window

# Reload with r
bind r source-file ~/.tmux.conf

# Shift Alt vim keys to switch windows
# bind -n M-H previous-window
# bind -n M-L next-window

set -g @catppuccin_flavour 'mocha'

set -g @plugin 'tmux-plugins/tpm'
set -g @plugin 'tmux-plugins/tmux-sensible'
set -g @plugin 'christoomey/vim-tmux-navigator'
set -g @plugin 'dreamsofcode-io/catppuccin-tmux'
set -g @plugin 'tmux-plugins/tmux-yank'
set -g @plugin 'tmux-plugins/tmux-resurrect'
set -g @plugin 'tmux-plugins/tmux-continuum'

set -g @continuum-restore 'on'

# set vi-mode
# set-window-option -g mode-keys vi
# keybindings
# bind-key -T copy-mode-vi v send-keys -X begin-selection
# bind-key -T copy-mode-vi C-v send-keys -X rectangle-toggle
# bind-key -T copy-mode-vi y send-keys -X copy-selection-and-cancel

bind '"' split-window -v -c "#{pane_current_path}"
bind % split-window -h -c "#{pane_current_path}"

# Initialize TMUX plugin manager (keep this line at the very bottom of tmux.conf)
run '~/.tmux/plugins/tpm/tpm'

Ahora abrimos una nueva sesión en TMUX con el comando:

tmux new -s session-name

Y dentro de la terminal de TMUX ejecutamos esto para recargar la configuración de TMUX usando TPM:

tmux source ~/.tmux.conf

Lo último que necesitas hacer es ejecutar el comando para instalar los plugins configurados en ~/.tmux.conf.

Para eso simplemente tienes que pulsar CTRL + Espacio. Ahora estarás en el modo de comandos de TMUX. A partir de aquí hay varios comandos que puedes ejecutar, como por ejemplo x para cerrar la ventana actual, c para abrir una nueva ventana, d para desenganchar la sesión, etc.

Pero lo que nos interesa ahora es ejecutar el comando para instalar los plugins, que es I.

Es decir que tienes que pulsar CTRL + Espacio y luego I (es una i mayúscula).

Después de unos mensajes de instalación tu terminal debería verse algo como esto:

Tmux inicio

Ahora por ejemplo si quieres partir la ventana por la mitad, con mi configuración puedes hacer clic derecho y seleccionar "Split vertical" o "Split horizontal" y se dividirá la ventana en dos.

Tmux menu de comandos click derecho

Tmux con la terminal partida

Otra cosa que me gusta mucho de TMUX es que puedes recuperar sesiones anteriores. Por ejemplo, si tienes una sesión abierta con varias ventanas, cada una en su carpeta (por ejemplo una con el servidor de backend, otra con el servidor de frontend, otra con los tests, etc), puedes cerrar la terminal y el día siguiente volver y simplemente ejecutar tmux eso abrirá tmux y restaurará la última sesión que tenías abierta.

Otro atajo importante es CTRL + Espacio y luego w, para abrir un menú con todas las ventanas que tienes abiertas y poder cambiar entre ellas o cerrarlas con click derecho.

Tmux ver sesiones

Pienso que para git lo mejor es una interfaz gráfica

Hay muchos plugins y temas para ZSH que te permiten ver el estado de tu repositorio de git, pero personalmente prefiero una interfaz gráfica para gestionar mis repositorios. Para eso uso GitKraken, que es un cliente de git multiplataforma que me permite gestionar mis repositorios de git de una forma visual y sencilla.

Además lo ideal es instalarlo dentro de WSL2, ya que así podremos abrirlo desde la terminal de WSL2 y se abrirá una ventana en Windows, pero con acceso a los archivos de WSL2.

Gitkraken

Para ello simplemente te descargas el instalador con wget y lo instalas con dpkg -i gitkraken-amd64.deb (o el nombre del archivo que te descargues).

Luego simplemente ejecutas gitkraken en la terminal de WSL2 y se abrirá la ventana de GitKraken en Windows.

Problemas frecuentes

Al abrir algo con interfaz visual desde WSL2, no se ve bien o hay glitches

Esto es un problema que he tenido varias veces, sobretodo al abrir aplicaciones de electron desde WSL2, como por ejemplo GitKraken. La solución que he encontrado es reiniciar la máquina de WSL2 con wsl --shutdown y volver a abrir todo.

Microsoft va arreglando estos problemas con el tiempo, así que tarde o temprano debería dejar de ocurrir, pero por ahora es algo que ocurre de vez en cuando.

Problemas con el z-index de las ventanas WSL2

Otro problema parecido al anterior que ocurre bastante es que si tienes varias ventanas apiladas una encima de la otra, es posible que al pinchar pinches en una de atrás en lugar de en la de delante o te salga un tooltip de una ventana que está detrás.

La solución que he encontrado es tener la menor cantidad de ventanas de Windows debajo de las ventanas de WSL2. Es decir, si tienes varias ventanas de Windows abiertas, minimízalas para interactuar con la de WSL2 o usa una parte del monitor vacía.

No tengo systemd

Como hemos comentado antes hasta hace poco WSL2 no usaba systemd por defecto. Lo tenías que activar y tenía algunas peculiaridades, pero mientras escribía este artículo, he visto ya está activado por defecto.

Esto no lo he probado personalmente ya que mi configuración es anterior a este cambio. Pero si funciona bien puede ser una mejora en WSL2 para hacerlo aún más parecido a un sistema Linux completo.

No tengo acceso a la GPU

Con el auge de la IA, el machine learning y la minería de criptomonedas, tener acceso a la GPU y CUDA es algo que cada vez más desarrolladores necesitan.

Por defecto WSL2 no tiene acceso a tu GPU ni a CUDA, pero configurarlo es sencillo. Aquí tienes más información sobre cómo hacerlo.

Este solo funciona para tarjetas gráficas Nvidia, si tienes una tarjeta gráfica de AMD o Intel, tendrás que buscar como configurarlas.


Y ahora sí, esto es todo amigos, espero que hayáis llegado hasta aquí y que algo de esto os de calidad de vida durante el desarrollo 🙂.


Créditos

Foto de hacker con máscara de calavera por Nahel Abdul Hadi en Unsplash

Foto de laptop con matrix en la pantalla por Markus Spiske en Unsplash

Meme de "Buscando en la terminal" por CommitStrip

Memes generados en imgflip

Sobre el autor: Bryan de Oliveira Brettas

Desarrollador full-stack en Mimacom, enfocándose hacia el frontend sin olvidar el otro lado

Comments
Únete a nosotros