[Antigo] Como eu configuro meu ambiente de desenvolvimento web
Tags: webdev, beginners, productivity, tutorial
Published: 2022-06-07 13:25:22

## 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](https://docs.microsoft.com/pt-br/windows/wsl/install)

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

   ```powershell
   wsl --install
   ```

   - 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](https://www.zsh.org/) É 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:

```bash
sudo apt install zsh
```

- Tornar o ZSH o shell principal

```bash
chsh -s $(which zsh)
```

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](https://github.com/zdharma-continuum/zinit).

- Baixar e instalar

```bash
bash -c "$(curl --fail --show-error --silent --location https://raw.githubusercontent.com/zdharma-continuum/zinit/HEAD/scripts/install.sh)"
```

- (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](https://github.com/zdharma-continuum/zinit) do README do Zinit!

-📎 Fonte recomendada para o tema: [github.com/romkatv/powerlevel10k](https://github.com/romkatv/powerlevel10k#fonts)

- Entre nos arquivos de configuração do ZSH

```bash
nano ~/.zshrc
```

- Copie e cole no final do arquivos `~/.zshrc`

```bash
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
```

## 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](https://github.com/nvm-sh/nvm)

### Instalando NVM

- Copiar e colar o script fornecido pelo NVM

```bash
curl -o- https://raw.githubusercontent.com/nvm-sh/nvm/v0.39.1/install.sh | zsh
```

- Testa aí! (Lembre-se de reiniciar o terminal ou rodar `source ~/.zshrc` para recarregar as configurações

```bash
nvm -v
# Deve retornar a versão do NVM
```

- Instalando a versão LTS do node

```bash
nvm install --lts
```

### 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](https://stackoverflow.com/questions/57110542/how-to-write-a-nvmrc-file-which-automatically-change-node-version) 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`

```bash
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
```

## 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:

   ```bash
   sudo apt install software-properties-common
   ```

   ```bash
   sudo add-apt-repository ppa:ondrej/php
   ```

- Instalando `php8.1` (mude para a versão que quiser

   ```bash
   sudo apt install php8.1
   ```

- (Opcional) Extensões que eu uso

   ```bash
   sudo apt install php8.1-fpm php8.1-mysql php8.1-mbstring php8.1-pgsql
   ```

## 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`) 🐦✌️