Artigo original: How to Jazz Up Your Bash Terminal — A Step By Step Guide With Pictures

por rajaraodv

Nesta publicação, vou mostrar os passos para adicionar temas, Powerline, fontes e powerline-gitstatus para tornar seu terminal convencional do Bash útil e bonito, como na imagem inicial.

Se você estiver usando um Mac, precisará passar por muitos obstáculos para fazer isso funcionar, pois muitas das instruções são para o Linux ou estão desatualizadas. Então, eu pensei em escrever sobre isso - espero que ajude você.

Observações:

1. Siga os passos cuidadosamente, pois qualquer equivoco causará muita dor de cabeça.

2. Isso vale para o MacOS e para o Bash regular no Terminal.app. Não estou abrangendo o ZSH ou o Hyper neste artigo – pretendo escrever artigos diferentes para eles.

3. Minhas versões: Mac High Sierra; versão do git 2.14.3 (Apple Git-98); Python 2.7.10

Certo, quando você tem um Mac novo, por padrão, seu Terminal.app será parecido com algo como a imagem abaixo. Então, vamos em frente e adicionar temas, fontes e assim por diante.

1_A2RjRAGXHeUQtIIy5XIBwQ

Passo 1 — Adicionar um novo tema

O primeiro passo óbvio é aprimorar o tema. O Terminal não fornece todos os temas legais e sofisticados que você vê outros desenvolvedores usarem. Vamos baixar um tema e adicioná-lo ao Terminal.

Neste blog, vou adicionar o tema Solarized-Dark ao Terminal.

Observação: você pode baixar vários temas (.terminal files) deste repositório git. Basta abrir o arquivo  *.terminal  para instalá-lo, ou seja, clicar com o botão direito em *.terminal file > "Open with" > terminal.
  1. Vá para http://ethanschoonover.com/solarized (texto em inglês)
  2. Role o mouse até o tema (solarized.zip)
  3. Extraia o arquivo solarized.zip
  4. Abra a pasta  osx-terminal.app-colors-solarized . Esta pasta contém o tema para o terminal.
  5. Clique duas vezes no arquivo "Solarized Dark ansi.terminal"  — Este arquivo é o tema específico para Terminal.app. Observação: caso você receba um aviso de que o arquivo é de um desenvolvedor não identificado, clique com o botão direito do mouse no arquivo e selecione Open with > Terminal.
  6. Nesse momento, você já está com o tema instalado no terminal. Agora é necessário, apenas, torná-lo o tema padrão.
  7. Abra o Terminal > Preferences > Text, selecione o tema  "Solarized Dark …" e clique em "Default".
1_0hPqERUbwhdAXVQfdQih1A

De agora em diante, seu terminal se parecerá como o da imagem abaixo.

1_hvkwX_GZIXHQxuYY2987GQ

Passo 2 — Instalar o Powerline

Powerline é uma aplicação do Python e é um plug-in de linha de status para o vim que fornece linhas de status e prompts para vários outros aplicativos, incluindo zsh, bash, tmux, IPython, Awesome e Qtile.

Ele faz com que o prompt do terminal se pareça como abaixo.

1_7SLVI9-_IBwEcmZpGaDvmw

2.1 Instalar Python

Devido ao fato de o Powerline ser uma aplicação do Python, é necessário ter o Python instalado, bem como uma versão apropriada do Python.

  • O MacOS já vem com Python instalado. Assegure-se de que a versão do Python seja, pelo menos, a 2.7.x digitando python -V no terminal.
  • Caso não seja a versão 2.7, instale o Homebrew, que permite instalar vários softwares de CLI (interface de comandos de linha), executando:/usr/bin/ruby -e "$(curl -fsSL https://raw.githubusercontent.com/Homebrew/install/master/install)"
  • Execute brew install python para instalar a última versão do Python via Homebrew

2.2 Instalar o pip — Um gerenciador de pacotes para Python (similar ao npm)

Instale o pip executando o seguinte comando:

$ sudo easy_install pip

2.3 Instalar ferramentas de desenvolvedor para a CLI do XCode

As ferramentas de desenvolvedor para a CLI do XCode são usadas pelo Powerline e outras aplicações que que manipulam os principais recursos do OSX. Portanto, certifique-se de instalar as ferramentas da CLI do XCode executando o comando a seguir.

$ xcode-select —-install

