Movendo seu desenvolvimento JavaScript para Bash no Windows

Publicados: 2022-03-10
Resumo rápido ↬ Ama seu terminal Bash, mas também ama seu PC? Talvez você esteja de olho em alguns desses novos hardwares do Surface, mas não pode fazer a troca sem o seu terminal. Agora você pode ter Windows e Bash. Neste artigo, veremos detalhadamente como configurar uma caixa de desenvolvimento Windows/Linux para desenvolvimento JavaScript.

Eu sou uma daquelas pessoas que não podem viver sem seu terminal Bash. Esse único fato dificultou o trabalho de front-end no Windows. Eu trabalho na Microsoft e estou em um Mac. Foi só quando a nova linha de hardware Surface foi lançada há alguns anos que percebi: preciso ter um desses .

Então eu tenho um. Um Surface Book 2 executando o Windows 10 para ser exato. Estou elaborando este artigo sobre isso agora. E o meu doce, doce prompt Bash? Bem, eu trouxe comigo, é claro.

Neste artigo, examinarei detalhadamente como a nova tecnologia no Windows 10 permite que você execute um terminal Linux completo no Windows. Também mostrarei minha incrível configuração de terminal (que foi nomeada “melhor de todas” por “me”) e como você também pode configurar sua própria máquina de desenvolvimento Windows/Linux.

Se você deseja um pouco desse hardware Surface, mas não consegue viver sem um terminal Linux, veio ao lugar certo.

Observação : no momento da redação deste artigo, muitos dos itens deste artigo exigirão que você use ou alterne para compilações de "visualização" ou "insiders" de vários itens, incluindo Windows. A maioria dessas coisas estará na compilação principal do Windows em algum momento no futuro.

Mais depois do salto! Continue lendo abaixo ↓

Subsistema Windows para Linux (WSL)

O Windows Subsystem for Linux, ou “WSL” é o que permite que você execute o Linux no Windows. Mas o que exatamente é essa ciência louca?

O WSL, em sua encarnação atual, é uma camada de tradução que converte chamadas de sistema Linux em chamadas de sistema Windows. O Linux é executado em cima do WSL. Isso significa que, para obter o Linux no Windows, você precisa fazer três coisas:

  1. Ative o WSL,
  2. Instale o Linux,
  3. Sempre inclua três itens em uma lista.

Acontece que essa camada de tradução é um pouco lenta - como eu tentando lembrar se preciso de splice ou slice . Isso é especialmente verdadeiro quando o WSL está lendo e gravando no sistema de arquivos. Isso é um grande problema para os desenvolvedores da Web, já que qualquer instalação adequada npm install copiará milhares de arquivos para sua máquina. Quer dizer, eu não sei quanto a você, mas eu não vou tocar com a esquerda minhas próprias cordas.

A versão 2 da WSL é uma história diferente. É consideravelmente mais rápido do que a versão atual porque aproveita um núcleo de virtualização no Windows em vez de usar a camada de tradução. Quando digo que é “consideravelmente mais rápido”, quero dizer muito, muito mais rápido. Tão rápido quanto eu Pesquisando no Google “splice vs slice”.

Por esse motivo, vou mostrar como instalar o WSL 2. No momento em que escrevo, isso exigirá que você esteja na versão “Insider” do Windows.

Primeiras coisas primeiro: siga este pequeno guia para habilitar o WSL no Windows 10 e verifique o número da sua versão do Windows.

Depois de instalá-lo, pressione a tecla Windows e digite “windows insider”. Em seguida, escolha “Configurações do programa Windows Insider”.

Opção de menu de configurações do programa Windows Insider
(Visualização grande)

Você terá algumas opções diferentes sobre em qual “anel” você quer estar. Muitas pessoas que conheço estão no ringue rápido. Eu sou um cara cauteloso, no entanto. Quando eu era criança, eu descia o escorregador do parquinho de barriga para baixo segurando nas laterais. É por isso que fico no anel lento. Estou nisso há vários meses e acho que não é mais perturbador ou instável do que o Windows comum.

É uma boa opção se você quer o WSL 2, mas não quer morrer no escorregador.

Tela de configurações do Windows Insider mostrando o anel “Lento”
(Visualização grande)

