DEV Community: Henrique Simões

Configuração do Visual Studio Code

Henrique Simões — Wed, 15 Feb 2023 19:08:32 +0000

Nesse post irei comentar sobre as extensões e configurações que utilizo no meu VS Code

Segundo a última pesquisa da Stack Overflow, o Visual Studio Code continua sendo o IDE preferencial em todos os desenvolvedores com mais de 70% de preferencia dos usuários.

Você pode configurar o Visual Studio Code ao seu gosto por meio de suas várias configurações. Quase todas as partes do editor, da interface do usuário e do comportamento funcional do VS Code têm opções que você pode modificar.

Começado pelo tema, eu pessoalmente sou fã do Noctis Obscuro.

Mas a dica que eu passo é o site VS Code Themes, onde você pode ver uma demonstração dos temas disponíveis no VS Code, veja todos ou filtre entre Dark e Light.

Escolha um e clique no botão VS Code, ele irá abrir o VS Code já selecionando a extensão do tema escolhido.

Já a fonte eu recomendo a Fira Code disponível no GitHub no link, ela é uma fonte monoespaçada livre contendo ligaduras, quando vários caracteres são representados por um único símbolo ou glifo.

Extensões para VS Code

Estas são as extensões que estou utilizando no momento, principalmente referente à programação em JavaScript/TypeScript.

Material Icon Theme

Material Icon Theme — Visual Studio Marketplace

O Material Icon Theme é uma excelente extensão para uma organização visual dos seus arquivos e pastas no VS Code. Ele possui inúmeros ícones para cada tipo de arquivos, linguagens e pastas, onde cada item será identificado por um desses ícones.

O legal é que ele identifica grande parte de libs e ferramentas mostrando os ícones de acordo com a linguagem utilizada.

Todo Tree

Todo Tree — Visual Studio Marketplace

Essa extensão pesquisa rapidamente seu espaço de trabalho em busca de marcas de comentário como TODO e FIXME e as exibe na forma de árvore na barra de atividades. Ótimo para quem mostrar todas as tarefas pendentes dentro de um determinado projeto.

Quando implementado corretamente, ele permite que você navegue pelo seu código como um desenvolvedor profissional e pule seções facilmente.

Color Highlight

Color Highlight — Visual Studio Marketplace

Esse plugin mostra a cor exata de todos RGB’s ou HEX no código, muito útil para quem trabalha com CSS ou SASS.

GitLens — Git supercharged

GitLens — Git sobrealimentado — Visual Studio Marketplace

O GitLens simplesmente ajuda você a entender melhor o código. Vislumbre rapidamente quem, por que e quando uma linha ou bloco de código foi alterado. Volte pela história para obter mais informações sobre como e por que o código evoluiu. Explore sem esforço a história e a evolução de uma base de código.

Import Cost

Import Cost — Visual Studio Marketplace

Esta extensão mostra o tamanho de uma biblioteca de terceiros importada no momento em que você a importa (ou vários momentos depois).

Markdown All in One

Markdown All in One — Visual Studio Marketplace

Apesar do VS Code ter suporte básico para Markdown pronto para uso, aconselho a extensão para escrever e ler Markdown, muito útil para documentações o README’s do Github, ela é bem completa e com vários recursos funcionais como visualização ao vivo e destaque de sintaxe.

Code Spell Checker

Code Spell Checker — Visual Studio Marketplace

Para quem, que como eu, esta iniciando no inglês, segue um corretor ortográfico básico que funciona bem com código e documentos.

Ela nos ajuda a escrever um código com a sintaxe correta, especialmente se você está escrevendo tudo em inglês. Algo bem interessante dessa extensão é que você pode baixar os dicionários de forma independente, podendo inclusive usar vários dicionários ao mesmo tempo.

Outro exemplo com sugestões:

Segue o link da versão em português do Brasil: Brazilian Portuguese — Code Spell Checker — Visual Studio Marketplace

Além das extensões, recomendo algumas configurações para facilitar a legibilidade e edição do código, veja como ficou o meu settings.json.

