11 KiB
Usando um editor de código
Esta lição aborda os conceitos básicos de como usar o VSCode.dev, um editor de código baseado na web, para que você possa fazer alterações no seu código e contribuir com um projeto sem precisar instalar nada no seu computador.
Objetivos de aprendizado
Nesta lição, você aprenderá a:
- Usar um editor de código em um projeto de programação
- Acompanhar alterações com controle de versão
- Personalizar o editor para desenvolvimento
Pré-requisitos
Antes de começar, você precisará criar uma conta no GitHub. Acesse GitHub e crie uma conta, caso ainda não tenha uma.
Introdução
Um editor de código é uma ferramenta essencial para escrever programas e colaborar em projetos de programação existentes. Assim que você entender os conceitos básicos de um editor e como aproveitar seus recursos, poderá aplicá-los ao escrever código.
Começando com o VSCode.dev
O VSCode.dev é um editor de código na web. Você não precisa instalar nada para usá-lo, é como abrir qualquer outro site. Para começar, abra o seguinte link: https://vscode.dev. Se você não estiver conectado ao GitHub, siga as instruções para fazer login ou criar uma nova conta e, em seguida, faça login.
Depois de carregar, ele deve se parecer com esta imagem:
Existem três seções principais, da esquerda para a direita:
- A barra de atividades, que inclui alguns ícones, como a lupa 🔎, a engrenagem ⚙️ e outros.
- A barra de atividades expandida, que por padrão exibe o Explorador, chamada de barra lateral.
- E, finalmente, a área de código à direita.
Clique em cada um dos ícones para exibir um menu diferente. Quando terminar, clique no Explorador para voltar ao ponto de partida.
Quando você começar a criar ou modificar código existente, isso acontecerá na maior área à direita. Você também usará essa área para visualizar o código existente, o que será feito a seguir.
Abrir um repositório do GitHub
A primeira coisa que você precisará fazer é abrir um repositório do GitHub. Existem várias maneiras de abrir um repositório. Nesta seção, você verá duas formas diferentes de abrir um repositório para começar a trabalhar nas alterações.
1. Com o editor
Use o próprio editor para abrir um repositório remoto. Se você acessar VSCode.dev, verá um botão "Open Remote Repository":
Você também pode usar a paleta de comandos. A paleta de comandos é uma caixa de entrada onde você pode digitar qualquer palavra que faça parte de um comando ou ação para encontrar o comando correto a ser executado. Use o menu no canto superior esquerdo, selecione View e, em seguida, escolha Command Palette, ou use o atalho de teclado: Ctrl-Shift-P (no MacOS seria Command-Shift-P).
Quando o menu abrir, digite open remote repository e selecione a primeira opção. Vários repositórios dos quais você faz parte ou que abriu recentemente aparecerão. Você também pode usar uma URL completa do GitHub para selecionar um. Use a seguinte URL e cole na caixa:
https://github.com/microsoft/Web-Dev-For-Beginners
✅ Se for bem-sucedido, você verá todos os arquivos deste repositório carregados no editor de texto.
2. Usando a URL
Você também pode usar uma URL diretamente para carregar um repositório. Por exemplo, a URL completa para o repositório atual é https://github.com/microsoft/Web-Dev-For-Beginners, mas você pode substituir o domínio do GitHub por VSCode.dev/github e carregar o repositório diretamente. A URL resultante seria https://vscode.dev/github/microsoft/Web-Dev-For-Beginners.
Editar arquivos
Depois de abrir o repositório no navegador/vscode.dev, o próximo passo será fazer atualizações ou alterações no projeto.
1. Criar um novo arquivo
Você pode criar um arquivo dentro de uma pasta existente ou na pasta/diretório raiz. Para criar um novo arquivo, abra o local/diretório onde deseja salvar o arquivo e selecione o ícone 'New file ...' na barra de atividades (à esquerda), dê um nome ao arquivo e pressione Enter.
2. Editar e salvar um arquivo no repositório
Usar o vscode.dev é útil sempre que você quiser fazer atualizações rápidas no seu projeto sem precisar carregar nenhum software localmente.
Para atualizar seu código, clique no ícone 'Explorer', também localizado na barra de atividades, para visualizar os arquivos e pastas no repositório.
Selecione um arquivo para abri-lo na área de código, faça suas alterações e salve.
Depois de terminar de atualizar seu projeto, selecione o ícone source control, que contém todas as novas alterações feitas no repositório.
Para visualizar as alterações feitas no projeto, selecione o(s) arquivo(s) na pasta Changes na barra de atividades expandida. Isso abrirá um 'Working Tree' para você visualizar as alterações feitas no arquivo. Vermelho indica uma exclusão no projeto, enquanto verde indica uma adição.
Se estiver satisfeito com as alterações feitas, passe o mouse sobre a pasta Changes e clique no botão + para preparar as alterações. Preparar significa simplesmente preparar suas alterações para enviá-las ao GitHub.
Se, no entanto, você não estiver confortável com algumas alterações e quiser descartá-las, passe o mouse sobre a pasta Changes e selecione o ícone de desfazer.
Depois, digite uma mensagem de commit (uma descrição das alterações feitas no projeto), clique no ícone de check para confirmar e enviar suas alterações.
Quando terminar de trabalhar no projeto, selecione o ícone de menu hambúrguer no canto superior esquerdo para retornar ao repositório no github.com.
Usando extensões
Instalar extensões no VSCode permite adicionar novos recursos e opções de personalização ao ambiente de desenvolvimento no editor, melhorando seu fluxo de trabalho. Essas extensões também ajudam a adicionar suporte para várias linguagens de programação e geralmente são genéricas ou específicas para uma linguagem.
Para navegar pela lista de todas as extensões disponíveis, clique no ícone Extensions na barra de atividades e comece a digitar o nome da extensão no campo de texto rotulado como 'Search Extensions in Marketplace'.
Você verá uma lista de extensões, cada uma contendo o nome da extensão, o nome do publicador, uma descrição de uma frase, o número de downloads e uma classificação por estrelas.
Você também pode visualizar todas as extensões previamente instaladas expandindo a pasta Installed, extensões populares usadas pela maioria dos desenvolvedores na pasta Popular e extensões recomendadas para você, seja por usuários no mesmo workspace ou com base nos arquivos abertos recentemente, na pasta Recommended.
1. Instalar extensões
Para instalar uma extensão, digite o nome da extensão no campo de busca e clique nela para visualizar informações adicionais na área de código assim que ela aparecer na barra de atividades expandida.
Você pode clicar no botão azul de instalar na barra de atividades expandida para instalar ou usar o botão de instalação que aparece na área de código ao selecionar a extensão para carregar informações adicionais.
2. Personalizar extensões
Depois de instalar a extensão, talvez seja necessário modificar seu comportamento e personalizá-la de acordo com suas preferências. Para fazer isso, selecione o ícone Extensions e, desta vez, sua extensão aparecerá na pasta Installed. Clique no ícone de engrenagem e navegue até Extensions Setting.
3. Gerenciar extensões
Depois de instalar e usar sua extensão, o vscode.dev oferece opções para gerenciá-la com base em diferentes necessidades. Por exemplo, você pode:
-
Desativar: (Você pode desativar temporariamente uma extensão quando não precisar mais dela, mas não quiser desinstalá-la completamente)
Selecione a extensão instalada na barra de atividades expandida > clique no ícone de engrenagem > selecione 'Disable' ou 'Disable (Workspace)' OU abra a extensão na área de código e clique no botão azul Disable.
-
Desinstalar: Selecione a extensão instalada na barra de atividades expandida > clique no ícone de engrenagem > selecione 'Uninstall' OU abra a extensão na área de código e clique no botão azul Uninstall.
Tarefa
Crie um site de currículo usando vscode.dev
Revisão e Autoestudo
Leia mais sobre o VSCode.dev e alguns de seus outros recursos.
Aviso Legal:
Este documento foi traduzido utilizando o serviço de tradução por IA Co-op Translator. Embora nos esforcemos para garantir a precisão, esteja ciente de que traduções automatizadas podem conter erros ou imprecisões. O documento original em seu idioma nativo deve ser considerado a fonte autoritativa. Para informações críticas, recomenda-se a tradução profissional realizada por humanos. Não nos responsabilizamos por quaisquer mal-entendidos ou interpretações equivocadas decorrentes do uso desta tradução.