Nota : Depois de publicar este artigo, aprendi que o WSL 2 não está de fato no anel lento. Você precisará estar no anel rápido para obtê-lo. Eu devo ter estado no ringue rápido em algum momento no processo de escrever este artigo. Tão rápido anel é. Boa sorte no slide!

Em seguida, você precisa habilitar o recurso “Virtual Machine Platform” no Windows, que é exigido pelo WSL versão 2. Para chegar a esta tela, pressione a tecla Windows e digite “windows features”. Em seguida, selecione “Ativar ou desativar recursos do Windows”. Selecione “Plataforma de Máquina Virtual”. A opção “Windows Subsystem for Linux” já deve estar habilitada.

A tela “Recursos do Windows” com “Plataforma de máquina virtual” e “Subsistema do Windows para Linux” destacados
(Visualização grande)

Agora que o WSL está ativado, você pode instalar o Linux. Você faz isso, ironicamente, diretamente da Windows Store. Somente em 2019 eu sugiro que você “instale o Linux da loja do Windows”.

Existem várias distribuições diferentes para escolher, mas o Ubuntu será o mais suportado em todas as ferramentas que configuraremos mais tarde - incluindo o VS Code. Todas as instruções que vêm daqui em diante assumem uma instalação do Ubuntu. Se você instalar uma distribuição diferente, todas as apostas serão canceladas.

Procure por “Ubuntu” na Windows Store. Haverá três para escolher: Ubuntu, Ubuntu 18.04 e Ubuntu 16.04. O Ubuntu realmente gosta desse número de versão menor 04, não é?

O item “Ubuntu” na Windows Store
(Visualização grande)

A distribuição “Ubuntu” (a primeira nesta captura de tela) é a “meta versão”, ou melhor, um espaço reservado que apenas aponta para a versão mais recente. A partir de agora, isso é 18.04.

Eu fui com a versão meta porque mais tarde vou mostrar como navegar no sistema de arquivos Linux com o Windows Explorer e é meio confuso ter “Ubuntu 18.04” como um nome de unidade versus apenas “Ubuntu”.

Esta instalação é bastante rápida, dependendo da sua conexão com a Internet. São apenas cerca de 215 megabytes, mas estou em uma conexão gigabit por aqui e como você sabe se alguém está em uma conexão gigabit? Não se preocupe, eles vão te dizer.

Uma vez instalado, agora você terá um aplicativo “Ubuntu” em seu menu iniciar.

Ubuntu instalado e aparecendo no menu Iniciar do Windows
(Visualização grande)

Se você clicar nele, você obterá um terminal Bash!

O terminal Ubuntu rodando no Windows
(Visualização grande)

Reserve um momento para aproveitar o milagre da tecnologia.

Por padrão, você estará executando na versão 1 do WSL. Para atualizar para a versão 2, você precisará abrir um terminal do PowerShell e executar um comando.

Pressione a tecla “Windows” e digite “Powershell”.

O item “Powershell” no menu Iniciar
(Visualização grande)

No terminal do PowerShell, você pode ver qual versão do WSL você possui executando wsl --list --verbose .

Fazendo uma lista detalhada de todas as instâncias WSL em execução no Powershell
(Visualização grande)

Se você estiver mostrando a versão 1, precisará executar o comando --set-version e especificar o nome da instância (Ubuntu) e a versão desejada (2).

 wsl --set-version Ubuntu 2 
Configurando a versão do WSL para a versão 2 com Powershell
(Visualização grande)

Isso vai demorar um pouco, dependendo da quantidade de carne que sua máquina tem. O meu levou “alguns minutos” mais ou menos. Quando estiver pronto, você estará na versão mais recente e melhor da WSL.

O Is Your Brain On Linux… No Windows.

Linux não é Windows. O WSL não é um prompt bash em cima de um sistema operacional Windows. É um sistema operacional completo com sua própria estrutura de pastas e aplicativos instalados. Se você instalar o Node com o instalador do Windows, digitar node no Linux falhará porque o Node não está instalado no Linux. Está instalado no Windows.

A verdadeira magia do WSL, no entanto, está na maneira como ele conecta perfeitamente o Windows e o Linux para que eles apareçam como um sistema de arquivos em sua máquina.

Navegação de arquivos e pastas

Por padrão, o terminal do Ubuntu coloca você no diretório inicial do Linux (ou /home/your-user-name ). Você pode passar para o lado do Windows indo para /mnt/c .

O terminal Ubuntu com o conteúdo da unidade C listado
(Visualização grande)

