Configurando tu Terminal para una Experiencia de Desarrollo Frontend Superproductiva 🚀
Tags: dx, hyper, exa, fig
Published: 2023-05-11 21:25:00

---
title: Configurando tu Terminal para una Experiencia de Desarrollo Frontend Superproductiva 🚀
published: true
description: Aprende cómo configurar Hyper, Fig, Exa, Starship, Zsh y Oh My Zsh para optimizar tu terminal y maximizar la productividad en el desarrollo frontend.
tags: DX,hyper,exa,fig
cover_image: https://dev-to-uploads.s3.amazonaws.com/uploads/articles/moj6nfz3nhpkcx6dvh8d.jpeg
# Use a ratio of 100:42 for best results.
# published_at: 2023-05-11 20:57 +0000
---
Como desarrolladores frontend, en los últimos años nuestra interacción con la terminal ha aumentado significativamente. 

Esto se debe a que ejecutamos numerosas tareas con frameworks y bibliotecas como [react](https://react.dev/), [react-native](https://reactnative.dev/), [Nextjs](https://nextjs.org/), [remix](https://remix.run/), [svelte](https://svelte.dev/) , [vuejs](https://vuejs.org/), entre otros, tanto para desarrollo web como móvil. Ante esta realidad, se hace evidente la necesidad de buscar una experiencia de terminal más amigable y productiva.

> Esta guía solo funciona para Linux y macOS, ya que exa aún no tiene soporte para Windows 🫣. pero podría omitir [exa](https://the.exa.website/)

## Lista de herramientas

- [hyper](https://hyper.is/):
  El objetivo del proyecto es crear una experiencia hermosa y extensible para los usuarios de la interfaz de línea de comandos, basada en tecnologías web.

- [Zsh](https://www.zsh.org/): Es un shell diseñado para uso interactivo, aunque también es un poderoso lenguaje de scripting.

- [Oh My Zsh](https://ohmyz.sh/): Oh My Zsh es un framework encantador, de código abierto e impulsado por la comunidad para administrar su configuración de Zsh.

- [starship](https://starship.rs/): ¡El indicador mínimo, ultrarrápido e infinitamente personalizable para cualquier shell!.

- [exa](https://the.exa.website/):
  Un reemplazo moderno para el comando `ls`.

- [fig](https://fig.io/): La línea de comando de próxima generación. La fuente de la verdad para los secretos, scripts y credenciales SSH de su equipo.


## Instalar hyper

Hyper me ha acompañado mucho tiempo, aunque su primer commit fue en [06 Oct 2016](https://github.com/vercel/hyper/releases?page=9), no fue que lo conocí en la fecha 10 Mar 2017 por un compañero de trabajo.

Con Homebrew ejecute el siguiente comando para realizar la instalación:

```sh
brew install --cask hyper
```

si prefieres bajar `.app`, te dejo el [link de descarga oficial de hyper](https://hyper.is/#installation)

> Para más detalles sobre su configuración e instalación, consulta su documentación oficial. https://hyper.is/#installation

## Instalar Zsh

Zsh mejora la experiencia de terminal con funciones avanzadas y personalización. Es esencial para [Oh My Zsh](https://ohmyz.sh/), permitiéndote gestionar tu configuración de Zsh y aumentar tu productividad.

Es bastante simple de instalar, ¡porque ahora tenemos Homebrew! Solo ejecutaremos un comando y estaremos listos.

```sh
brew install zsh
```

Notarás que después de que finalice la instalación, realmente no sucede nada. Tendremos que cambiar nuestro shell a Zsh, y lo hacemos con un comando bastante simple:

```sh
chsh -s $(which zsh)
```

Lo que hemos hecho es cambiar nuestro shell para utilizar Zsh cada vez que iniciamos sesión en nuestra terminal. Ahora, simplemente cierra tu terminal y vuélvela a abrir, y estarás listo para usar Zsh.

> Instala en otros sistemas operativos con solo seguir la guía oficial [desde el repositorio oficial](https://github.com/vercel/hyper#usage)

Puedes hacer uso de la configuración que te dejo a continuación:

```diff
"use strict";
module.exports = {
    config: {
        // default font size in pixels for all tabs
-        fontSize: 13,
+        fontSize: 12,
        // font family with optional fallbacks
+       fontFamily: "DroidSansMono Nerd Font",
+       cursorColor: 'rgba(248,28,229,0.8)',
        // terminal text color under BLOCK cursor
+       cursorAccentColor: '#000',
        // `'BEAM'` for |, `'UNDERLINE'` for _, `'BLOCK'` for █
        cursorShape: 'BLOCK',
+       foregroundColor: '#fff',
        // opacity is only supported on macOS
+       backgroundColor: '#000',
        // terminal selection color
+       selectionColor: 'rgba(248,28,229,0.3)',
        // border color (window, tabs)
+       borderColor: '#333',
      ...
    },
+   plugins: ["hyper-one-dark", "hyper-snazzy", "hyper-active-tab", "hyper-pane", "hyper-search", "hyper-aura-theme"],
};
//# sourceMappingURL=config-default.js.map
```

## Instalar oh-my-zsh

Ahora que Zsh está instalado, queremos comenzar a configurarlo para que funcione bien para nosotros. 

Una de las formas más fáciles de comenzar es instalando Oh My Zsh. 

Oh My Zsh viene con una tonelada de temas y complementos de Zsh que le ahorran mucho tiempo configurando cómo desea que se vea y funcione su shell.

Instalarlo es bastante simple, solo hazlo con:

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

Una vez que finalice esta instalación, hará una referencia para verificar su nuevo archivo `~/.zshrc` .

Este es un archivo de configuración oculto, y aquí es donde comenzará a agregar su configuración para hacer que Zsh sea como lo desea.

> Puedes visitar la documentación oficial si tienes problemas https://ohmyz.sh/#install

## Instalar y Configurar starship
Starship realmente me brinda una experiencia con la terminal muy agradable, desde manejar los entornos en los que estoy trabajando, hasta ejecutar comandos de manera más rápida.

Ejecute el siguinte comando para realizar la instalación:

```sh
brew install starship
``` 

Agregue lo siguiente en su archivo de configuración de `~/.zshrc`:

```sh
# s t a r s h i p
eval "$(starship init zsh)"
```

Ahora solo cierra y vuelve a abrir tu terminal Hyper y pasarás de esto:
![Image description](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/gct1zbt9sin5qsvajpmv.png)

A esto:

![Image description](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/i5j0wd98e2iudh335s7k.png)

> Para más detalles sobre su configuración e instalación, consulta su documentación oficial. https://starship.rs/guide/#%F0%9F%9A%80-installation

## Instalar y Configurar Exa

Exa no es un reemplazo directo para el comando `ls`, pero ofrece valores predeterminados mucho más intuitivos que el comando nativo. Aunque las opciones de línea de comandos disponibles son similares,  no son exactamente iguales.

Sin embargo, la mayoría de las opciones comunes funcionarán de manera consistente.

Ejecute el siguinte comando para realizar la instalacion:

```sh
brew install exa
``` 

cuando finalize la intslacon simplemnte cierre y abra nuevamnete su terminal `hypper` y ejecute `exa --long --header --git` y obtendra un resultado como el sigunete:

![Image description](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/8tn1qaawe8r8wb2rpmqd.png)

Exa puede mostrar íconos junto a los nombres de los archivos para que sean más fáciles de distinguir. 

Los iconos son símbolos Unicode especiales y, como tales, requieren que la fuente que se utilice tenga los glifos correctos.

Una buena solución para usar iconos en la terminal es el proyecto [Nerd Fonts](https://www.nerdfonts.com/), que parchea las fuentes de ancho fijo existentes con los íconos necesario.

Personalmente uso la fuente `DroidSansMono Nerd Font`, mi archivo de configuracion de `.hypper.js` se ve asi:

```js
"use strict";
module.exports = {
    config: {
        // default font size in pixels for all tabs
        fontSize: 12,
        // font family with optional fallbacks
        fontFamily: "DroidSansMono Nerd Font",
        ...
```

Es necesario también agregar alias de Exa a tu archivo de configuración `.zshrc`.

```sh
# E X A => M A N A G E R
alias ls='exa --icons'
alias lsa='exa --all'
alias l='exa -lbF --git --icons'
alias ll='exa -lbGF --git --icons'
alias llm='exa -lbGd --git --sort=modified'
alias la='exa -lbhHigUmuSa --time-style=long-iso --git --color-scale'
alias lx='exa -lbhHigUmuSa@ --time-style=long-iso --git --color-scale'
```

Al ejecutar los alias en Exa, se puede percibir notablemente la diferencia. Nos proporciona una salida más elegante, enriquecida con íconos, con el siguiente comando:

```sh
ll
```
![Image description](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/6vfrcmid7xpoidhnup12.png)

> Para más detalles sobre su configuración e instalación, consulta su documentación oficial. https://the.exa.website/#installation

## Instalar y Configuar Fig

La línea de comando de próxima generación. La fuente de la verdad para los secretos, scripts y credenciales SSH de su equipo.

Ejecute el siguinte comando para realizar la instalacion:

```sh
brew install --cask fig
```

Para poder usarlo debemos crear una cuanta, puedo hacerlo desde la terminal

```sh
fig login
```

Fig no solo ofrece una funcionalidad de autocompletado al estilo de un IDE, sino que también presenta un tablero interactivo para explorar todas sus características. En este espacio, podrás supervisar la integración con tus editores de texto y terminal de manera efectiva y visual.

![Image description](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/x18hdpxgwinjdgty2qk7.png)

Para integrarlo con Hyper, realiza lo siguiente:

- Abre el panel de control de Fig.
- En la sección de integraciones, activa Hyper.

![Image description](https://wootsbot.dev/_next/image?url=%2Fstatic%2Fimages%2Fblog%2Fconfigurando-tu-terminal-para-una-experiencia-de-desarrollo-frontend-superproductiva%2Ffig_das.gif&w=3840&q=100)

¡Prepárate para una demostración sorprendente! A continuación, te muestro todo el proceso de integración y configuración que hemos realizado:

![Image description](https://wootsbot.dev/_next/image?url=%2Fstatic%2Fimages%2Fblog%2Fconfigurando-tu-terminal-para-una-experiencia-de-desarrollo-frontend-superproductiva%2Ffig_demo.gif&w=3840&q=100)

## Conclusión:

La configuración de tu terminal con Hyper, Fig, Exa, Starship y Oh My Zsh puede llevar tu productividad de desarrollo frontend al siguiente nivel. 

Cada una de estas herramientas aporta su propio conjunto de características y beneficios que, cuando se utilizan juntas, crean un entorno de trabajo eficiente y agradable. 

Ya sea que estés buscando una interfaz más atractiva, una mayor facilidad de uso, o una forma más efectiva de gestionar tus scripts y credenciales, estos poderosos complementos tienen lo que necesitas. 

En resumen, una terminal bien configurada no es solo un lujo, sino una necesidad para cualquier desarrollador frontend moderno.