143

Cómo personalizar tu terminal: temas, colores y plugins

82900Puntos

hace 2 meses

Curso de Prework: Configuración de Entorno de Desarrollo en Windows
Curso de Prework: Configuración de Entorno de Desarrollo en Windows

Curso de Prework: Configuración de Entorno de Desarrollo en Windows

Configura Windows como un entorno profesional para desarrollo. Aprende a configurar correctamente Windows Subsystem Linux o WSL, configurar llaves SSH, instala Visual Studio Code y conoce el flujo básico de Git.

La terminal es esa herramienta usada por la mayoría de programadoras para correr comandos, ejecutar programas y scripts que ayudan al flujo de trabajo.

Te recomiendo que en Windows tengas instalado la nueva y Windows Subsystem for Linux (WSL) y la nueva terminal.

Esto lo puedes aprender en el nuevo curso de Prework: Configuración de Entorno de Desarrollo en Windows. Si tienes alguna distribución de Linux o una Mac (y iTerm2 preferiblemente), ya tienes todo lo que necesitas.

ZSH y oh-my-zsh

Empecemos por instalar zsh, es un shell que es muy fácil de personalizar, puedes instalarlo con:

Linux y WSL

sudo apt install zsh

Mac

brew install zsh

Y para instalar oh-my-zsh

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

Temas

Cuando reinicies tu terminal tendrás unos colores y un tema muy familiar que seguro has visto en muchos de nuestros cursos. Ese tema se llama robbyrussell

Es un buen tema, puedes dejarlo así, no necesitas nada más y estás listo para continuar con tu aprendizaje. Sin embargo, hay una gran cantidad de temas allá afuera que podrían gustarte.

Muchos de estos, teniendo zsh instalados, puedes instalarlos modificando el archivo .zshrc que te aparecerá en tu carpeta home o en la ruta ~/.zshrc y si no está puedes crearlo sin ningún problema.

Yo soy muy fan de los temas sencillos y por eso mis preferidos son:

Pure


Fue una de las que usé por mucho tiempo por esa simplicidad que me gusta en las terminales, no necesito tanta información que puede arruinar un poco el espacio de mi pantalla, tal vez si tienes un monitor más grande puedes usar un tema diferente.

Spaceship

Es la que uso en este momento porque puede mostrar la versión del lenguaje que estás usando en ese entorno de trabajo. Tiene diferentes iconos para cosas como Node, PHP, Elixir, Python, Ruby y demás.

Starship

Me lo he encontrado haciendo este blogpost y se ve como una combinación entre las dos anteriores.

Powerlevel10k

Es otra que se ve mucho en el mundo de tutoriales de programación, es un tema que puedes configurar de diferentes formas dependiendo de tus gustos.

No es de mi gusto en particular, pero es muy popular.

Hay muchos más temas que puedes encontrar en el repositorio de oh-my-zsh o acá

Colores

Estos pueden variar de diferentes formas y puedes crear tu paleta de colores si así los prefieres, pero ya hay una gran cantidad que puedes usar si eres #TeamDark o #TeamLight

Gogh

Puedes probarlos con:

 bash -c  "$(curl -sLo- https://git.io/vQgMr)"

Funcionará con diferentes tipos de terminal usadas en Linux e incluso es compatible con iTerm en MacOS

Colores en Windows

Para cambiar los colores en WSL, les recomiendo usar Windows Terminal y nada más.

Si van a este repositorio se encontrarán con una carpeta que dice Windows Terminal color scheme.

Si estas familiarizado con algunos colores o nombres de temas como Monokai, Ocean, Dracula y similares puedes buscarlos en ese repositorio. Cualquiera que elijas, tendrás que copiar y pegar el contenido del documento .json. Por ejemplo Monokai Soda.json

Con Windows Terminal abierta, puedes escoger diferentes tipos de terminales, pero en este caso iremos a “Settings

Pegarás el contenido de “Monokai Soda.json” en el apartado de schemes y debería quedar de esta forma:

"schemes": [
    {
      "name": "Monokai Soda",

      "black": "#1a1a1a",
      "red": "#f4005f",
      "green": "#98e024",
      "yellow": "#fa8419",
      "blue": "#9d65ff",
      "purple": "#f4005f",
      "cyan": "#58d1eb",
      "white": "#c4c5b5",
      "brightBlack": "#625e4c",
      "brightRed": "#f4005f",
      "brightGreen": "#98e024",
      "brightYellow": "#e0d561",
      "brightBlue": "#9d65ff",
      "brightPurple": "#f4005f",
      "brightCyan": "#58d1eb",
      "brightWhite": "#f6f6ef",
      "background": "#1a1a1a",
      "foreground": "#c4c5b5"
    }
  ]

Ahora puedes ir a la lista de perfiles que tienes en ese mismo archivo json y buscar a Ubuntu. Agregaremos "colorScheme": "Monokai Soda" y debería quedar de esta forma:

{
   "guid": "{07b52e3e-de2c-5db4-bd2d-ba144ed6c273}",
   "hidden": false,
  "name": "Ubuntu-20.04",
   "source": "Windows.Terminal.Wsl",
   "colorScheme": "Monokai Soda"
}

Sin editar nada más actualizmos y nuestra terminal de Ubuntu en Windows Terminal debería tener ahora los colores de Monokai Soda o el tema que elgiste.

Plugins

Como puedes ver en los gifs de Starship o Spaceship hay algunas sugerencias al momento de escribir comandos e incluso un poco de highlight con colores cuando el comando es correcto esto es posible con los plugins

zsh-autosuggestions

Fácil con el nombre. Nos ayudará con las sugerencias al momento en que empecemos a escribir en la terminal. Suelen ser comandos que hemos hecho a lo largo del tiempo mientras el plugin esté instalado.

Así que si usamos los mismos comandos en nuestro proyecto, será de gran ayuda. Por ejemplo cuando queremos hacer commit, push o pull con git.

Con la flecha derecha -> en el teclado completará lo que te sugiere, esto por supuesto se puede cambiar en la configuración del plugin.

zsh-syntax-highlighting

Nos ayudará con el highlight de los comandos que escribamos, podrás saber si un comando es válido o no antes de ejecutarlo ahorrandonos una gran cantidad de tiempo y de dolores de cabezas con errores.

Este es un ejemplo de como se ve mi .zshrc en la sección de plugins

plugins=(
    git
    zsh-autosuggestions
    fast-syntax-highlighting
)

Hay muchos plugins que te pueden servir dependiendo de lo que hagas y de lo que te guste. Puedes encontrar muchos de ellos en este repositorio. Échale un vistazo a este gran listado y seguro encuentras algo que te gustaría probar.

Conclusión

Puedes personalizar tu terminal de tantas formas posibles con ayuda de temas, colores, fuentes y plugins.

Es un lugar donde podemos pasar una gran cantidad de horas al igual que nuestro editor de texto, así que es muy apropiado configurarlo de la manera en la que estemos a gusto con solo verlo diariamente.

Espero que este blogpost te haya dado las bases e ideas para configurar tu terminal tantas veces como creas convenientes.

Muéstranos tu terminal en los comentarios y si quieres dinos como la configuraste 😃

Curso de Prework: Configuración de Entorno de Desarrollo en Windows
Curso de Prework: Configuración de Entorno de Desarrollo en Windows

Curso de Prework: Configuración de Entorno de Desarrollo en Windows

Configura Windows como un entorno profesional para desarrollo. Aprende a configurar correctamente Windows Subsystem Linux o WSL, configurar llaves SSH, instala Visual Studio Code y conoce el flujo básico de Git.
Kevin
Kevin
@iKenshu

82900Puntos

hace 2 meses

Todas sus entradas
Escribe tu comentario
+ 2
Ordenar por:
13
10970Puntos

Como ayuda, les dejo este pequeño (escrito para mi yo futuro) resumen para instalar WSL.