Observe que algumas permissões são negadas aqui. Eu teria que clicar com o botão direito do mouse no ícone do Ubuntu e clicar em “Executar como administrador” para obter acesso a esses arquivos. É assim que o Windows faz permissões elevadas. Não há sudo no Windows.

Iniciando aplicativos

Você pode iniciar qualquer aplicativo do Windows a partir do terminal Ubuntu. Por exemplo, posso abrir o Windows Explorer a partir do terminal Unbuntu.

O Windows Explorer e o terminal Ubuntu
(Visualização grande)

Isso também funciona ao contrário. Você pode executar qualquer aplicativo instalado no lado do Linux. Aqui estou executando o “fortune” instalado no Linux a partir da linha de comando do Windows. (Porque não é uma instalação adequada do Linux sem fortunas aleatórias e sem sentido.)

A linha de comando do Windows executando o programa “fortune” do Linux
(Visualização grande)

Dois sistemas operacionais diferentes. Dois sistemas de arquivos diferentes. Dois conjuntos diferentes de aplicativos instalados. Veja como isso pode ficar confuso?

Para manter tudo em ordem, recomendo que você mantenha todos os seus arquivos e ferramentas de desenvolvimento JavaScript instalados no lado do Linux. Dito isso, a capacidade de alternar entre Windows e Linux e acessar arquivos de ambos os sistemas é a mágica central da WSL. Não se esqueça disso, porque é o que torna toda essa configuração melhor do que apenas uma caixa Linux padrão.

Configurando seu ambiente de desenvolvimento

Daqui em diante, darei a você uma lista de itens opinativos para o que acho que faz uma configuração matadora do Linux no Windows. Apenas lembre-se: minhas opiniões são apenas isso. Opiniões . Acontece que, assim como todas as minhas opiniões, elas estão 100% corretas.

Obtendo um terminal melhor

Sim, você tem um terminal quando instalou o Ubuntu. Na verdade, é o console do Windows conectado à sua distribuição Linux. Não é um console ruim. Você pode redimensioná-lo, ativar copiar/colar (nas configurações). Mas você não pode fazer coisas como guias ou abrir novas janelas. Assim como muitas pessoas usam programas de terminal de substituição no Mac (eu uso o Hyper), existem outras opções para o Windows também. A lista Awesome WSL no Github contém uma lista bastante exaustiva.

Esses são todos bons emuladores, mas há uma nova opção criada por pessoas que conhecem muito bem o Windows.

A Microsoft está trabalhando em um novo aplicativo chamado “Windows Terminal”.

O item Windows Terminal na Windows Store
(Visualização grande)

O Windows Terminal pode ser instalado na Windows Store e está atualmente no modo de visualização. Eu tenho usado por um bom tempo agora, e tem recursos suficientes e é estável o suficiente para eu dar-lhe um endosso total.

O novo Windows Terminal apresenta uma interface de guia completa, copiar/colar, vários perfis, fundos transparentes, imagens de fundo — até mesmo imagens de fundo transparentes. É um dia de campo se você gosta de personalizar seu terminal, e eu vim para ganhar essa corrida de saco.

Aqui está o meu terminal atual. Vamos dar uma olhada em alguns dos ajustes importantes aqui.

Terminal atual do autor: fundo azul escuro com um planeta de desenho animado no canto inferior direito. Texto verde e branco.
(Visualização grande)

O terminal do Windows é bastante personalizável. Clicar na seta “ ” no canto superior esquerdo (ao lado do sinal “ + ”) dá acesso a “Configurações”. Isso abrirá um arquivo JSON.

Vincular Copiar/Colar

Na parte superior do arquivo estão todas as combinações de teclas. A primeira coisa que fiz foi mapear “copiar” para Ctrl + C e colar para Ctrl + V . De que outra forma vou copiar e colar comandos do Stack Overflow que não entendo?

 { "command": "copy", "keys": ["ctrl+c"] }, { "command": "paste", "keys": ["ctrl+v"] },

O problema é que Ctrl + C já está mapeado para SIGINT, ou o comando Interrupt/kill no Linux. Existem muitos terminais para Windows que lidam com isso mapeando Copiar/Colar para Ctrl + Shift + C e Ctrl + Shift + V , respectivamente. O problema é que copiar/colar é Ctrl + C / Ctrl + V em todos os outros locais do Windows. Eu apenas continuei pressionando Ctrl + C no terminal repetidamente tentando copiar as coisas. Eu não poderia deixar de fazê-lo.

