DEV Community

Henrique Simões
Henrique Simões

Posted on • Originally published at Medium on

Montando um ambiente de desenvolvimento JavaScript no Windows com WSL — parte 03

Montando um ambiente de desenvolvimento JavaScript no Windows com WSL — parte 03

Instalando, configurando e personalizando o WSL — Windows Subsystem for Linux — usando o Ubuntu, Visual Studio Code, Nodejs, Git entre outros.

Instalamos o WSL e o Visual Studio Code (VSCode), vamos verificar como armazenar e acessar os arquivos dos nossos projetos, configurar o perfil do terminal Windows e instalar/atualizar o GIT no Linux.

Computador mostrando o Visual Studio Code

Armazenamento de arquivos

Sempre armazene os arquivos dos seus projeto no mesmo sistema operacional que as ferramentas que irá utilizar.

Como estamos trabalhando na linha de comando do Linux a partir do WSL, iremos manter nossos arquivos no sistema de arquivos do WSL, no caso o sistema de arquivos do Linux. Poderemos acessar os nossos arquivos a partir de qualquer sistema operacional.

Se trabalharmos com a linha de comando do Linux e armazenamos nossos arquivos no Windows, teremos uma redução significante do desempenho.

Para usarmos o sistema de arquivos de Linux, no Windows 11 é simples, abra o Explorer, na aba da esquerda, selecione Linux, a distribuição que irá usar para trabalhar, clique em Home depois na pasta com o nome do seu usuário. Crie uma pasta chamada Projetos e salve as suas pastas/arquivos de trabalho dentro dela.

Windows Explorer mostrando a pasta do Ubuntu

Configurando o Windows Terminal

Como iremos trabalhar com o Linux, aconselho a trocar o perfil padrão de inicialização do terminal para a distribuição do Linux que você irá trabalhar.

Para isso precisamos mudar duas configurações do Terminal.

Com o botão direito do mouse, clique no botão Iniciar e em Terminal Windows (Administrador).

Opções do botão Iniciar

Com o botão direito do mouse, clique no botão Iniciar e em Terminal Windows (Administrador).

Clique na janela de interface do usuário (seta para baixo), selecione Configurações.

Selecione Inicialização e altere o Perfil padrão para a distribuição do Linux. No Aplicativo terminal padrão, confirme o Windows Terminal.

Configurações do WLS

Ainda na interface do usuário, selecione a sua distribuição dos projetos e altere o Diretório inicial, o padrão é %USERPROFILE% altere para a pasta do seu usuário

\\wsl$\<DistroName>\home\<UserName>\
Enter fullscreen mode Exit fullscreen mode

Configurações do WLS

Desta maneira ao iniciar o terminal, será inicia o Linux na pasta do seu usuário, facilitando o acesso a pasta dos projetos.

O que é Git?

O Git é um sistema open-source, ou seja, gratuito, de controle de versão distribuído utilizado pela maioria dos desenvolvedores atualmente. Com ele podemos criar todo histórico de alterações no código do nosso projeto e facilmente voltar para qualquer ponto para saber como o código estava naquela data.

Além disso, o Git nos ajuda muito a controlar o fluxo de novas funcionalidades entre vários desenvolvedores no mesmo projeto com ferramentas para análise e resolução de conflitos quando o mesmo arquivo é editado por mais de uma pessoa em funcionalidades diferentes.

Instalando o Git

O VS Code é compatível com o controle de versão com o Git. A guia Source Control no VS Code acompanha todas as alterações efetuadas nos fontes e tem comandos Git comuns (add, commit, push e pull) incorporados diretamente na interface do usuário. Recomendo fortemente que, incialmente, você use os comandos via terminal. Além de ter uma maior controle das alterações e comandos, você estará aprendendo os macetes usados em produção.

O Git já vem instalado com a maioria das distribuições de Subsistema do Windows para Linux, no entanto, é aconselhável atualizar para a versão mais recente.

Para o Ubuntu, execute o comando abaixo, ele ira atualizar o repositório do Ubuntu com o PPA contendo a versão mais recente do GIT, atualizar a lista de pacotes e instalar a última versão do GIT.

GIF instalação GIT

Após a atualização do GIT, execute o comando abaixo para confirmação da instalação e a versão instalada.

Configuração inicial do GIT

Agora que você tem o Git em seu sistema, vamos fazer algumas coisas para personalizar o ambiente Git. Isso será feito apenas uma vez por computador e o efeito se manterá após atualizações. É possível alterar estas configurações em qualquer momento, simplesmente rodando esses comandos novamente.

A primeira coisa que você deve fazer ao instalar Git é configurar seu nome de usuário e endereço de e-mail. Isto é importante porque cada commit usa esta informação, e ela é carimbada de forma imutável nos commits que você começa a criar:

Digite os comandos abaixo no terminal substituindo Seu usuário pelo nome de usuário e email@example.com pelo seu e-mail.

Dica, caso já tenha um conta no GitHub, utilize o mesmo e-mail na configuração.

Caso não tenha, aproveite e já crie uma clicando aqui.

Caso não queira ficar preenchendo o usuário e senha ao utilizar o Git no WSL, é possível utilizar o Gerenciador de Credencias do Git no Windows, para isso é necessário instalar o Git no Windows.

O Git Gerenciador de Credenciais (GCM) Core permite autenticar um servidor Git remoto. O GCM Core integra-se ao fluxo de autenticação para serviços como GitHub após o primeiro acesso ele armazena o token com segurança no Windows Gerenciador de Credenciais. Assim é possível fazer um push para o GitHub sem precisar se autenticar. Ele só acessará o token no Gerenciador de Credenciais do Windows.

Para configurar o GCM Core para uso com uma distribuição WSL, abra sua distribuição e insira este comando:

Agora qualquer operação Git que você executar em sua distribuição WSL usará o GCM Core. Se você já tiver credenciais armazenadas em cache para um host, elas serão acessadas do Gerenciador de Credenciais. Caso contrário, você receberá uma resposta em uma caixa de diálogo solicitando suas credenciais, mesmo que esteja em um console do Linux.

Com isso finalizamos a configuração do terminal e do GIT.

Primeiraparte do tutorial.
Segundaparte do tutorial.
Quarta parte do tutorial.

Concluindo

Espero que você tenha conseguido acompanhar até o fim desta terceira etapa, em caso de dúvidas deixe sua pergunta nos comentários ou me procure no LinkedIn.

Abraço!

Top comments (0)