Observação: o comando acima abre o instalador do Mac e instala as ferramentas do desenvolvedor para CLI da  XCode. Caso não funcione, tente: xcode-select -r para resetar.

2.4 Instalar o Powerline

Finalmente, instale o Powerline (versão estável) com o pip executando o seguinte comando:

$ pip install --user powerline-status

Caso você queira instalar a última branch desenvolvida, execute o seguinte:

$ pip install --user git+git://github.com/powerline/powerline  //dev

2.5 Adicionar o Powerline daemon ao bash

Agora, é preciso adicionar o Powerline daemon ao bash para que ele possa monitorar o prompt do Terminal e fazer alterações.

2.5.1 Copie o local de instalação do Powerline

Você pode encontrar o local da instalação do Powerline executando o seguinte comando: pip show powerline-status. Copie o valor do campo Location.

1_1Hi5bB475XFf-Iu43tAFvA

2.5.2 Adicionar o daemon no local adequado para o .bash_profile

  1. Certifique-se de que você tem o arquivo .bash_profile no seu diretório raiz. Caso ele não exista, prossiga criando o arquivo digitando o comando: cd ~ && touch ~/.bash_profile

2. Abra o .bash_profile  e adicione o seguinte comando:

export PATH=$PATH:$HOME/Library/Python/2.7/bin
powerline-daemon -q
POWERLINE_BASH_CONTINUATION=1
POWERLINE_BASH_SELECT=1
. /Users/rupa/Library/Python/2.7/lib/python/site-packages/powerline/bindings/bash/powerline.sh
1_QY-1dEQtAn6SUOpgOTQcsg
Alguns detalhes sobre bash_profile
Nota: o caminho /Users/rupa/Library/Python/2.7/lib/python/site-packages/ vem do passo anterior (2.5.1). Altere-o para se adequar ao caminho do seu computador.

2.5.3. Reinicie o Terminal

Feche completamente o terminal, se estiver aberto: (Terminal > Quit Terminal). Inicie o terminal novamente.

Você deve poder usar $ source ~/.bash_profile para atualizar as configurações. Porém, recebe algo estranho como "o powerline-config está sem um arquivo!" Normalmente, você recebe esse erro se não tiver $HOME/Library/Python/2.7/bin em seu PATH.

2.5.4 Seu novo terminal

Seu novo terminal, agora, deve se parecer com a figura abaixo. Deve estar usando o tema "Solarized Dark ansi"  e deve mostrar o Powerline no prompt de comando. Mas observe que também existe um caractere "?" ! Isso ocorre porque o Powerline usa vários ícones e fontes que não estão disponíveis por padrão. Então, precisamos instalar as fontes.

1_fVqgdIqo7AIw7EJdcHZZxw-1

Passo 3 — Instalar as fontes do Powerline

Para instalar as fontes do Powerline, acesse: https://github.com/powerline/fonts. Lá, você verá diversas pastas. Cada uma é uma fonte, também conhecidas como "Fontes corrigidas" ("Patched fonts").

São chamadas de “Fontes corrigidas” porque as pessoas usaram fontes regulares e adicionaram a elas, ou corrigiram nelas, ícones e fontes específicos do Powerline.
1_sYBQZYzxe37bkmtBUw_Oww

3.1 Baixar o repositório inteiro e descompactá-lo

  • Clique no botão "Clone or download" e baixe todo o repositório para experimentar várias fontes.
  • Descompacte o fonts-master.zip

3.2 Instalar algumas fontes

Vamos abrir a pasta de fontes Meslo dotted. Ficará como abaixo. Você verá diversos arquivos .ttf. Cada um deles é uma fonte, mas alguns são a versão em "negrito" da fonte, alguns são a versão "regular" e assim por diante.

Basta clicar duas vezes no arquivo .ttf e pressionar "Install font" para instalar a fonte em seu computador.

Para o nosso caso, vamos instalar "Meslo LG L DZ Regular for Powerline.ttf" e "Meslo LG L DZ Italic for Powerline.ttf". Isso adicionará uma versão regular e uma versão itálica da fonte Meslo.

1_zmoF1ksmDJfRH0lGK00GKg

3.3 Selecione a fonte no tema do Terminal