O terminal do Windows lida com isso de maneira diferente. Se você tiver o texto destacado e pressionar Ctrl + C , ele copiará o texto. Se houver um processo em execução, ele ainda envia o comando SIGINT para baixo e o interrompe. Isso significa que você pode mapear com segurança Ctrl + C / Ctrl + V para Copiar/Colar no Terminal do Windows e não interferirá na sua capacidade de interromper processos.

Quem pensou que Copiar/Colar poderia causar tanta dor de cabeça?

Alterar o perfil padrão

O perfil padrão é o que aparece quando uma nova guia é aberta. Por padrão, isso é Powershell. Você vai querer rolar para baixo e encontrar o perfil do Linux. Este é o que abre wsl.exe -d Ubuntu . Copie seu GUID e cole-o na configuração defaultProfile .

Movi essas duas configurações para que fiquem próximas uma da outra para facilitar a visualização:

O perfil padrão do Terminal destacado no arquivo settings.json
(Visualização grande)

Definir o plano de fundo

Eu gosto que meu plano de fundo seja uma cor sólida escura com um logotipo plano no canto direito. Faço isso porque quero que o logotipo seja brilhante e visível, mas não no caminho do texto. Este eu mesmo fiz, mas há uma grande coleção de imagens planas para escolher no Simple Desktops.

O plano de fundo é definido com a propriedade backgroundImage :

 "backgroundImage": "c:/Users/YourUserName/Pictures/earth.png" 
Uma imagem quadrada azul com um planeta de desenho animado no canto inferior direito
(Visualização grande)

Você também notará uma configuração chamada “acrílico”. É isso que permite ajustar a opacidade do plano de fundo. Se você tiver uma cor de fundo sólida, isso é bastante simples.

 "background": "#336699", "useAcrylic": true, "acrylicOpacity": 0.5 
O terminal com o fundo levemente transparente
(Visualização grande)

Você também pode fazer isso com uma imagem de plano de fundo, combinando a configuração arcylicOpacity com a backgroundImageOpacity :

 "backgroundImage": "c:/Users/username/Pictures/earth-and-stars.png", "useAcrylic": true, "acrylicOpacity": 0.5 
O terminal com uma imagem transparente e um fundo transparente
(Visualização grande)

Para o meu tema, a transparência faz tudo parecer mudo, então mantenho o useAcrylic definido como false .

Alterar a fonte

A equipe que está construindo o Windows Terminal também está trabalhando em uma nova fonte chamada “Cascadia Code”. Não está disponível no momento da redação deste artigo, então você obtém a fonte padrão do Windows.

A fonte padrão no Windows Terminal é “Consolas”. Essa é a mesma fonte que a linha de comando do Windows usa. Se você quer aquela verdadeira sensação do Ubuntu, Chris Hoffman aponta como você pode instalar a fonte oficial do Ubuntu Mono.

Aqui está um antes e depois para que você possa ver a diferença:

 "fontFace": "Ubuntu Mono" 
Uma comparação lado a lado das fontes Consolas e Unbuntu Mono no terminal
(Visualização grande)

Eles se parecem bastante; a principal diferença está no espaçamento do Ubuntu Mono, o que torna o terminal um pouco mais apertado e limpo.

Esquema de cores

Os esquemas de cores estão todos localizados na parte inferior do arquivo de configurações. Copiei o esquema de cores “Campbell” como linha de base. Eu tento combinar cores com seus nomes, mas também não tenho medo de ser desonesto. Vou mapear “#ffffff” para “azul” – nem me importo.

As configurações do esquema de cores do arquivo settings.json
(Visualização grande)

Se você gosta deste esquema em particular que eu chamei de “Terra”, eu reuni esta essência para que você não precise copiar manualmente toda essa bagunça de uma captura de tela.

Nota : As visualizações de cores vêm em virtude da extensão “Color Highlight” para VS Code.

Alterar o diretório inicial padrão

Por padrão, o perfil WSL coloca você em seu diretório inicial no lado do Windows. Com base na configuração que estou recomendando neste artigo, seria preferível cair na pasta home do Linux. Para fazer isso, altere a configuração startingDirectory no seu perfil “Ubuntu”:

 "startingDirectory": "\\\\wsl$\\Ubuntu\\home\\burkeholland"

