Como usar um terminal UNIX com MyZsh — SpaceShip — E Zplugin no Windows e VsCode.

5 min readJul 31, 2019

Sem dúvidas o maior aliado do desenvolvedor em seu trabalho é o terminal, por ele são instaladas as dependências, alguma configuração, etc. Além disso, sabemos que o sistema de terminal ( Mac e linux ) tem várias vantagens envolvidas para quem trabalha com desenvolvimento por ser um sistema Open Source, que prioriza as modificações do usuário, além disso é bem mais leve e performático.

Ambiente de desenvolvimento ( VsCode )

Antes de começarmos a configurar o ambiente Unix dentro do windows, é altamente recomendável seguir a configuração do ambiente de desenvolvimento da rocketseat, pois os temas serão baseados no mesmo.

link: https://blog.rocketseat.com.br/ambiente-desenvolvimento-javascript/

Iniciando

O único requisito necessário é que você tenha o windows 10 devidamente atualizado, pois é preciso para liberar as ferramentas necessárias.

Iniciando o Bash do Ubuntu no windows

Instale o bash do ubuntu seguindo esse tutorial da microsoft : https://docs.microsoft.com/pt-br/windows/wsl/install-win10
Após isso, é necessário , inicializar a nova instância do distribuição uma vez, antes que possa ser usada. Para isso basta seguir esse pequeno tutorial, https://docs.microsoft.com/pt-br/windows/wsl/initialize-distro
Feito isso a distro já está instalada, agora vem a parte bacana.

Configurando OhMyZsh

Vamos começar instalando todas as dependências necessárias antes de ir pra parte da configuração em si (Não colocarei muitas imagens pois tudo é bem intuitivo, é instalar e partir pra próxima):

. Instalar o Curl

sudo apt-get install curl

. Instalar o git

sudo apt-add-repository ppa:git-core/ppa
sudo apt-get update
sudo apt-get install git

. Instalar o zsh

sudo apt-get install zsh

. Após isso devemos instalar o ohMyZsh, para isso é só rodar no terminal :

sh -c "$(curl -fsSL https://raw.githubusercontent.com/robbyrussell/oh-my-zsh/master/tools/install.sh)"

feito isso, seu terminal deverá ir automaticamente para o zsh, caso não aconteça rode bash -c zsh

Se ainda houver algum erro, você vai precisar editar o arquivo de configuração do bash, você deverá inserir o código acima, na primeira linha do arquivo, para acessá-lo use nano ~/.bashrc.

Deste modo abrirá o arquivo na qual deverá ser instalado, se parecerá com isso:

basta adicionar na primeira linha, apertar ctrl+X para sair, ele perguntará se você deseja salvar, você apertará Y, e então enter.

. Instalar o powerline fonts

Sem o powerline fonts você encontrará vários erros nos ícones do tema do spaceship, por isso é necessário a instalação.

sudo apt-get install fonts-powerline

. Instalar o spaceship, que é o tema que vamos usar para alguns ícones dentro do terminal que ficará bastante bonito e ajudará bastante:

git clone https://github.com/denysdovhan/spaceship-prompt.git "$ZSH_CUSTOM/themes/spaceship-prompt"

Agora vamos criar um link simbólico para o arquivo do tema do Spaceship na pasta dos temas do Oh My Zsh:

ln -s "$ZSH_CUSTOM/themes/spaceship-prompt/spaceship.zsh-theme" "$ZSH_CUSTOM/themes/spaceship.zsh-theme"

Abra o arquivo de configuração do zsh, usando nano ~/.zshrc

Daí, vamos alterar o valor da variável ZSH_THEME ficando dessa forma : ZSH_THEME="spaceship"

Finalmente, reinicie o terminal, e vamos ter uma interface parecida com esta aqui, os ícones provavelmente estarão sem funcionar, mas vamos arrumar mais a frente:

no arquivo do ~/.zshrc adicione o seguinte conteúdo:

SPACESHIP_PROMPT_ORDER=(
  user          # Username section
  dir           # Current directory section
  host          # Hostname section
  git           # Git section (git_branch + git_status)
  hg            # Mercurial section (hg_branch  + hg_status)
  exec_time     # Execution time
  line_sep      # Line break
  vi_mode       # Vi-mode indicator
  jobs          # Background jobs indicator
  exit_code     # Exit code section
  char          # Prompt character
)
SPACESHIP_USER_SHOW=always
SPACESHIP_PROMPT_ADD_NEWLINE=false
SPACESHIP_CHAR_SYMBOL="->"
SPACESHIP_CHAR_SUFFIX=" "

Vamos agora configurar o terminal em si, consertando os erros dos ícones e demais:

Primeiramente clique com o botão direito do mouse na parte branca em superior no terminal do ubuntu :

em propriedades, altere a fonte para fira code ( Instalado posteriormente na configuração da rocketseat ) e/ou altere as cores do layout ( Caso prefiram ).

Calma, respira que a gente tá quase lá 😄.

Instalando plugins

Vamos instalar alguns plugins para o zsh que facilitam muito na hora de executar comandos comuns, realizar autocompletes, etc. Para isso instalaremos o zPlugin, que gerencia os plugins dentro do zsh. Para isso :

sh -c "$(curl -fsSL https://raw.githubusercontent.com/zdharma/zplugin/master/doc/install.sh)"

Após a instalação iremos abrir pela última vez o arquivo de configuração em nano ~/.zshrc

Adicione os seguintes comandos após a linha ### End of Zplugin's installer chunk:

zplugin light zdharma/fast-syntax-highlighting
zplugin light zsh-users/zsh-autosuggestions
zplugin light zsh-users/zsh-completions

Explicando o cada uma faz :

zdharma/fast-syntax-highlighting: Adiciona syntax highlighting na hora da escrita de comandos que facilita principalmente em reconhecer comandos que foram digitados de forma incorreta;
zsh-users/zsh-autosuggestions: Sugere comandos baseados no histórico de execução conforme você vai digitando;
zsh-users/zsh-completions: Adiciona milhares de completitions para ferramentas comuns como Yarn, Homebrew, NVM, Node, etc, para você precisar apenas apertar TAB para completar comandos;

Feito isso finalizamos a configuração do terminal, agora vamos vinculá-lo no VsCode.

* Instale o nodeJs e o npm novamente, se necessário , podem fazer isso pelo link : https://www.digitalocean.com/community/tutorials/como-instalar-o-node-js-no-ubuntu-16-04-pt

Vinculando ao VsCode

Vamos integrar agora o terminal ao vscode, para finalizarmos e você ter um desempenho bem mais acelerado ao programar:

Abra o vsCode aperte f1 e procure por settings:

ao abrir o arquivo de configuração Json, adicione a linha :

terminal.integrated.shell.windows”: “C:\\WINDOWS\\System32\\wsl.exe

Salve e novamente aperte f1, escreve select default shell e selecione Wsl Bash:

Pronto ! Feito isso finalmente você estará rodando o terminal do ubuntu dentro do teu sistema windows integrado ao vscode, aumentando muito a produtividade, diminuindo a verbosidade para uso do terminal, etc.