Jazz Up Your "ZSH" Terminal In Seven Steps - A Visual Guide

En este blog, cubriré la instalación de ITerm2, ZSH shell, "oh my ZSH", Temas, esquemas de color ITerm2, complementos "oh my ZSH" y habilitaré el soporte de "ligadura" para ayudar a crear una Terminal hermosa y poderosa.

Si desea hacer que su terminal Bash regular sea potente, eche un vistazo a mi blog anterior: "Jazz Up Your Bash Terminal". Pero ZSH explicado en este blog es algo más poderoso.

Resumen:

Cubriremos muchas cosas. Esto puede ser confuso, así que aquí está el resumen de lo que haremos.

  1. Instalar ITerm2: esta es una mejor alternativa al Terminal predeterminado
  2. Instale el último shell ZSH: es más potente que el shell bash normal. Cambiaremos ITerm2 para usar el shell ZSH.
  3. Instale "Oh My ZSH": esta es una herramienta CLI para configurar fácilmente ZSH y agregar temas y complementos a ZSH
  4. Agregue dos tipos de Temas usando "Oh My ZSH" - algunos temas necesitan pasos adicionales, así que cubriremos ambos
  5. Instale diferentes esquemas de ITerm2: estos son solo esquemas de color para la interfaz de usuario
  6. Agregue dos complementos diferentes usando "Oh My ZSH" para mejorar la productividad
  7. Habilite el soporte de "ligadura" para que cuando escriba una flecha =>, aparezca como una flecha real →

Paso 1— Instale ITerm2

A muchos programadores les gusta ITerm2 en lugar de la Terminal predeterminada. Es similar a la Terminal, pero tiene muchas características propias. Por supuesto, puede ejecutar ZSH, Bash y otros shells dentro de él.

El siguiente video muestra algunas de las nuevas características del Elemento 2 (v3).

Para este blog usaremos ITerm2. Cuando menciono "Terminal", me refiero a ITerm2. Aunque los pasos son los mismos para Terminal o ITerm2.

Paso 2: cambie Shell a ZSH

El siguiente video muestra por qué ZSH es mejor que solo un bash shell.

Opción 1: usar el ZSH de Mac:

Mac viene con un ZSH listo para usar, por lo que no necesitamos instalarlo. Sin embargo, a veces es una versión anterior de ZSH. Por lo general, se encuentra en / bin / zsh. Para usarlo, todo lo que tenemos que hacer es cambiar shell (chsh).

  1. Abra la Terminal (o ITerm2) y escriba el siguiente comando.
$ chsh -s $ (que zsh)

2. Ingrese la contraseña y cambiará el shell, al cerrar sesión y al iniciar sesión.

3. Cerrar sesión y volver a iniciar sesión

4. Para probar, abra la Terminal y escriba lo siguiente, y debería decir zsh.

$ echo $ 0
zsh // debería devolver zsh

Opción 2: instalar Homebrew e instalar la última ZSH a través de Homebrew

Esta opción es bastante común entre los usuarios, porque algunos de los complementos solo funcionan con la última ZSH.

Homebrew, simplemente dicho, es un instalador de línea de comandos para todo tipo de software. Instalemos eso primero.

  1. Instala Homebrew ejecutando el siguiente comando.
ruby -e "$ (curl -fsSL https://raw.githubusercontent.com/Homebrew/install/master/install)"

2. Si obtiene el error de Herramientas de línea de comandos para Xcode, significa que no ha instalado las herramientas de CLI para Xcode. Si no recibe el error, puede omitir este paso porque ya lo tiene instalado.

Las herramientas CLI de XCode Developer son utilizadas por varias aplicaciones que manipulan las funciones centrales de OSX. Así que asegúrese de instalar las herramientas Xcode CLI ejecutando el siguiente comando.

$ xcode-select —-install

Nota: El comando anterior abre el instalador de Mac e instala las herramientas XCode Developer CLI. Si no funciona, intente xcode-select -r para restablecer.

3. Instale ZSH a través de Homebrew

Ejecute el siguiente comando para instalar ZSH. Se instala en / usr / local / bin / zsh PS: el ZSH predeterminado de Mac está en / bin / zsh

brew install zsh

4. Use la versión Homebrew de ZSH

Ejecute el siguiente comando. Se le pedirá que ingrese la contraseña de Mac.

chsh -s / usr / local / bin / zsh

5. Cerrar sesión y volver a iniciar sesión.

6. Pruebe si estamos usando ZSH y la ZSH correcta

$ echo $ 0
zsh // correcto
$ which zsh
/ usr / local / bin / zsh // correcto

Paso 3: "Oh, mi ZSH"

"Oh My ZSH" es un complemento que se ejecuta sobre ZSH. Proporciona configuración predeterminada para ZSH (archivo ~ / .zhrc) y también proporciona temas y más funciones.

Por lo que sé, la mayoría de los usuarios avanzados que usan ZSH también usan "Oh My ZSH".
  1. Instale "Oh My ZSH"

Ejecute el siguiente comando para instalar "oh My ZSH".