Observe o caminho lá. Você pode usar esse caminho (menos as barras de escape extras) para acessar o WSL a partir da linha de comando do Windows.

Um comando “dir” executado no diretório inicial do Linux a partir da linha de comando do Windows
(Visualização grande)

Instalar Zsh/Oh-My-Zsh

Se você nunca usou Zsh e Oh-My-Zsh antes, você terá um verdadeiro deleite. Zsh (ou “Z Shell”) é um shell substituto para Linux. Ele expande os recursos básicos do Bash, incluindo troca de diretório implícita (sem necessidade de digitar cd ), suporte a temas melhores, prompts melhores e muito mais.

Para instalar o Zsh, pegue-o com o gerenciador de pacotes apt, que vem de fábrica com a instalação do Linux:

 sudo apt install zsh

Instale o oh-my-zsh usando curl. Oh-my-zsh é um conjunto de configurações para zsh que melhoram ainda mais a experiência do shell com plugins, temas e uma infinidade de atalhos de teclado.

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

Em seguida, ele perguntará se você deseja alterar seu shell padrão para Zsh. Você faz, então responda afirmativamente e agora você está funcionando com Zsh e Oh-My-Zsh.

O terminal perguntando se você gostaria de alterar o shell padrão
(Visualização grande)

Você notará que o prompt está muito mais limpo agora. Você pode alterar a aparência desse prompt alterando o tema no arquivo ~/.zshrc .

Abra-o com nano , que é como o VIM, mas você pode editar as coisas e sair quando precisar.

 nano ~/.zshrc

Altere a linha que define o tema. Há um URL acima dele com uma lista inteira de temas. Acho o da “nuvem” legal. E fofo.

O tema “nuvem” sendo definido no arquivo zshrc
(Visualização grande)

Para obter as alterações no .zshrc , você precisará obtê-lo:

 source ~/.zshrc 
O prompt do tema “nuvem”
(Visualização grande)

Nota : Se você escolher um tema como “agnoster” que requer glifos, você precisará de uma versão powerline do Ubuntu Mono que tenha… glifos. Caso contrário, seu terminal ficará cheio de caracteres estranhos, como você amassou seu rosto no teclado. O Nerd Fonts oferece um que parece funcionar muito bem.

Agora você pode fazer coisas como alterar diretórios apenas digitando o nome do diretório. Nenhum cd necessário. Quer voltar a um diretório? Basta fazer um .. Você nem precisa digitar o nome do diretório inteiro, apenas digite as primeiras letras e pressione tab. O Zsh fornecerá uma lista de todos os arquivos/diretórios que correspondem à sua pesquisa e você poderá navegar por eles.

O terminal com um dos muitos caminhos destacados
(Visualização grande)

Nó de instalação

Como desenvolvedor web, você provavelmente vai querer instalar o Node. Suponho que você não precise instalar o Node para fazer desenvolvimento web, mas com certeza parece em 2019!

Seu primeiro instinto pode ser instalar o node com apt , o que você pode fazer, mas você se arrependeria por dois motivos:

  1. A versão do Node no apt está terrivelmente desatualizada;
  2. Você deve instalar o Node com um gerenciador de versões para não ter problemas de permissões.

A melhor maneira de resolver esses dois problemas é instalar o nvm (Node Version Manager). Como você instalou o zsh , basta adicionar o plug-in nvm em seu arquivo zshrc e o zsh cuida do resto.

Primeiro, instale o plugin clonando no zsh-nvm . (Não se preocupe, o Git vem como padrão na instalação do Ubuntu.)

 git clone https://github.com/lukechilds/zsh-nvm ~/.oh-my-zsh/custom/plugins/zsh-nvm

Em seguida, adicione-o como um plug-in no arquivo ~/.zshrc .

 `nano ~/.zshrc` plugins (zsh-nvm git) 
O arquivo zshrc com o zsh-vnm-plugin adicionado
(Visualização grande)

Lembre-se de fornecer o arquivo zshrc novamente com source ~/.zshrc e você verá o nvm sendo instalado.

O terminal mostrando o progresso da instalação do nvm
(Visualização grande)

Agora você pode instalar o nó com nvm. Facilita a instalação de várias versões lado a lado do nó e alterna entre elas sem esforço. Além disso, não há erros de permissão quando você faz instalações globais do npm!

 nvm install --lts

