[Uso do Terminal] Como Usar e Personalizar o Terminal Integrado do VSCode

Olá! Sou um criador da Web que administra os sites "buyonjapan.com" e "copicode.com".

Até poucos meses atrás, eu era um completo iniciante, sem nenhum conhecimento de programação. Especialmente, a "tela preta" que os hackers usam nos filmes, ou seja, o "terminal", sinceramente, só me dava medo. "Parece assustador", "A operação parece difícil", "Este é um mundo do qual eu nunca farei parte..." era o que eu pensava.

No entanto, à medida que avançava na criação de sites com a ajuda da IA, percebi que o terminal era um caminho inevitável e que, uma vez que você se familiariza com ele, ele se torna o "melhor parceiro" que existe.

Neste artigo, para os criadores da Web iniciantes que, como eu no passado, se sentem intimidados pelo terminal, explicarei de forma super clara, desde o uso básico do "Terminal Integrado" do VSCode até métodos de personalização que transformarão drasticamente seu ambiente de desenvolvimento com um simples copiar e colar, tudo isso compartilhando minhas próprias experiências de tropeços. O objetivo é que, ao terminar de ler este artigo, você seja capaz de operar o terminal com confiança!

Capítulo 1: Não tenha mais medo! Seu primeiro encontro com o Terminal Integrado do VSCode

Primeiro, vamos encarar o objeto do nosso medo (?), o terminal. Não se preocupe, nada acontecerá apenas por abri-lo!

3 maneiras de abrir o terminal

Existem principalmente três maneiras de abrir o terminal no VSCode. Tente o método que melhor se adapta a você.

