DEV Community

Cover image for [Antigo] Como eu configuro meu ambiente de desenvolvimento web
Gustavo
Gustavo

Posted on • Updated on

[Antigo] Como eu configuro meu ambiente de desenvolvimento web

Intro

Sou um usuário de Windows há um bom tempo, nem sempre por escolha própria. Comecei a programar de fato em 2021 e sempre ouvi falar “Linux” é mais developer friendly e oferece mais liberdade.

Resolvi ver por mim mesmo recentemente e posso afirmar que, mesmo sendo um usuário assíduo de Windows e GUI em geral, fiquei impressionado com o poder e a liberdade que o terminal oferece. Porém, ninguém é de ferro e em poucas semanas entrei em abstinência por conta dos jogos, pois caso o jogo não oferecesse suporte nativo, eu tinha que passar dias para configurar o bendito wine, lutris e, caso quisesse jogar algum jogo que não fosse da Steam (Epic Games por exemplo), teria muita dor de cabeça e sinceramente, senti que o esforço não valeria a pena.

Por esse motivo resolvi voltar para o Windows, mas manter o uso do terminal!

Instalando WSL2

  • Docs

  • O processo de instalação é feito com o Powershell (sim, eu também odeio ele, relaxa que não vai demorar muito).

👉 É necessário executar o Powershell como administrador, só clique com o botão direito e selecione a opção “Executar como administrador”

  • Agora executa o comandinho aí
   wsl --install
Enter fullscreen mode Exit fullscreen mode
  • Isso vai fazer com que o WSL2 seja instalado e configurado com a distro Ubuntu por padrão
  • Caso queira outra distro, pesquise utilizando wsl --list --online e para instalar use wsl --install -d <NomeDaDistro>

    • Eu vou de Ubuntu por ter mais afinidade, mas sinta-se à vontade de mudar, trocar ou de sair experimentando todas por aí!
    • É isso! Agora vou partir para algumas ferramentas e configurações que eu uso em (quase) todas as distros que já utilizei

Instalando ZSH e as extensões

Antes de tudo: certifique-se de rodar um sudo apt update && sudo apt upgrade pra dar aquela atualizada no WSL.

ZSH

O ZSH É um shell projetado para uso interativo, embora também seja uma poderosa linguagem de script. Uso ele pela facilidade de instalar extensões e novos temas para o terminal.

  • No Ubuntu, é só rodar:
sudo apt install zsh
Enter fullscreen mode Exit fullscreen mode
  • Tornar o ZSH o shell principal
chsh -s $(which zsh)
Enter fullscreen mode Exit fullscreen mode

Não se esqueça de reiniciar o terminal para aplicar as mudanças!

Zinit

O Zinit é um gerenciador de plugins que permite instalar qualquer coisa que seja do Github ou outros sites, pra saber tudo que ele pode fazer, da uma olhada no Github.

  • Baixar e instalar
bash -c "$(curl --fail --show-error --silent --location https://raw.githubusercontent.com/zdharma-continuum/zinit/HEAD/scripts/install.sh)"
Enter fullscreen mode Exit fullscreen mode
  • (Opcional) Escolher instalar os “anexos”
    • Sinceramente, pra mim não faz diferença, mas eu acabo instalando mesmo assim 🤷

Instalando plugins e temas

  • 👉 Todos esses plugins já possuem um manual de instalação no tópico Introduction do README do Zinit!

-📎 Fonte recomendada para o tema: github.com/romkatv/powerlevel10k

  • Entre nos arquivos de configuração do ZSH
nano ~/.zshrc
Enter fullscreen mode Exit fullscreen mode
  • Copie e cole no final do arquivos ~/.zshrc
zinit ice depth"1" # git clone depth
zinit light romkatv/powerlevel10k # tema

zinit light zsh-users/zsh-autosuggestions # plugin de auto sugestão
zinit light zdharma-continuum/fast-syntax-highlighting # plugin de realce de sintaxe
Enter fullscreen mode Exit fullscreen mode

Node.js

  • Acredito que a melhor forma de instalação seria com um gerenciador de versão, assim eu posso trocar de versão rapidamente dependendo da versão do Node de cada projeto.
  • Docs NVM 🐙: github.com/nvm-sh/nvm

Instalando NVM

  • Copiar e colar o script fornecido pelo NVM
curl -o- https://raw.githubusercontent.com/nvm-sh/nvm/v0.39.1/install.sh | zsh
Enter fullscreen mode Exit fullscreen mode
  • Testa aí! (Lembre-se de reiniciar o terminal ou rodar source ~/.zshrc para recarregar as configurações
nvm -v
# Deve retornar a versão do NVM
Enter fullscreen mode Exit fullscreen mode
  • Instalando a versão LTS do node
nvm install --lts
Enter fullscreen mode Exit fullscreen mode

Adicionando script para carregar versão do Node automaticamente

Há um tempo atrás tive um problema com um projeto Strapi onde precisava usar uma versão mais antiga do node, acabei descobrindo um script nessa pergunta no Stackoverflow que muda automaticamente a versão do Node de acordo com a versão especificada no arquivo .nvmrc do projeto.

  • Para isso, cole o script DEPOIS da inicialização do NVM no ~/.zshrc
autoload -U add-zsh-hook
load-nvmrc() {
  local node_version="$(nvm version)"
  local nvmrc_path="$(nvm_find_nvmrc)"

  if [ -n "$nvmrc_path" ]; then
    local nvmrc_node_version=$(nvm version "$(cat "${nvmrc_path}")")

    if [ "$nvmrc_node_version" = "N/A" ]; then
      nvm install
    elif [ "$nvmrc_node_version" != "$node_version" ]; then
      nvm use
    fi
  elif [ "$node_version" != "$(nvm version default)" ]; then
    echo "Reverting to nvm default version"
    nvm use default
  fi
}
add-zsh-hook chpwd load-nvmrc
load-nvmrc
Enter fullscreen mode Exit fullscreen mode

Instalando PHP

  • Adicionando repositório do PHP 8.0

Como o apt não disponibiliza a versão atualizada, utilizo o repositório do grandiosíssimo Ondřej Surý. Para adicionar o repositório dele:

   sudo apt install software-properties-common
Enter fullscreen mode Exit fullscreen mode
   sudo add-apt-repository ppa:ondrej/php
Enter fullscreen mode Exit fullscreen mode
  • Instalando php8.1 (mude para a versão que quiser
   sudo apt install php8.1
Enter fullscreen mode Exit fullscreen mode
  • (Opcional) Extensões que eu uso
   sudo apt install php8.1-fpm php8.1-mysql php8.1-mbstring php8.1-pgsql
Enter fullscreen mode Exit fullscreen mode

Concluindo

Acabou! Acabei de descrever meu “ritual” toda vez que formato ou mudo de PC. Não sou um especialista em nada na programação, então se tiver alguma sugestão, dúvida ou qualquer outra coisa, deixe nos comentários ou, se preferir, manda aquela DM no Twitter (@gusgalote) 🐦✌️

Top comments (0)