Eu recomendo isso sobre a instalação padrão do nvm porque o plug-in oferece a capacidade de atualizar facilmente o nvm. Isso é meio chato com a instalação “curl” padrão. É um comando com o plugin.

 nvm upgrade

Utilizar sugestões automáticas

Um dos meus plugins favoritos para o zsh é o zsh-autosuggestions. Ele se lembra das coisas que você digitou no terminal antes e as reconhece quando você começa a digitá-las novamente, além de “sugerir automaticamente” a linha que você pode precisar. Este plugin veio a calhar mais vezes do que consigo me lembrar - especificamente quando se trata de longos comandos CLI que usei no passado, mas nunca me lembro.

Clone o repositório na pasta de extensões zsh:

 git clone https://github.com/zsh-users/zsh-autosuggestions ~/.oh-my-zsh/custom/plugins/zsh-autosuggestions

Em seguida, adicione-o aos seus plugins zsh e obtenha o arquivo zshrc:

 nano ~/.zshrc # In the .zshrc file plugins(zsh-nvm zsh-autosuggestions git) source ~/.zshrc

O plugin lê seu histórico zsh, então comece a digitar algum comando que você digitou antes e observe a mágica. Tente digitar a primeira parte do comando clone longo acima.

O terminal mostrando zsh autosuggestions auto completando um comando git clone
(Visualização grande)

Se você pressionar , ele completará automaticamente o comando. Se você continuar pressionando , ele percorrerá qualquer um dos comandos em seu histórico que possam ser correspondentes.

Atalhos de teclado importantes

Existem alguns atalhos de terminal que eu uso o tempo todo. Eu encontro isso com todas as minhas ferramentas – incluindo o VS Code. Tentar aprender todos os atalhos é uma perda de tempo porque você não os usará o suficiente para se lembrar deles.

Aqui estão alguns que eu uso regularmente:

Atalho do Terminal O que isso faz?
Ctrl + L Isso limpa o terminal e o coloca de volta ao topo. É o equivalente a digitar “clear”.
Ctrl + U Isso limpa apenas a linha atual.
Ctrl + A Envia o cursor para o início da linha de comando.
Ctrl + E Mover para o final da linha.
Ctrl + K Exclua todos os caracteres após o cursor.

É isso! Todo o resto eu provavelmente aprendi e depois esqueci porque nunca tem utilidade.

Configurando o Git(Hub/Lab/Whatevs)

O Git vem no Ubuntu, portanto, não há necessidade de instalação. Você pode seguir as instruções no host de controle de origem de sua escolha para que suas chaves ssh sejam criadas e funcionem.

Observe que nas instruções do Github, ele diz para você usar o utilitário “copy” para copiar sua chave ssh. O Ubuntu tem o comando “xcopy”, mas não vai funcionar aqui porque não há interoperabilidade entre o Linux e o Windows em termos de área de transferência.

Em vez disso, você pode simplesmente usar o executável da área de transferência do Windows e chamá-lo diretamente do terminal. Você precisa obter o texto primeiro com cat e, em seguida, canalizá-lo para a área de transferência do Windows.

 cat ~/.ssh/id_rsa.pub | clip.exe

Os documentos do Github dizem para você ter certeza de que o ssh-agent está em execução. Não é. Você verá isso ao tentar adicionar sua chave ao agente:

O terminal mostrando que o agente ssh não está em execução
(Visualização grande)

Você pode iniciar o agente, mas na próxima vez que reiniciar o Windows ou o WSL for interrompido, você terá que iniciá-lo novamente. Isso ocorre porque não há sistema de inicialização no WSL. Não há systemd ou outro processo que inicie todos os seus serviços quando o WSL for iniciado. A WSL ainda está em pré-visualização e a equipe está trabalhando em uma solução para isso.

Enquanto isso, acredite ou não, há um plugin zsh para isso também. Ele se chama ssh-agent e vem instalado com oh-my-zsh, então tudo que você precisa fazer é referenciá-lo no arquivo .zshrc .

 zsh-nvm zsh-autosuggestions ssh-agent git

Isso iniciará o ssh-agent automaticamente se ele não estiver sendo executado na primeira vez que você iniciar o WSL. A desvantagem é que ele pedirá sua senha toda vez que o WSL for iniciado de novo. Isso significa essencialmente sempre que você reiniciar seu computador.