1. Abrir pela barra de menus: Clique em Terminal > Novo Terminal no menu superior da tela.
2. Abrir com uma tecla de atalho: Este é o jeito mais legal e eficiente! Definitivamente, memorize-o.
   • Comum para Windows/Mac: Ctrl + @ (ou Ctrl + Shift + `)
3. Pela barra de status inferior: Se você tiver painéis como o de Problemas abertos, verá "Terminal" na lista de guias, então clique nele.

Se a "tela preta" aparecer na metade inferior da tela, você conseguiu!

(A imagem é de uma versão personalizada, mas no início a exibição deve ser bem mais simples)

O que é um prompt? - O início do diálogo com o terminal

Ao abrir o terminal, uma string de texto como C:\Users\SeuNome\Projeto> ou SeuNome@MacBook-Air Projeto % deve aparecer, com um cursor piscando ao lado. Isso é chamado de prompt.

Esta é uma mensagem do terminal dizendo: "Atualmente, você está nesta localização (diretório atual). Por favor, insira o próximo comando." A partir daqui, enviaremos vários "comandos (ordens)" para o terminal para que o PC trabalhe para nós.

Capítulo 2: O que você precisa aprender! Um conjunto de comandos essenciais para criadores da Web

Existem inúmeros comandos, mas os usados diariamente na criação de sites são limitados. Aqui, apresentarei os comandos essenciais com os quais "você não terá problemas por enquanto, se os aprender!", juntamente com cenários de uso específicos.

1. Verificar a localização atual `pwd`

pwd é a abreviação de "Print Working Directory" (Imprimir diretório de trabalho) e é um comando para perguntar ao PC: "Em que pasta estou agora?". É o mesmo que verificar sua localização atual quando você se perde.

pwd

2. Ver o conteúdo de uma pasta `ls`

ls é a abreviação de "List" (Lista). Ele exibe uma lista de quais arquivos e subpastas existem na pasta (diretório) atual. Na criação de sites, é usado com frequência для verificar a estrutura de arquivos.

ls

※ No prompt de comando do Windows, dir desempenha a mesma função, mas usando o Git Bash, que discutiremos mais tarde, você também pode usar ls no Windows, o que é conveniente para operar com a mesma sensação de um usuário de Mac.

3. Mover-se entre pastas `cd`

cd é a abreviação de "Change Directory" (Mudar de diretório). É um dos comandos mais importantes para se mover para a pasta em que você deseja trabalhar. É usado em cenários como "mover para a pasta do projeto para começar a trabalhar".

Por exemplo, se você quiser se mover para uma pasta chamada contact-form, digitaria isto:

cd contact-form

Se quiser voltar para a pasta de nível superior, use ...

cd ..

4. Criar uma pasta `mkdir`

mkdir é a abreviação de "Make Directory" (Criar diretório). Cria uma nova pasta (diretório). Por exemplo, é usado para criar uma pasta images para guardar imagens ou uma pasta css para arquivos CSS.

mkdir images

5. Instalar recursos de JavaScript `npm install`

Na criação de sites moderna, é comum baixar e usar recursos convenientes (pacotes) da Internet. O mecanismo usado para isso é o npm, e npm install é o comando para solicitar "Eu quero este recurso (pacote)!".

Por exemplo, para instalar a famosa biblioteca "Swiper" para implementar sliders, você digitaria isto:

npm install swiper

Este comando foi o que me fez pensar pela primeira vez: "O terminal é incrível...!". Com apenas uma linha, você pode usar em seu próprio projeto recursos avançados criados por desenvolvedores de todo o mundo. É literalmente um feitiço mágico.

Capítulo 3: [OK com Copiar e Colar] Não tenha mais medo! Desenvolva o terminal ao seu gosto

Depois de aprender os comandos básicos, o próximo passo é a personalização. O terminal padrão, um tanto impessoal, não é ruim, mas com alguns ajustes, sua aparência pode se tornar drasticamente mais legal, sua motivação aumentará e, o mais importante, sua eficiência de trabalho melhorará significativamente.

Aqui, apresentarei métodos práticos de personalização que são concluídos apenas editando o arquivo de configurações do VSCode, settings.json, sem usar nenhuma ferramenta complicada.

Passo 1: Abrir o arquivo de configurações `settings.json`

Primeiro, vamos abrir o arquivo de configurações do VSCode, settings.json.

1. Pressione as teclas de atalho Ctrl + Shift + P (ou Command + Shift + P no Mac) para abrir a Paleta de Comandos.
2. Na caixa de pesquisa, digite "settings json".
3. Selecione a opção que aparece "Preferências: Abrir Configurações (JSON) (Preferences: Open User Settings (JSON))".

Isso abrirá o arquivo settings.json, que contém todas as suas configurações do VSCode. Adicionando código aqui, você pode alterar as configurações do terminal.

Passo 2: [Recomendado para usuários do Windows] Mudar o shell para o Git Bash

Os usuários de Mac podem pular este passo, pois o zsh padrão é muito poderoso. Para os usuários do Windows, recomendo fortemente mudar o programa que o terminal usa (o shell) do padrão PowerShell ou Prompt de Comando para o Git Bash.

Por que Git Bash?

• Você pode usar os comandos comuns do Mac e Linux (ls, pwd, etc.) diretamente, facilitando o copiar e colar de comandos de artigos técnicos e tutoriais da web.
• Ele vem automaticamente ao instalar o Git (uma ferramenta de controle de versão), então sua implementação é fácil.

Se você ainda não tem o Git para Windows no seu PC, baixe e instale-o do site oficial "git-scm.com". Após a conclusão da instalação, adicione o seguinte código ao arquivo settings.json que você acabou de abrir. (Se já houver algo escrito dentro de {}, adicione-o separado por uma vírgula ,).

{
    // Configuração para usar o Git Bash como terminal padrão no Windows
    "terminal.integrated.defaultProfile.windows": "Git Bash"
}

Reinicie o VSCode ou abra um novo terminal, e o Git Bash será iniciado.

Passo 3: [Completo com Copiar e Colar] Personalização para melhorar drasticamente a aparência e a praticidade

A espera acabou! Finalmente, vamos personalizar a aparência do terminal. Copie e cole todo o código abaixo no seu arquivo settings.json. Adicionei comentários explicando o que cada linha faz, para que você possa entender o significado enquanto remove as partes desnecessárias ou altera os valores para criar seu próprio terminal exclusivo.

Sobre a fonte recomendada: As configurações a seguir especificam a fonte de programação Fira Code. Esta fonte exibe combinações de certos símbolos como => ou != como um único símbolo de fácil leitura (ligatura), o que melhora a legibilidade do código. Recomenda-se pesquisar por "Fira Code font" e instalar a fonte no seu PC com antecedência.

{
    // --- As configurações do terminal começam aqui ---

    // Especifica a família de fontes a ser usada no terminal. 'Fira Code' é recomendado.
    // Se várias fontes forem especificadas, a próxima fonte será usada se a primeira não estiver disponível.
    "terminal.integrated.fontFamily": "'Fira Code', Menlo, Monaco, 'Courier New', monospace",

    // Especifica o tamanho da fonte do terminal. Ajuste para o seu tamanho preferido.
    "terminal.integrated.fontSize": 14,

    // Ativa as ligaturas da fonte. Símbolos como => e != se transformarão em símbolos mais legíveis.
    "terminal.integrated.fontLigatures": true,

    // Especifica a altura da linha do terminal. Cerca de 1.5 é fácil de ler.
    "terminal.integrated.lineHeight": 1.5,

    // Especifica o estilo do cursor. 'line' é uma linha, 'block' é um bloco, 'underline' é um sublinhado.
    "terminal.integrated.cursorStyle": "line",

    // Faz o cursor piscar.
    "terminal.integrated.cursorBlinking": true,

    // Comportamento ao clicar com o botão direito no terminal. 'copyPaste' é conveniente para copiar e colar.
    "terminal.integrated.rightClickBehavior": "copyPaste",

    // Desativa o sino (som de alerta) do terminal.
    "terminal.integrated.enableBell": false,

    // Configurações detalhadas de cores do terminal que sincronizam com as cores da janela do VSCode
    "workbench.colorCustomizations": {
        // Cor de fundo do terminal
        "terminal.background": "#1E1E1E",
        // Cor do texto (primeiro plano) do terminal
        "terminal.foreground": "#D4D4D4",
        // Preto do terminal
        "terminal.ansiBlack": "#000000",
        // Vermelho do terminal
        "terminal.ansiRed": "#CD3131",
        // Verde do terminal
        "terminal.ansiGreen": "#0DBC79",
        // Amarelo do terminal
        "terminal.ansiYellow": "#E5E510",
        // Azul do terminal
        "terminal.ansiBlue": "#2472C8",
        // Magenta do terminal
        "terminal.ansiMagenta": "#BC3FBC",
        // Ciano do terminal
        "terminal.ansiCyan": "#11A8CD",
        // Branco do terminal
        "terminal.ansiWhite": "#E5E5E5",
        // Preto brilhante (cinza) do terminal
        "terminal.ansiBrightBlack": "#666666",
        // Vermelho brilhante do terminal
        "terminal.ansiBrightRed": "#F14C4C",
        // Verde brilhante do terminal
        "terminal.ansiBrightGreen": "#23D18B",
        // Amarelo brilhante do terminal
        "terminal.ansiBrightYellow": "#F5F543",
        // Azul brilhante do terminal
        "terminal.ansiBrightBlue": "#3B8EEA",
        // Magenta brilhante do terminal
        "terminal.ansiBrightMagenta": "#D670D6",
        // Ciano brilhante do terminal
        "terminal.ansiBrightCyan": "#29B8DB",
        // Branco brilhante do terminal
        "terminal.ansiBrightWhite": "#E5E5E5"
    }

    // --- As configurações do terminal terminam aqui ---
}

No momento em que você colar esta configuração e salvar (Ctrl + S), a aparência do seu terminal deverá mudar. Se não mudar, tente fechar o terminal (clicando no ícone da lixeira) e abrir um novo.

Capítulo 4: Onde eu emperrei! Solução de problemas para iniciantes

Quando você começa a usar o terminal, é quase certo que encontrará erros. Mas não se preocupe, você não é o único. Aqui, compartilharei erros típicos que eu mesmo encontrei e que levei horas (às vezes um dia inteiro!) para resolver, juntamente com suas soluções.

Caso 1: "'npm' não é reconhecido como um comando interno ou externo..."

Este erro pode ser a primeira e maior barreira para os iniciantes em desenvolvimento web. Você tenta executar npm install e recebe esta mensagem fria... Eu também quase desisti completamente por causa disso.

Causa: O PATH não está definido

A causa de 99% deste erro é que "o PATH (caminho) não está definido". Para dizer de forma muito simples, o PATH é um "catálogo de endereços para o PC encontrar comandos".

O comando npm, normalmente, é instalado junto com o ambiente de programação Node.js em uma pasta específica do PC (ex: C:\Program Files\nodejs\). Quando você digita npm no terminal, o PC consulta este "catálogo de endereços (PATH)" para ver onde o comando npm está localizado. No entanto, se por algum motivo a localização do npm não estiver registrada neste catálogo de endereços, o PC retornará um erro dizendo "Não consigo encontrar esse comando em lugar nenhum!".

Solução (para Windows)

1. Primeiro, verifique se o Node.js está instalado corretamente. Vamos instalar a versão LTS (recomendada) do site oficial "nodejs.org". Se houver uma caixa de seleção como "Adicionar ao PATH" durante a instalação, certifique-se de marcá-la.
2. Na barra de pesquisa do Windows, pesquise por "Editar as variáveis de ambiente do sistema" e abra-o.
3. Clique no botão "Variáveis de Ambiente".
4. Na seção "Variáveis do sistema", encontre a variável chamada Path, selecione-a e clique em "Editar".
5. Na lista que se abre, verifique se está incluído o caminho para a pasta onde você instalou o Node.js, como C:\Program Files\nodejs\. Se não estiver, pressione o botão "Novo" para adicionar este caminho.
6. Feche todas as janelas clicando em "OK" e reinicie o seu PC (ou, no mínimo, reinicie completamente o VSCode).

O conceito de "definir o PATH" pode ser realmente difícil de entender no início. Eu mesmo perguntei a uma IA "explique-me o PATH como se eu tivesse 5 anos" muitas vezes até finalmente chegar a esta imagem de "catálogo de endereços". Uma vez que você entenda, poderá aplicar este conhecimento ao instalar outras ferramentas no futuro, então vamos superar este obstáculo agora!

Conclusão: O terminal não é assustador, é o seu melhor amigo!

Muito obrigado por chegar até aqui! Os comandos e as personalizações apresentados neste artigo são apenas a porta de entrada para o vasto mundo do terminal. No entanto, acredito que o fato de você ter dado este primeiro passo influenciará grandemente o seu futuro como criador da Web.

No início, você provavelmente digitará comandos errados e encontrará erros incompreensíveis. Mas cada um deles se tornará sua experiência. Com o terminal, você obterá uma velocidade e eficiência que nunca conseguiria com operações de GUI e, acima de tudo, a confiança de "desenvolver como um profissional" ao se tornar amigo do terminal.

Por favor, vá em frente e domine o terminal que você personalizou hoje como seu "melhor amigo" em sua futura criação de sites!