Instalar una distribución UNIX en Windows

  1. Ejecutar Windows PowerShell como administrador.

  2. Activar WSL poniendo el siguiente comando en PowerShell:

    Enable-WindowsOptionalFeature -Online -FeatureName Microsoft-Windows-Subsystem-Linux

  3. Esperar… debería salir algo como:
    Path :
    Online : True
    RestarNeeded : False

  4. Cerrar o usar el comando exit.

  5. Abrir el MicrosoftStore.

  6. Buscar alguna distribución Linux(para esta guía Ubuntu).
    “Obtener” e instalar.

  7. Una vez termine. Iniciar la configuración esta vez dentro de linux.

  8. Ingresa tu nombre de usuario:
    Enter new UNIX username: Tu nombre

  9. Y crea tu contraseña:
    Enter new UNIX password: Tu contraseña
    Retype new UNIX password: Tu contraseña

  10. ¡Perfecto! ya tienes Linux en Windows(una parte por lo menos).

Nota 01: Para moverte en tu distribución Windows, usa el comando:
cd …/…/mnt/c

Nota 02: Se pueden encontrar varias versiones de Ubuntu, al momento se encuentran:
Ubuntu 18.04 LTS
Ubuntu 20.04 LTS
Ubuntu
LTS: Long Term Support.

Su principal diferencia radica en que el que no cuenta con versión siempre estará en al ultima versión(se actualizará automáticamente), los otros permanecerán siempre en esa versión a menos que se actualice de manera manual, esto con la finalidad de dar estabilidad en un proyecto, no queremos que este vaya cambiar y nos genere conflictos de versiones.

4
22913Puntos
2 meses

Excelente resumen!! Muchas gracias!

5
17012Puntos

Una recomendación para probar diferentes temas es que la primera vez pongas como tema “random”, ya que irá cambiando de tema cada vez que abramos la terminal y podremos ir apuntando cual nos gusta más.

Les dejo algunos ejemplos

Screenshot from 2020-10-07 17-40-33.png
Screenshot from 2020-10-07 17-39-03.png
Screenshot from 2020-10-07 17-38-26.png
Screenshot from 2020-10-07 17-39-36.png
4
4074Puntos

Ahora con la nueva terminal combinado con Windows Subsystem for Linux, está de lujo…

terminalwin.png
2
1887Puntos
2 meses

Tienes que contarme cómo lo histe para que funcione con WSL. Lo intenté con el tema “paceship” y no me funciona u.u

2
4074Puntos
2 meses

Yo también instalé el tema “Spaceship”, te recomendaría (asumiendo que ya esta instalado zsh y oh-my-zsh):

git clonehttps://github.com/denysdovhan/spaceship-prompt.git "$ZSH_CUSTOM/themes/spaceship-prompt" --depth=1
  • Despues poner este comando para crear algo como un acceso directo al tema y oh-my-zsh lo encuentre:
ln -s"$ZSH_CUSTOM/themes/spaceship-prompt/spaceship.zsh-theme""$ZSH_CUSTOM/themes/spaceship.zsh-theme"
  • Luego debes escribir el nombre del tema en el archivo .zshrc:
ZSH_THEME="spaceship"

**Para eso **

  • Debes ir al directorio del usuario, el home, con
cd
  • Ahi si listas los archivos con:
ls -las

Podrás ver el archivo .zshrc

buscar .zshrc.png
  • Puedes utilizar el comando nano para editarlo
nano .zshrc
editar conf zsh.png
  • Luego de escribir el nombre del tema puedes salir presionando “Ctrl + x” luego aceptas los cambios presionando “Y” y das un enter para confirmar.

-No se te olvide ir a configuraciones del terminal para cambiar el tipo de fuente:
entrar setings.png

  • Ya en el documento de configuracion del terminal buscas la sección de “perfiles” buscas el perfil para Ubuntu debe decir name:Ubuntu y ahi aumentas la linea:
"fontFace": "Fira Code",
setting terminal.png

Con eso ya deberías tener el tema instalado, espero te sirva, Saludos.

2

En lo personal yo uso WSL2 en Windows 10 y me ha funcionado de maravilla, nunca había sido tan fácil para mi trabajar en windows, originalmente instalé WSL2 para trabajar con docker y estos son los tutoriales que seguí para llegar a este punto.

Install Windows Subsystem for Linux (WSL) on Windows 10

Utilizar Docker con WSL 2 en Windows 10 - Adictos al trabajo

Docker Desktop WSL 2 backend

Make your WSL or WSL2 terminal awesome - with Windows Terminal, zsh, oh-my-zsh and Powerlevel10k