O terminal solicitando a senha para a chave rsa
(Visualização grande)

Código VS e o WSL

O WSL não possui GUI, portanto, você não pode instalar uma ferramenta visual como o VS Code. Isso precisa ser instalado no lado do Windows. Isso apresenta um problema porque você tem um programa em execução no lado do Windows acessando arquivos no lado do Linux, e isso pode resultar em várias peculiaridades e problemas de “permissão negada”. Como regra geral, a Microsoft recomenda que você não altere arquivos no lado WSL com programas do Windows.

Para resolver isso, existe uma extensão para o VS Code chamada “Remote WSL”. Esta extensão é feita pela Microsoft, e permite desenvolver dentro do WSL, mas de dentro do VS Code.

Depois que a extensão estiver instalada, você pode anexar o VS Code diretamente ao lado do Ubuntu abrindo a Paleta de Comandos ( Ctrl + Shift + P ) e selecione “Remote-WSL: New Window”.

VS Code com o comando “Remote WSL: New Window” destacado na paleta de comandos
(Visualização grande)

Isso abre uma nova instância do VS Code que permite que você trabalhe como se estivesse totalmente no lado do Linux. Fazer “Arquivo/Abrir” navega no sistema de arquivos do Ubuntu em vez do Windows.

A visualização “Abrir arquivo” do VS Code
(Visualização grande)

O terminal integrado no VS Code abre sua configuração zsh lindamente personalizada. Tudo “simplesmente funciona” como deveria quando você tem a extensão Remote WSL instalada.

Se você abrir o código do seu terminal com code . , o VS Code detectará automaticamente que foi aberto a partir do WSL e anexará automaticamente a extensão do WSL remoto.

Extensões de código VS com WSL remoto

A extensão Remote WSL para VS Code funciona configurando um pequeno servidor no lado do Linux e, em seguida, conectando-se a ele do VS Code no lado do Windows. Sendo esse o caso, as extensões que você instalou no VS Code não aparecerão automaticamente quando você abrir um projeto do WSL.

Por exemplo, eu tenho um projeto Vue aberto no VS Code. Mesmo que eu tenha todas as extensões Vue corretas instaladas para realce de sintaxe, formatação e afins, o VS Code age como se nunca tivesse visto um arquivo .vue antes.

Um arquivo .vue aberto no VS Code sem realce de sintaxe
(Visualização grande)

Todas as extensões que você instalou podem ser habilitadas no WSL. Basta encontrar a extensão que você deseja no WSL e clicar no botão “Instalar no WSL”.

A página de destino da extensão Vetur VS Code no VS Code
(Visualização grande)

Todas as extensões instaladas no WSL serão exibidas em sua própria seção na visualização Extensions Explorer. Se você tiver muitas extensões, pode ser um pouco irritante instalar cada uma individualmente. Se você deseja apenas instalar todas as extensões que possui no WSL, clique no pequeno ícone de download na nuvem na parte superior da seção 'Local - Instalado'.

A visualização Extensions no VS Code com o ícone instalar todas as extensões no WSL realçado
(Visualização grande)

Como configurar seus diretórios de desenvolvimento

Este já é um artigo opinativo, então aqui está um que você não perguntou sobre como eu acho que você deve estruturar seus projetos em seu sistema de arquivos.

Eu mantenho todos os meus projetos no lado do Linux. Eu não coloco meus projetos em “Meus Documentos” e então tento trabalhar com eles a partir da WSL. Meu cérebro não aguenta isso.

Eu crio uma pasta chamada /dev que coloco na raiz da minha pasta /home no Linux. Dentro dessa pasta, crio outra com o mesmo nome do meu repositório do Github: /burkeholland . Essa pasta é onde todos os meus projetos vão - mesmo aqueles que não são enviados para o Github.

Se eu clonar um repositório de uma conta Github diferente (por exemplo, “microsoft”), criarei uma nova pasta em “dev” chamada /microsoft . Eu então clonei o repositório em uma pasta dentro dele.

Basicamente, estou imitando a mesma estrutura do controle de origem na minha máquina local. Acho muito mais fácil raciocinar sobre onde estão os projetos e a quais repositórios eles estão vinculados apenas em virtude de sua localização. É simples, mas é altamente eficaz para me ajudar a manter tudo organizado. E preciso de toda a ajuda possível.