sh -c "$ (curl -fsSL https://raw.github.com/robbyrussell/oh-my-zsh/master/tools/install.sh)"
Oh My ZSH está instalado

2. Cierre y salga de ITerm2 y vuelva a abrirlo.

Debería verse como a continuación. Tenga en cuenta que el mensaje ha cambiado y el tema es un poco diferente. Eso es "Oh My ZSH" en acción para usted.

Tema inicial de Oh My ZSH

Paso 4: cambiar temas e instalar fuentes

En este paso, agregaremos dos Temas diferentes "Oh My ZSH". "Oh My ZSH" viene con toneladas de temas. PD: Pero algunos Temas necesitan pasos adicionales como instalar fuentes específicas, etc.

Para configurar un tema, simplemente abra el archivo ~ / .zshrc (creado por "Oh My ZSH") y cambie el tema como se muestra a continuación.

PD: .zshrc es el archivo de configuración para el shell ZSH. Las personas que no usen "Oh My ZSH" deberán crear manualmente este archivo y agregar cualquier configuración ellos mismos. "Oh My ZSH" crea automáticamente este archivo si no existe y luego agrega su propio conjunto de configuraciones en este archivo.

Tema 1: agreguemos un tema llamado "Avit"

  1. Abra .zshrc
$ open ~ / .zshrc

2. Cambie el tema a "Avit"

Puede navegar por todos los temas "Oh My ZSH" aquí. Para cambiar el tema, simplemente cambie el valor ZSH_THEME en el archivo ~ / .zshrc de robbyrussell a Avit.

3. Actualice la configuración de ZSH

Ejecute el siguiente comando para actualizar la configuración.

$ fuente ~ / .zhrc
Su símbolo del sistema en Avit Theme

4. Cambie el color de fondo y el tamaño de fuente

Abra ITerm2> Preferencias> Perfiles> Colores y cambie el color negro de fondo para usar 20% de gris como se muestra a continuación.

Utilice 20% de fondo gris

Luego abra Texto> Cambiar fuente y cambie el tamaño a 14pt.

Cambiar fuente a 14pt¡Un limpio y hermoso Iterm2 con ZSH!

OK, instalemos un tema diferente que necesite fuentes.

Tema 2: Instalación del tema "agnoster" Oh My ZSH

Este es un tema popular porque emula la aplicación Powerline Python que mejora el terminal. La siguiente imagen muestra cómo se ve. Pero este tema también necesita que instalemos temas de Powerline.

tema agnoster Oh My ZSH

1. Instalar fuentes Powerline

$ git clone https://github.com/powerline/fonts.git
fuentes $ cd
$ ./install.sh

2. Cambie el tema a "agnoster"

$ open ~ / .zshrc
Establezca ZSH_THEME = "agnoster" y guarde el archivo

3. Salga de ITerm2 y vuelva a abrirlo.

4. Establecer la fuente Powerline

Puede configurar cualquier fuente parcheada de Powerline que desee. Todas las fuentes terminan con "para Powerline".

Abra ITerm2> Preferencias> Perfiles> Texto> Cambiar fuente y configúrelo en algo que tenga "para Powerline". Elijo la fuente "Meslo LG DZ para Powerline".

Meslo LG DZ para fuente Powerline Iterm2
Nota - Si está confundido acerca de las fuentes y los Temas: los Temas son para "Oh My ZSH" y el shell ZSH y las fuentes son para el propio Iterm2.

5. Todo hecho

En este punto, su Terminal debería verse a continuación:

Paso 5 - Instale los "esquemas de color" de iTerm2 (Temas ITerm2)

Hay muchos esquemas de colores magníficos para iTerm2. Estos esquemas cambian el color de primer plano, el color de fondo, el color del cursor, etc. Puede encontrarlos en iTerm2-color-esquemas de repositorio de Github.

Nota: Estos son solo esquemas de color de la interfaz de usuario de ITerm2 y no tratan con el aspecto del símbolo del sistema como los temas de "Oh My ZSH" (además de solo cambiar los colores).

Siga estos pasos para instalarlos.

  1. Descargue los esquemas de color iTerm2 como un archivo zip y extráigalo
  2. La carpeta "Esquemas" contiene todos los archivos de esquemas de color; terminan con .itermcolors
  3. Abra iTerm2> Preferencias> Perfil> Colores> Ajustes preestablecidos de color> Importar
  4. En la ventana de importación, navegue a la carpeta "Esquemas" (desde el paso 2)
  5. Seleccione todos los archivos para poder importar todos los esquemas de color a la vez
  6. Simplemente seleccione el esquema de color que desee.
Mis favoritos son Batman y Argonaut
Batman Iterm2 Theme

El esquema de color Argonaut se ve a continuación:

Esquema de color de argonauta

Paso 6— Instalar complementos

Los complementos agregan más funcionalidades a su flujo de trabajo. Por defecto, "Oh My ZSH" ya tiene el complemento "git". y es por eso que pudiste ver todos esos estados de Git en las indicaciones en capturas de pantalla anteriores. Agreguemos otro para ver cómo funciona.

Nota: En esta sección, instalaremos dos complementos diferentes para mostrar cómo funcionan.