Awesome WSL / WSL2 Windows Terminal, zsh, oh-my-zsh, Powerlevel10k

Así se ve mi terminal actualmente
Captura.PNG

2
3417Puntos

Les comparto mis archivos de configuración por si les interesa.

dotfiles

1
4074Puntos
2 meses

Me sirvio de mucho, muchas gracias!!!

2

una pregunta como haces para colocar unos videos pequeños en el blog?

1
82900Puntos
2 meses

Esos son gifs 😅

Podrías subirlos a un lugar como imgur o giphy, para luego colocar el enlace directo acá

1
22913Puntos

¡Hola!
Recién termino de personalizar todo, presten atención a los repositorios de los plugins ya que la configuración de Kevin está distinta a como deberían tenerla.

plugins=(
    git
    zsh-autosuggestions
    zsh-syntax-highlighting

)

Así debería quedarles, saludos!

1
2033Puntos

Buen post! ya quiero personalizar mis terminales

1
7533Puntos

Excelente ya tengo varios temas para ir probando…
Gracias.

Screenshot from 2020-10-08 10-56-35.png
1
1887Puntos

Al instalar el spaceship en mi WSL y configurar el archivo .zshrc no me carga el tema u.u Aunque he probado con otros que vienen instalados con el zsh y son muy bonitos.

1
4074Puntos
2 meses

Justo acabo de escribir mas arriba como me funcionó a mi.

1

No he podido instalar starship
En el último paso me sale que no tengo acceso a las carpeta.¿Alguien sabe qué debería corregir?

Sin título.png
1
2 meses

Previamente tenía esta información. Pongo ~/.zshrc eval “$(starship initi zsh)” como indica ahí después de instarlar starship, pero sale el mensaje que puse arriba

1
16815Puntos

Necesitaba este tutorial !!! Mil millones de gracias !!

1
4330Puntos

Un oscar para ti, grande crack

1
19335Puntos

Alguien que lo explique para MAC?

1
5424Puntos

Tiene tantos estilos!!

1
5995Puntos

Queda genial!, utilicé oh my zsh con el theme nanotech

1
1136Puntos

¿Cómo puedo volver al tema por defecto de la terminal?

1
82900Puntos
2 meses

Puedes desinstalar todo lo que se instaló.

O solo puedes cambiar el .zshrc para volver a colocar robbyrussell como tema.

1
8071Puntos

Hey buenisimooo! yo adoro personalizar todo, me encanto el post!

1
10002Puntos

Tengo una duda.
¿Cada vez que quiero usar ZSH debe estar como SU, eso es normal o qué falta en mi configuración?

1
969Puntos

Ultimamente he estado personalizando mi entorno de trabajo. Y este post me ha dado mucha curiosidad con la personalizacion de la terminal y me gustaria intentarlo tambien xD
Ademas, me ayuda a probar cosas nuevas

1
2 meses

VisualStudioCode siempre es una buena opción para comenzar.

1
1548Puntos

No entendí esta parte:
Muchos de estos, teniendo zsh instalados, puedes instalarlos modificando el archivo .zshrc que te aparecerá en tu carpeta home o en la ruta ~/.zshrc y si no está puedes crearlo sin ningún problema.

¿Alguien me explica?

3
11046Puntos
2 meses

Sure, no problem! What iKenshu meant to say is that you can modify the configuration file by using either vim or nano. To do that, in the terminal type the following:

vim $HOME/.zshrc

or

nano $HOME/.zshrc

(pressing Enter afterwards)
and look for this section in that file:
zshrc.JPG

As you can see, in the field ZSH_THEME, you just need to change the value to your desired theme, and save the changes. In my case, I use the powerlevel10k one
Hope this helps!

1
5Puntos

Voy a intentar personalizar mi terminal, gracias por el post. 😋😋😋

1

Hola Kevin. ¿Cómo estás? Instalé con esta línea de comandos: sudo apt install zsh en ubuntu, pero no quedó igual. Realicé el update pero siguió igual, ¿a qué crees que se deba? Gracias por esta información

1
82900Puntos
2 meses

Después de zsh, instalaste oh-my-zsh? 🤔