31

Configurando WSL2, Windows Terminal y Oh My Zsh

Para el Desarrollo Web con Node.js o Python me encanta trabajar con un entorno corriendo en Linux, pero para jugar y hacer cosas cotidianas amo a Windows 10. Afortunadamente no soy el único y Microsoft lo sabe, así que crearon WSL2.

De WSL2 basta decir que es un entorno completo de Linux corriendo en nuestro Windows 10, sobre Oh My Zsh solo diré que es lo mejor para trabajar con Git. No voy a profundizar más en el tema ya que si el titúlo te llamo la atención seguramente sabes de que estoy hablando.

También voy a asumir que sabes instalar WSL2 en tu computadora y que ya tienes Windows Terminal, este articulo va sobre cómo hacer funcionar Oh My Zsh con Windows Terminal y configurar su aspecto visual.

Así que para empezar solo hay que asegurarnos de que tenemos la versión 2 de WSL con el siguiente comando en PowerShell:

wsl -l -v

El resultado debe ser el siguiente:

Versión de WSL

Lo que sigue es instalar Oh My Zsh así que ejecutamos los siguientes comandos para instalar los prerrequisitos:

sudo apt update
sudo apt install git zsh -y

Una vez que tenemos los prerrequisitos vamos a ejecutar la instalación:

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

Cuando nos pregunte si queremos usar zsh como terminal le decimos que sí.

El siguiente paso es configurar el tema, en mi caso me gusta agnoster así que con el comando vi ~/.zshrc editamos el archivo y nos aseguramos de que la línea de configuración del tema este así: ZSH_THEME="agnoster"

Después hay que agregar nuestro estilo a Windows Terminal, así que abrimos la configuración que es un archivo .json y editamos para que se vea así:

"schemes": [
    {
        "background" : "#002B36",
        "black" : "#002B36",
        "blue" : "#268BD2",
        "brightBlack" : "#657B83",
        "brightBlue" : "#839496",
        "brightCyan" : "#D33682",
        "brightGreen" : "#B58900",
        "brightPurple" : "#EEE8D5",
        "brightRed" : "#CB4B16",
        "brightWhite" : "#FDF6E3",
        "brightYellow" : "#586E75",
        "cyan" : "#2AA198",
        "foreground" : "#93A1A1",
        "green" : "#859900",
        "name" : "wsl",
        "purple" : "#6C71C4",
        "red" : "#DC322F",
        "white" : "#93A1A1",
        "yellow" : "#B58900"
    }
],

Para aplicar el estilo simplemente agregamos la siguiente línea "colorScheme" : "wsl" al perfil de la terminal correspondiente a WSL:

{
    "guid": "{c6eaf9f4-32a7-5fdc-b5cf-066e8a4b1e40}",
    "hidden": false,
    "name": "Ubuntu",
    "source": "Windows.Terminal.Wsl",
    "colorScheme" : "wsl"
}

Ahora nos falta instalar las fuentes para que nuestra terminal sea capaz de mostrar iconos como el de Git. Para esto tenemos que poder ejecutar git clone en PowerShell. Para hacer la instalación nos situamos en una carpeta vacía y ejecutamos lo siguiente:

git clonehttps://github.com/powerline/fonts.git
cd fonts
.\install.ps1

Cuando el script termine de instalar todas las fuentes simplemente agregamos la que deseamos utilizar en los ajustes del perfil de Windows Terminal:

{
    "guid": "{c6eaf9f4-32a7-5fdc-b5cf-066e8a4b1e40}",
    "hidden": false,
    "name": "Ubuntu",
    "source": "Windows.Terminal.Wsl",
    "colorScheme" : "wsl",
    "fontFace" : "DejaVu Sans Mono for Powerline"
}

En el penúltimo paso de nuestra configuración cambiaremos la forma en la que se muestra el nombre de usuario y ocultaremos el nombre del equipo.

Para lograrlo hay que abrir el archivo de configuración de zsh:

vi ~/.oh-my-zsh/themes/agnoster.zsh-theme

Y sustituir la línea 92 por la siguiente:

prompt_segment green black "%(!.%{%F{yellow}%}.)%n"

Por último, solo cambiamos la ruta por defecto que se abre cuando lanzamos la consola para que se abra nuestra carpeta principal de Linux y no la de Windows. Para lograrlo solo ejecutamos ~/.zshrc y agregamos la siguiente línea:

cd ~

Y eso es todo, ahora tendremos una terminal extremadamente bonita como resultado.

Versión de WSL

Nota

El efecto de transparencia es preferible configurarlo en el perfil global dentro de los ajustes de la Terminal:

"defaults":
    {
        // Put settings here that you want to apply to all profiles"useAcrylic": true, 
        "acrylicOpacity": 0.4
    }...

Tips

Si estamos usando nvm para administrar las versiones de Node.js no se reconocerán los comandos, para solucionarlo solo hay que agregar en el archivo ~/.zshrc lo siguiente:

export NVM_DIR=~/.nvm
 [ -s"$NVM_DIR/nvm.sh" ] && . "$NVM_DIR/nvm.sh"

Si queremos que la Terminal integrada de Visual Studio Code se vea hermosa como debería verse hay que agregar en la configuración de la instalación de WSL la fuente que permite mostrar en la terminal los iconos:

{
    "terminal.integrated.fontFamily": "DejaVu Sans Mono for Powerline"
}

Y eso es todo… con dichos ajustes tendremos una Terminal en la que da gusto trabajar dentro de Visual Studio Code.

Versión de WSL

Eso es todo, espero disfruten de su entorno profesional para desarrollar cosas súper geniales.

Escribe tu comentario
+ 2
Ordenar por:
4
2825Puntos

Tengo dos inconvenientes y agradecería si alguien me ayuda.
Por un lado, cuando ejecuto el comando ~/.zshrc me arroja el siguiente error: zsh: permission denied: /home/mi_usuario/.zshrc

Lo otro, en qué lugar encuentro yo la “configuración de instalación de WSL” para poder poner esta línea?

{
    "terminal.integrated.fontFamily": "DejaVu Sans Mono for Powerline"
}

Me gustó que el tutorial explicara todo paso por paso, pero esta última parte es muy implícita. Se refiere al mismo archivo JSON donde añadí la configuración de colores y las fuentes? si es así en qué lugar exactamente debo agregar estas líneas?

Por lo demás gracias por el tutorial, me ayudó bastante.

1
4391Puntos
5 meses

Me ocurren los mismos dos inconvenientes, ojala alguien nos responda
Saludos

1
5313Puntos
4 meses

Justo ese mismo problema tengo y ahora no sé como regresar todo a como estaba antes 😕 jajaja

1
4 meses

No estoy muy seguro pero creo que es simplemente para abrir el archivo de .zshrc, puedes abrirlo con otro editor de texto como vs code con el comando code .zshrc y ahi modificar lo que te dice

1
4135Puntos
3 meses

Hola, el comando ~/.zshrc a mi tampoco me funcionó, pero pueden hacer: primero cd ~ y luego hacen: code .zshrc y alli les abre el código para editar.

Lo segundo aún estoy averiguandolo.

Saludos!

1
5516Puntos
un mes

No sé si aún te sirva, pero lo dejo por si a alguien le puede ayudar
Con respecto a configurar los íconos en vscode tienes que buscar en preferecias o configuración de vscode terminal.integrated.fontFamily y ahí copian DejaVu Sans Mono for Powerline y debería de funcionar.
Espero haber ayudado a alguien, saludos.

3
7988Puntos

Hola,

Se presento un problema en la instalación de las fuentes, fue un tema de Policies en PowerShell (about_Execution_Policies), lo cual lo explica en el siguiente link about_Execution_Policies, esta es para poder correr scripts de baja confianza se soluciono con lo siguiente:

Set-ExecutionPolicy -ExecutionPolicy RemoteSigned

Gracias por el material, quedo muy bonita la terminal.

1
4135Puntos
3 meses

Hola, Luis, al hacer esto no dejamos una brecha de seguridad? gracias

2
20235Puntos

Genial el tutorial!
Una recomendación para que el vscode pueda detectar la fuente y los caracteres es agregar la fuente que eligieron en la configuración de Windows Terminal y usenla en la configuración de terminal de VSCode para WS en el apartado Terminal > Integrated: Font Family

2
9351Puntos

No sé si esto es una actualización o fue algo que instale
Captura de pantalla 2022-03-08 082028.png

No hay problema, o debo corregir algo?

1
2791Puntos
un mes

hola compañero, me sucede el mismo error, lo pudiste seleccionar?

1
2791Puntos
un mes

tienes que verificar este paso: wsl -l -v es en PoweShell no en ubuntu, porque si lo haces en ubuntu aparece asi como muestras en el pantallazo. Ya cuando verifiques que tienes WSL2 vuelve ahora si a ubuntu con el siguiente paso que es: sudo apt update.

1
5882Puntos

No entiendo la parte de agregar

cd ~

No dice donde añadirla o como 😦

Necesito ayuda!

3
5571Puntos
4 meses

Hola! Tienes que agregar la línea en tu archivo .zshrc que se encuentra en tu home directory (puedes accesar a él usando el comando cd ~)

Utiliza tu editor de código favorito (en mi caso estoy usando Visual Studio Code y por lo tanto, utilizo el comando code .zshrc para abrirlo, sin embargo, puedes usar vim, nano, etc.), agrega la línea (cd ~) en cualquier parte y guarda el archivo:

helpWithZsh.png
helpWithZshVSCode.png
1
9581Puntos

Muchas gracias por el tutorial !

Tengo una consulta

Estoy corriendo wsl2 en windows 10 y cuando ingreso desde mi maquina para mi caso ubuntu a un repositorio git que se encuentra en /mnt va demasiado lento. Encontré algunos blogs donde dan algunas soluciones pero igual sigue super lento.

Si alguien encuentra una solución les agradecería compartirla.

1
3443Puntos
6 meses

Tienes que tratar de usar todos tus repositorios dentro de tu home directory para que funcionen rapido

1
4135Puntos

Excelentisimo aporte compañero, aclaro algo para el que esté perdido, cómo este curso está antes del de GIT, es necesario que instalen GIT para que les funcionen algunos comandos como el de descarga de fuentes.

0
13750Puntos

Gracias por tu aporte.
Es muy completo y funciona 100%
Cada ves Windows mejora mas

<h1>Eres un pro…</h1>