{
    // Link com as configurações
    // https://code.visualstudio.com/docs/getstarted/settings
    // Define o tema do VS Code
    "workbench.colorTheme": "Noctis Obscuro",
    //Configura tamanho e família da fonte
    "editor.fontSize": 12,
    "editor.lineHeight": 22,
    "editor.fontFamily": "Fira Code",
    // Habilita as ligaduras
    "editor.fontLigatures": true,
    // Aplica um sinal visual na esquerda da linha selecionada
    "editor.renderLineHighlight": "gutter",    
    // Aplica linhas verticais para lembrar de quebrar linha em códigos muito grandes
    "editor.rulers": [
        100,
        120
    ],   
    // Define a fonte do terminal
    "terminal.integrated.fontSize": 12,
    // Altera visualização da arvore de pastas
    "explorer.compactFolders": false,    
    // Habilita a barra de navegação acima de seu conteúdo
    "breadcrumbs.enabled": true,
    // Configurações das extensões
    "workbench.iconTheme": "material-icon-theme",
    // Configuração de linguagem do Code Spell
    "cSpell.language": "en,pt,pt_BR",
    // Configuração do Todo Tree
    "todo-tree.general.tags": ["NOTE", "TODO", "FIXME", "DOC", "BUG"],
    "todo-tree.highlights.defaultHighlight": {
      "type": "tag",
      "fontWeight": "bold",
      "foreground": "#000000",
      "opacity": 90
    },
    "todo-tree.highlights.customHighlight": {
      "NOTE": {
        "background": "#FFA500",
        "iconColour": "#FFA500",
        "icon": "file"
      },
      "TODO": {
        "background": "#FFD703",
        "iconColour": "#FFD703",
        "icon": "tasklist"
      },
      "FIXME": {
        "background": "#FF01FF",
        "iconColour": "#FF01FF",
        "icon": "bug"
      },
      "DOC": {
        "background": "#157EFB",
        "iconColour": "#157EFB",
        "icon": "tag"
      },
      "BUG": {
        "background": "#ff000080",
        "iconColour": "#ff000080",
        "icon": "flame"
      }
    },
    "todo-tree.regex.regex": "(//|#|<!--|;|/\\*|^|^\\s*(-|\\d+.))\\s*($TAGS)",
}

Você pode abrir o seu a partir do comando Preferences: Open Settings (JSON).

Espero que você tenha gostado desse post, se tiver alguma dica para melhorar ainda mais o meu ambiente, deixe aqui nos comentários. Em caso de dúvidas deixe sua pergunta nos comentários ou me procure no LinkedIn.

Abraço!

Instalando e configurando Zsh e Oh My Zsh

Henrique Simões — Sat, 11 Feb 2023 00:20:04 +0000

O Oh My Zsh é um framework open source que possibilita o gerenciamento das configurações do interpretador de comandos Zsh.

Zsh é um shell projetado para uso interativo, embora seja também uma poderosa linguagem de script. Muitos dos recursos úteis do bash, ksh e tcsh foram incorporados ao zsh; muitas características originais foram adicionadas.

Ele é uma alternativa ao shell padrão oferecido pelo sistema operacional. Sua utilização ajuda a tornar o terminal de comandos muito mais amigável e funcional. Ele é mais indicado para os sistemas operacionais Linux e macOS. Iremos instalar e configurar no WSL.

Pré-requisitos

Para instalar o Oh My Zsh é preciso atender alguns pré-requisitos, são eles:

instalar o Zsh;
ter o curl ou wget instalados, iremos utilizar o curl;
ter o git instalado na máquina no WSL2;

Instalando o Zsh

sudo apt-get install zsh

Com o Zsh instalado deve ser possível você executar:

zsh --version

E receber algo como zsh 5.8.1 (x86_64-ubuntu-linux-gnu) de retorno

Instalando o curl

sudo apt-get install curl

Com o curl instalado deve ser possível você executar:

curl --version

E receber algo como curl 7.81.0 (x86_64-pc-linux-gnu) de retorno.

Instalando o git

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

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

Com o git instalado deve ser possível você executar:

git --version

E receber algo como git version 2.39.1 de retorno.

Instalando o Oh My Zsh?

A instalação do Oh My Zsh pode ser feita de duas formas oficiais, via Curl ou via Wget, iremos utilizar o curl.

Digitar o seguinte comando no terminal:

sh -c "$(curl -fsSL https://raw.githubusercontent.com/ohmyzsh/ohmyzsh/master/tools/install.sh)"

A partir de agora, todas configurações que você quiser fazer, como adicionar variáveis ambientes ou configurar seu terminal de qualquer forma, você irá utilizar o arquivo ~/.zshrc e não mais o ~/.bash_profile ou derivados.

Reinicie o seu terminal.

Configurando o tema Spaceship no Oh My Zsh!

Spaceship é um prompt Zsh minimalista, poderoso e extremamente personalizável. Prompt é o que você vê quando digita um comando. Ele pode mostrar muitas dicas úteis, economizando seu tempo e tornando a experiência do usuário suave e agradável. Ele combina tudo o que você pode precisar para um trabalho conveniente, sem complicações desnecessárias, como uma nave espacial real.

Primeiro, vamos clonar o repositório do GitHub:

git clone https://github.com/spaceship-prompt/spaceship-prompt.git "$ZSH_CUSTOM/themes/spaceship-prompt" --depth=1

Criar um link para o seu diretório de temas personalizados oh-my-zsh:spaceship.zsh-theme

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

Definir e configurar o tema no arquivo .zshrc para isso use o seu editor de texto preferido, no meu caso utilizo o VSCode

code . ~/.zshrc

Procure pela variável ZSH_THEME e altere para ZSH_THEME=”spaceship”

No final do arquivo copie o seguinte texto:

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
  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=" "

Para mais configurações segue o link com as definições das diversas opções que podemos usar para customizar o prompt com o Spaceship.

Para os temas inclusos no Oh My Zsh, você precisa somente configurar a variável ZSH_THEME, segue o link dos temas disponíveis.

Themes · ohmyzsh/ohmyzsh Wiki (github.com)

Instalando alguns plugins especiais

Além de escolher um tema para modificar a aparência do terminal, também podemos adicionar funcionalidades a ele. Para isso, existem inúmeros plugins, que também são de código aberto e ajudam a tornar o interpretador de comandos muito mais potente que facilitam muito na hora de executar comandos comuns, realizar autocompletes, etc.

Confira alguns deles a seguir.

Zsh-syntax-highlighting

O plugin zsh-syntax-highlighting da um destaque aos comandos enquanto eles são digitados. Dessa forma, se o comando estiver correto, ele será exibido na cor verde, caso contrário, o comando ficará em vermelho. Isso ajuda a revisar comandos antes de executar eles, particularmente na captura de erros de sintaxe.

Para instalar esse plugin precisamos primeiro clonar o repositório do Github

git clone https://github.com/zsh-users/zsh-syntax-highlighting.git ${ZSH_CUSTOM:-~/.oh-my-zsh/custom}/plugins/zsh-syntax-highlighting

Editar o arquivo .zshrc e ativar o plugin:

plugins=( [plugins...] zsh-syntax-highlighting)

O arquivo ficará da seguinte maneira:

Zsh-autosuggestions

Plugin de sugestões para comandos com base no histórico de comandos já usados. Ao digitar comandos, você verá uma conclusão oferecida após o cursor em uma cor cinza silenciada.

A instalação é idêntica ao do plugin Zsh-syntax-highlighting.

Clonar o repositório do Github e ativar o plugin.

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

plugins=( [plugins...] zsh-autosuggestions)

Para outros puglins:

Plugins · ohmyzsh/ohmyzsh Wiki (github.com)

Por fim, recarregar as configurações do Zsh para que o seu terminal aberto já carregue as novas configurações:

source ~/.zshrc

Em caso de dúvidas deixe sua pergunta nos comentários ou me procure no LinkedIn.

Abraço!

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

Henrique Simões — Wed, 12 Jan 2022 19:51:00 +0000

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

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

Dando continuidade o nosso tutorial, vamos instalar o Node.Js.

O Node.js é um software de código aberto e um ambiente de runtime JavaScript do lado do servidor, de software livre e multiplataforma baseado no mecanismo JavaScript V8 do Chrome, originalmente criado por Ryan Dahl e lançado em 2009.

Isso significa que com o Node.js é possível criar aplicações Javascript para rodar como uma aplicação standalone em uma máquina, não dependendo de um browser para a execução, como estamos acostumados.