Complemento 1 - Agregar complemento de resaltado de sintaxis

El complemento de resaltado de sintaxis agrega hermosos colores a los comandos que está escribiendo como se muestra a continuación.

  1. Clone el repositorio del complemento de resaltado de sintaxis zsh y cópielo en el directorio de complementos "Oh My ZSH".
git clone https://github.com/zsh-users/zsh-syntax-highlighting.git $ {ZSH_CUSTOM: - ~ / .oh-my-zsh / custom} / plugins / zsh-syntax-highlighting

2. Active el complemento en ~ / .zshrc agregando `zsh-syntax-highlighting a la sección Complementos como se muestra a continuación.

Agregue un nuevo complemento en una nueva línea dentro de la sección de complementos

3. Vuelva a leer la configuración de zshrc

fuente ~ / .zshrc

Complemento 2 - Agregue el complemento ZSH-AutoSuggestion

Este complemento sugiere automáticamente cualquiera de los comandos anteriores. Bastante útil! Para seleccionar la finalización, simplemente presione la tecla →.

  1. Instala el complemento
git clone https://github.com/zsh-users/zsh-autosuggestions $ ZSH_CUSTOM / plugins / zsh-autosuggestions
PD: ZSH_CUSTOM apunta a ~ / .oh-my-zsh / custom

2. Abra ~ / .zshrc y agregue zsh-autosuggestions

Paso 7: utilice el soporte de ligadura

Hay varias fuentes que ayudan a que los operadores tengan menos de, doble igual, flecha derecha, no igual, y así se vean hermosos. Por ejemplo, cada vez que escribe: =>, se convierte en: →.

Para usar esto, necesitamos fuentes que admitan ligaduras. También debemos habilitarlo en ITerm2. FiraCode es una de esas fuentes. Siga los pasos para instalar y habilitar ligaduras.

  1. Descargue el repositorio de FiraCode y extraiga el archivo zip (o clónelo)
  2. Abra la carpeta dstr> ttf y haga doble clic en todos los archivos * .ttf y seleccione el botón "Instalar fuente" para instalar cada una de las variaciones de fuente.
  3. Navegue a ITerm2 | Preferencias Perfiles | Texto
  4. Seleccione Usar Ligaturescheckbox
  5. Haga clic en Cambiar fuente y seleccione Fuente Fira Code Regular

Resumen

Hemos cubierto mucho en este blog comenzando desde la instalación de ZSH más reciente a través de Homebrew, Oh My ZSH, Plugins, Temas, habilite "ligaduras" para la fuente FiraCode.

gracias!

Si esto fue útil, ¡haga clic en el botón de aplaudir down abajo varias veces para mostrar su apoyo! ⬇⬇⬇

Mis otras publicaciones

https://medium.com/@rajaraodv/latest

ECMAScript 2015+

  1. Consulte estos útiles consejos y trucos de ECMAScript 2015 (ES6)
  2. 5 partes "malas" de JavaScript que se arreglan en ES6
  3. ¿Es “Clase” en ES6 la nueva parte “mala”?

Mejoras terminales

  1. Cómo mejorar tu terminal: una guía paso a paso con fotos
  2. Jazz Up Your "ZSH" Terminal In Seven Steps - A Visual Guide

WWW

  1. Una historia fascinante y desordenada de la web y JavaScript

DOM virtual

  1. Funcionamiento interno del DOM virtual

Reaccionar el rendimiento

  1. Dos formas rápidas de reducir el tamaño de la aplicación React en producción
  2. Usando Preact en lugar de React

Programacion Funcional

  1. JavaScript se está completando - Explicado
  2. Programación funcional en JS: con ejemplos prácticos (Parte 1)
  3. Programación funcional en JS: con ejemplos prácticos (Parte 2)
  4. Por qué Redux necesita reductores para ser "funciones puras"

WebPack

  1. Webpack - Las partes confusas
  2. Reemplazo de paquete web y módulo caliente [HMR] (bajo el capó)
  3. HMR y React-Hot-Loader de Webpack: el manual que falta

Draft.js

  1. Por qué Draft.js y por qué deberías contribuir
  2. Cómo Draft.js representa datos de texto enriquecido

Reaccionar y Redux:

  1. Guía paso a paso para crear aplicaciones React Redux
  2. Una guía para crear una aplicación React Redux CRUD (aplicación de 3 páginas)
  3. Uso de Middlewares en las aplicaciones React Redux
  4. Agregar una validación de formulario robusta para reaccionar aplicaciones Redux
  5. Protección de las aplicaciones React Redux con tokens JWT
  6. Manejo de correos electrónicos transaccionales en React Redux Apps
  7. La aplicación Anatomy Of A React Redux
  8. Por qué Redux necesita reductores para ser "funciones puras"
  9. Dos formas rápidas de reducir el tamaño de la aplicación React en producción

Si esto fue útil, haga clic en el botón de aplaudir below a continuación varias veces para mostrar su apoyo. ⬇⬇⬇

Si tiene preguntas, no dude en preguntarme en Twitter: https://twitter.com/rajaraodv