Você lembra que adicionamos o tema "Solarized Dark" no passo 1? Não havia nenhuma fonte ali e o MacOS tem uma fonte padrão. Tudo o que precisamos fazer é definir nossa fonte Meslo dotted para este tema e pronto!

  1. Abra Terminal > Preferences > Text
  2. Selecione o tema  Solarized Dark ansi
  3. Clique no botão "Font" - Isso abre a caixa de diálogo "Fonts"
  4. Na caixa de diálogo "Fonts", selecione "Meslo LG L DZ for Powerline" na Família e também selecione o tamanho da fonte 14 (para facilitar a leitura).
1_SbKUVJxHJ_PR8yh2cbSESw

3.4 Reiniciar o terminal

Feche completamente o terminal (Terminal > Quit Terminal) e reabra-o novamente.

1_5pfC372U2Uz9Q5SQJSqKzA

Passo 4 — Adicionando informações do Git ao prompt

Para exibir vários status do Git no prompt, precisamos instalar o  powerline-gitstatus, que é um complemento simples para o Powerline que adiciona várias cores e temas para exibir várias informações de status do git.

1_NKRx9-fVCZIiWKW_Tb0lhA
Trataremos dos arquivos nas pastas "color schemes" e "themes"

4.1 Instalar o powerline-gitstatus

pip install --user powerline-gitstatus
Observação: o comando "—user" é necessário para instalá-lo no perfil do usuário.

4.2 Adicionar esquema de cores powerline-gitstatus ao Powerline

4.2.1 Abra a pasta colorschemes/shell/default.json 

${powerline-install-directory}/powerline/config_files/colorschemes/shell/default.json

//For example:
/Users/rupa/Library/Python/2.7/lib/python/site-packages/powerline/config_files/colorschemes/shell/default.json

4.2.2 Adicione as cores abaixo:

Conforme é mencionado no arquivo readme do powerline-gitstatus. Apenas copie as cores dentro de "groups" e acrescente-as ao default.json, conforme mostrado abaixo.

1_shKgrO87LFrjoGMb2uOEVg
Texto em inglês: "Adicione as cores do git de primeiro e de segundo plano do powerline-gitstatus na parte inferior da seção 'groups'."

Aqui estão meus esquemas de cores do default.json (que você pode copiar e colar):

{
	"name": "Default color scheme for shell prompts",
	"groups": {
		"hostname": {
			"fg": "brightyellow",
			"bg": "mediumorange",
			"attrs": []
		},
		"environment": {
			"fg": "white",
			"bg": "darkestgreen",
			"attrs": []
		},
		"mode": {
			"fg": "darkestgreen",
			"bg": "brightgreen",
			"attrs": ["bold"]
		},
		"attached_clients": {
			"fg": "white",
			"bg": "darkestgreen",
			"attrs": []
		},

		"gitstatus": {
			"fg": "gray8",
			"bg": "gray2",
			"attrs": []
		},
		"gitstatus_branch": {
			"fg": "gray8",
			"bg": "gray2",
			"attrs": []
		},
		"gitstatus_branch_clean": {
			"fg": "green",
			"bg": "gray2",
			"attrs": []
		},
		"gitstatus_branch_dirty": {
			"fg": "gray8",
			"bg": "gray2",
			"attrs": []
		},
		"gitstatus_branch_detached": {
			"fg": "mediumpurple",
			"bg": "gray2",
			"attrs": []
		},
		"gitstatus_tag": {
			"fg": "darkcyan",
			"bg": "gray2",
			"attrs": []
		},
		"gitstatus_behind": {
			"fg": "gray10",
			"bg": "gray2",
			"attrs": []
		},
		"gitstatus_ahead": {
			"fg": "gray10",
			"bg": "gray2",
			"attrs": []
		},
		"gitstatus_staged": {
			"fg": "green",
			"bg": "gray2",
			"attrs": []
		},
		"gitstatus_unmerged": {
			"fg": "brightred",
			"bg": "gray2",
			"attrs": []
		},
		"gitstatus_changed": {
			"fg": "mediumorange",
			"bg": "gray2",
			"attrs": []
		},
		"gitstatus_untracked": {
			"fg": "brightestorange",
			"bg": "gray2",
			"attrs": []
		},
		"gitstatus_stashed": {
			"fg": "darkblue",
			"bg": "gray2",
			"attrs": []
		},
		"gitstatus:divider": {
			"fg": "gray8",
			"bg": "gray2",
			"attrs": []
		}
	},
	"mode_translations": {
		"vicmd": {
			"groups": {
				"mode": {
					"fg": "darkestcyan",
					"bg": "white",
					"attrs": ["bold"]
				}
			}
		}
	}
}

4.3 Ativar o tema