Instalando o cURL

Com o acesso ao bash do Linux, recomendamos o uso de um gerenciador de versão devido as constantes atualizações do Node. Deste o nível iniciante, provavelmente, você precisará alternar entre várias versões do Node.js de acordo com as necessidades de diferentes projetos e cursos nos quais você estará trabalhando e/ou estudando. O Node Version Manager, mais comumente chamado de NVM, é a maneira mais popular de instalar várias versões do Node.js.

Para isso, precisamos primeiro instalar o cURL (Cliente URL), comandos URL são destinados a verificar a conectividade com uma URL e ao mesmo tempo é uma ferramenta de transferência de dados.

Instalando o NVM

Antes de instalarmos o NVM, vamos verificar na página do projeto no GitHub qual a versão mais recente. No momento que estou escrevendo este artigo a versão é a 0.39.1.

Isso vai executar um script que vai clonar o repositório do NVM em um diretório chamado ~/.nvm/, que é onde serão instaladas as várias versões do Node.js que quisermos.

O | bash tenta adicionar as variáveis de ambiente no arquivo .bash_profile arquivo:

export NVM_DIR="$HOME/.nvm"
[-s "$NVM_DIR/nvm.sh"] && \. "$NVM_DIR/nvm.sh" # This loads nvm
[-s "$NVM_DIR/bash_completion"] && \. "$NVM_DIR/bash_completion" # This loads nvm bash_completion

Reinicie o terminal do Linux e execute o comando command -v nvm isso deverá retornar ‘nvm’.

Principais comandos do NVM

nvm ls Lista as versões instaladas.
nvm ls-remote Lista as versões disponível para instalação.
nvm install vX.X.X Instala a versão seleciona.
nvm install nodeInstala a versão mais recente.
nvm uninstall vX.X.X Desinstala a versão seleciona.
nvm use vX.X.X Use a versão seleciona.
nvm use nodeUse a versão mais recente.
nvm alias default vX.X.X Define uma versão padrão.
nvm alias nodeDefine a versão mais recente como padrão.
nvm current Indica qual versão esta sendo usada.

Instalando o NodeJs

Aconselho, neste período de aprendizado, a instalar a versão LTS atual e estável do Node. Posteriormente você poderá aprender a alternar entre as demais versões.

Verifique se o Node.js foi instalado corretamente bem como a versão atual com: node --version. Verifique também a versão do NPM, com: npm --version.

Concluindo

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

Abraço!

Primeiraparte do tutorial.
Segunda parte do tutorial.
Terceira parte do tutorial.

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

Henrique Simões — Thu, 09 Dec 2021 14:57:37 +0000

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.

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.

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).

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.

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>\

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.

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!

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

Henrique Simões — Mon, 29 Nov 2021 01:40:55 +0000

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

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

Dando continuidade o nosso tutorial, vamos instalar o Visual Studio Code.

O Visual Studio Code (VS Code) é um editor de código multiplataforma e de código aberto disponibilizado pela Microsoft. Ele tem suporte às mais populares linguagens, como Javascript, SQL, PHP, Ruby, entre outras linguagens.

Instalando o Visual Studio Code e a extensão Remote Development.

Visite o site oficial para fazer o download do instalador de 32 ou 64 bits de acordo com a arquitetura do teu processador. Há duas opções de instaladores, User e System, a diferença básica entre elas é a versão do sistema é instalada na pasta de Arquivos de Programas como qualquer outro aplicativo e a instalação do usuário é instalada na pasta do usuário e somente ele tem acesso ao aplicativo.

Baixe a versão do Windows, a instalação não pode ser feita no sistema de arquivos WSL.

Execute o arquivo de instalação para iniciar o processo, na tela de “Acordo de Licença” é necessário aceitar os termos.

Em seguida, em “Selecione o local de destino”, clique em “Next”, mantendo o padrão da instalação.

A configuração seguinte é opcional, mas eu recomendo que você não altere nada aqui e clique em “Next”.