Os autores opinaram sobre a estrutura de pastas listada no terminal
(Visualização grande)

Navegando pelos arquivos do Windows Explorer

Há momentos em que você precisa acessar um arquivo no Linux do lado do Windows. A coisa bonita sobre a WSL é que você ainda pode fazer isso.

Uma maneira é acessar o WSL como uma unidade mapeada. Acesse-o com um \\wsl$ diretamente da barra do explorer:

 \\wsl$ 
O Windows Explorer a instalação do Ubuntu como um diretório montado
(Visualização grande)

Você pode fazer isso por vários motivos diferentes. Por exemplo, hoje eu precisava de uma extensão do Chrome que não está na loja da web. Então eu clonei o repositório no WSL, naveguei até ele como uma “Extensão Descompactada” e carreguei-o no Edge.

Uma coisa que faço com certa frequência no Linux é abrir o diretório que contém um arquivo diretamente do terminal. Você também pode fazer isso no WSL, chamando diretamente explorer.exe . Por exemplo, este comando abre o diretório atual no Windows Explorer.

 $ explorer.exe . 
Um GIF demonstrando a abertura do Windows Explorer no diretório atual do terminal

Este comando é um pouco complicado embora. No Linux, é apenas open . . Podemos fazer a mesma mágica criando um alias no ~/.zshrc .

 alias open="explorer.exe"

Janela de encaixe

Quando eu disse que todas as ferramentas deveriam estar no lado do Linux, eu quis dizer isso. Isso inclui o Docker.

É aqui que a borracha realmente começa a encontrar a estrada. O que precisamos aqui é o Docker, rodando dentro do Linux rodando dentro do Windows. É um pouco como uma boneca russa quando você escreve em uma postagem no blog. Na realidade, é bastante simples.

Você precisará da versão correta do Docker para Windows. No momento da redação deste artigo, esse é o WSL 2 Tech Preview.

Ao executar o instalador, ele perguntará se você deseja usar contêineres do Windows em vez de contêineres do Linux. Você definitivamente faz. Caso contrário, você não terá a opção de executar o Docker no WSL.

A tela de instalação do Docker com a opção "Usar contêineres do Windows" selecionada
(Visualização grande)

Agora você pode habilitar o Docker no WSL clicando no item na bandeja do sistema e selecionando “WSL 2 Tech Preview”:

A opção de visualização de tecnologia WSL2 no menu de contexto do Docker Daemon
(Visualização grande)

Depois de iniciar o serviço, você pode usar o Docker dentro do WSL exatamente como espera. A execução do Docker no WSL fornece um grande aumento de desempenho, bem como um aumento no tempo de inicialização a frio em contêineres.

Também posso recomendar que você instale a extensão Docker para VS Code? Ele coloca uma interface visual na configuração do Docker e geralmente facilita o trabalho com o Docker porque você não precisa se lembrar de todos esses sinalizadores e opções de linha de comando.

Obtenha mais Bash no Windows

Neste ponto, você deve ter uma ideia sobre como colocar o Bash no Windows e como ele funciona quando você o instala. Você pode personalizar seu terminal infinitamente e há todos os tipos de programas rad que você pode adicionar para fazer coisas como definir automaticamente variáveis ​​PATH, criar aliases, obter uma vaca ASCII em seu terminal e muito mais.

A execução do Bash no Windows abriu um universo totalmente novo para mim. Sou capaz de combinar o Windows, que amo pelo lado da produtividade, e o Linux, do qual dependo como desenvolvedor. O melhor de tudo é que agora posso criar aplicativos para ambas as plataformas com uma máquina.

Leitura adicional

Você pode ler mais sobre o Bash no Windows aqui:

  • “Guia de instalação do Windows Subsystem para Linux para Windows 10,” Microsoft Docs
  • “Como instalar e usar o Bash Shell no Windows 10”, Chris Hoffman, How-To Geek
  • “Compartilhando SSH com WSL”, Drew Wilson
  • “Ficando louco com o subsistema Window para Linux”, Brian Ketelsen
  • “Tudo o que você pode fazer com o novo Bash Shell do Windows 10”, Chris Hoffman, How-To Geek

Agradecimentos especiais a Brian Ketelsen, Matt Hernandez, Rich Turner e Craig Loewen por sua paciência, ajuda e orientação com este artigo.