4.3.1 Abra o arquivo do tema do default.json 

${powerline-install-directory}/powerline/config_files/themes/shell/default.json

//For example:
/Users/rupa/Library/Python/2.7/lib/python/site-packages/powerline/config_files/themes/shell/default.json

4.3.2 Adicione o seguinte ao default.json

{
    "function": "powerline_gitstatus.gitstatus",
    "priority": 40
}
1_QJIvX5hfNpUWZgoHTQ_nbQ
Texto em inglês: "Adicione o powerline_gitstatus como o último segmento do lado 'esquerdo'."

Abaixo está o tema default.json do meu Powerline (você pode copiar e colar isso):

Observação: eu removi tudo da seção "direita" e também removi o número da tarefa, ou "job number" ("jobnum"), para manter tudo limpo. Caso contrário, você veria um pequeno artefato na borda direita do prompt.
{
	"segments": {
		"left": [{
				"function": "powerline.segments.shell.mode"
			},
			{
				"function": "powerline.segments.common.net.hostname",
				"priority": 10
			},
			{
				"function": "powerline.segments.common.env.user",
				"priority": 30
			},
			{
				"function": "powerline.segments.shell.cwd",
				"priority": 10
			}, {
				"function": "powerline_gitstatus.gitstatus",
				"priority": 40
			}
		],
		"right": []
	}
}

4.4 Reiniciar o Daemon

Salve o arquivo e execute o seguinte comando no terminal: powerline-daemon —-replace.

Observação importante: toda vez que você fizer alterações na configuração do Powerline, além de reiniciar o Terminal, você também precisará reiniciar o daemon para ver as alterações refletidas executando: powerline-daemon —-replace.

4.5 Reiniciar o terminal

Feche o terminal (Terminal > Quit Terminal) e inicie novamente.

Neste ponto, estamos com tudo pronto! Aí está! Se você abrir o Terminal e navegar para qualquer repositório git e colocar em funcionamento, ele deve se parecer com o seguinte:

1_QRJ9_60oCmcwRGfYqCbqSw-1

Aqui é como se parece com o tema Solarized-Light:

1_8yii2h-RBMX3j5dtMagr2Q

Aqui é como se parece com o tema Cobalt2:

1_hYHwy__bxYoA8cji8E3plQ

Obrigado!

Caso tenha dúvidas ou questões, pergunte-me no Twitter: https://twitter.com/rajaraodv

Outras publicações do autor:

(os links abaixo são para as publicações originais em inglês)

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

ECMAScript 2015+

  1. Check out these useful ECMAScript 2015 (ES6) tips and tricks
  2. 5 JavaScript “Bad” Parts That Are Fixed In ES6
  3. Is “Class” In ES6 The New “Bad” Part?

Melhorias para o terminal

  1. How to Jazz Up Your Terminal — A Step By Step Guide With Pictures
  2. Jazz Up Your “ZSH” Terminal In Seven Steps — A Visual Guide

WWW

  1. A Fascinating And Messy History Of The Web And JavaScript

Virtual DOM

  1. Inner Workings Of The Virtual DOM

Desempenho no React

  1. Two Quick Ways To Reduce React App’s Size In Production
  2. Using Preact Instead Of React

Programação funcional

  1. JavaScript Is Turing Complete — Explained
  2. Functional Programming In JS — With Practical Examples (Part 1)
  3. Functional Programming In JS — With Practical Examples (Part 2)
  4. Why Redux Need Reducers To Be “Pure Functions”

WebPack

  1. Webpack — The Confusing Parts
  2. Webpack & Hot Module Replacement [HMR] (under-the-hood)
  3. Webpack’s HMR And React-Hot-Loader — The Missing Manual

Draft.js

  1. Why Draft.js And Why You Should Contribute
  2. How Draft.js Represents Rich Text Data

React e Redux

  1. Step by Step Guide To Building React Redux Apps
  2. A Guide For Building A React Redux CRUD App (3-page app)
  3. Using Middlewares In React Redux Apps
  4. Adding A Robust Form Validation To React Redux Apps
  5. Securing React Redux Apps With JWT Tokens
  6. Handling Transactional Emails In React Redux Apps
  7. The Anatomy Of A React Redux App
  8. Why Redux Need Reducers To Be "Pure Functions"
  9. Two Quick Ways To Reduce React App’s Size In Production

Se essa publicação foi útil para você, compartilhe! Obrigado!