Agora chegamos em uma parte importante da instalação! A opção de “Selecionar tarefas adicionais“. Mantenha a opção “Add to PATH (requires shell restart” marcada para que você possa abrir facilmente a partir da pasta do projeto no WSL usando o comando de código: code .

Feito isso, clique em “Install” e aguardar a finalização da instalação.

Pronto, instalação finalizada!

Agora instale o pacote de extensão de desenvolvimento remoto. Esse pacote de extensão inclui a extensão WSL remota, além das extensões SSH remota e contêineres remotos, permitindo que você abra qualquer pasta em um contêiner, em um computador remoto ou em WSL.

No ícone Extensions pesquise por Remote Development, ele irá instalar 03 extensões: Remote — WSL, Remote — Containers e Remote — SSH.

Para algumas distribuições do Linux é necessário a instalação de algumas bibliotecas para iniciar o VS Code, entre elas o wget (para recuperar conteúdo de servidores Web) e ca-certificates (para permitir que aplicativos baseados em SSL verifiquem a autenticidade de conexões SSL). No Bash da sua distribuição, digite.

Com isso finalizamos a instalação do Visual Studio Code, daremos continuidade com as demais instalações e configurações nos próximos posts.

Primeira parte do tutorial.
Terceiraparte do tutorial.
Quarta parte do tutorial.

Concluindo

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

Abraço!

Montando um ambiente de desenvolvimento JavaScript no Windows com WSL.

Henrique Simões — Wed, 24 Nov 2021 00:18:27 +0000

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

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

Quero compartilhar com vocês este tutorial com algumas dicas para instalar o WSL. Percebi que a maioria dos cursos ofertados hoje em dia é feito em MAC ou Linux, são poucos baseados totalmente no Windows, e para um melhor acompanhamento nada melhor do que usarmos o Linux.

Nestes casos muitos utilizam a opção de Dual Boot ou uma máquina virtual, mas com o WSL, não é necessário nenhuma destas opções, e, para quem se encontra como Windows 11 a partir da build 22000, pode usar até os aplicativos do Linux em modo gráfico.

Instalando o WSL e o Ubuntu

Vamos usar como base o Windows 11 para instalação e configuração do WSL, mas estas mesmas configurações podem ser usadas no Windows 10 a partir da build 19041 ou superior.

Caso você utilize uma versão mais antiga: Etapas de instalação manual para versões mais antigas do WSL | Microsoft Docs

A instalação é feita com o comando wsl --install no PowerShell ou no prompt de comando do Windows em modo administrador e reiniciando o computador.

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

Ou clique em Iniciar e digite terminal, selecione Windows Terminal na aba esquerda e na aba da direita clique em Executar como administrador.

Após a confirmação da execução como Administrador, digite o comando abaixo no terminal.

Esse comando habilitará os componentes opcionais necessários, baixará o kernel mais recente do Linux, definirá o WSL 2 como padrão e instalará o Ubuntu.

Você precisará reiniciar o computador durante esse processo de instalação.

Depois que o processo de instalação da distribuição do Linux com o WSL for concluída, reinicie o computador para finalizar a instalação e configuração do usuário no Ubuntu.

Caso o terminal do Linux não abra logo após a reinicialização do Windows, será necessário efetuar o download e instalação manual pela Windows Store.

Escolha a distro de sua preferência, e faça a instalação. Depois de instalado é preciso abrir o terminal para que ele conclua a instalação criando seu usuário e senha para o Linux. O usuário e senha pode ser diferente do que você usa no Windows.

Na primeira vez que a distribuição do Linux for iniciada, uma janela de console será aberta e será solicitado que você aguarde para que os arquivos sejam instalados e solicitando a criação de um usuário

Depois de criar um Nome de Usuário e uma Senha, a conta será o usuário padrão para a distribuição e será conectada automaticamente ao iniciar.

Essa conta será considerada o administrador do Linux, com a capacidade de executar comandos administrativos sudo (Super Usuário).

Após a criação do usuário é recomendando a atualização do Ubuntu

Sempre atualize regularmente seus pacotes usando o gerenciador de pacotes para Ubuntu, use o comando:

Com isso finalizamos a instalação do WSL e do Linux, daremos continuidade com as demais instalações e configurações nos próximos posts.

Concluindo

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

Abraço!

Segunda parte do tutorial.
Terceira parte do tutorial.
Quarta parte do tutorial.