Configurando tu Terminal para una Experiencia de Desarrollo Frontend Superproductiva 馃殌

11 may 2023

7 min de lectura

鈥撯撯 vistas

Picture of Configurando tu Terminal para una Experiencia de Desarrollo Frontend Superproductiva 馃殌

DALL路E

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, react-native, Nextjs, remix, svelte , vuejs, 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

Lista de herramientas

  • hyper: 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: Es un shell dise帽ado para uso interactivo, aunque tambi茅n es un poderoso lenguaje de scripting.

  • Oh My Zsh: Oh My Zsh es un framework encantador, de c贸digo abierto e impulsado por la comunidad para administrar su configuraci贸n de Zsh.

  • starship: 隆El indicador m铆nimo, ultrarr谩pido e infinitamente personalizable para cualquier shell!.

  • exa: Un reemplazo moderno para el comando ls.

  • 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.

Instalar hyper

Hyper me ha acompa帽ado mucho tiempo, aunque su primer commit fue en 06 Oct 2016, 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:

brew install --cask hyper

si prefieres bajar .app, te dejo el link de descarga oficial de hyper

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

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

"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 Zsh

Zsh mejora la experiencia de terminal con funciones avanzadas y personalizaci贸n. Es esencial para Oh My Zsh, 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.

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:

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

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 -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:

brew install starship

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

# 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:

starship before

A esto:

starship after

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:

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:

exa ls

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, 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:

"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.

# 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:

ll
exa ls icons

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:

brew install --cask fig

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

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.

fig dashboard

Para integrarlo con Hyper, realiza lo siguiente:

  • Abre el panel de control de Fig.
  • En la secci贸n de integraciones, activa Hyper.
Fig

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

Fig Demo

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.

All rights reserved 漏 wootsbot.dev 2023