--- title: 'Intervalo: melhore seu editor de texto' summary: 'Conheça e baixe um editor de código como o Visual Studio Code, que oferece destaque de sintaxe e outros recursos feitos para programar.' permalink: 'intervalo-melhore-seu-editor-de-texto/' originalPath: /intermission-upgrade-your-text-editor/ tags: chapter layout: 'chapter.njk' --- # Intervalo: melhore seu editor de texto Você já foi longe. Vamos parar um segundo para reconhecer: você abriu um editor de texto simples e criou um site de verdade, escrevendo um pouco de HTML. Mandou bem! Falando em editores simples, manter a indentação certinha no HTML pode ser chato. Também pode ser difícil separar o código HTML do texto que a gente escreveu. ![Uma janela do Bloco de Notas mostrando o código HTML de "Blake's Homepage". A página tem um título, uma tag de imagem com a fonte "space.jpg" e o texto alternativo "Photograph of space with stars and stardust", e seções sobre hobbies e o gosto de ensinar, usando vários elementos HTML.](/assets/img/code-editor-1.webp) Não está terrível, mas a gente pode melhorar. Vamos baixar um editor feito para escrever código. {% aside 'Observação' %} Estou usando Windows nesta parte só por diversão, mas tudo que eu faço pode ser feito no Mac, no Windows e no Linux. {% endaside %} ## Baixe o Visual Studio Code Vá até . Este editor de código gratuito da Microsoft funciona no Mac, no Windows e no Linux. Ele pode fazer muita coisa, mas neste livro vamos manter o básico. Não deixe a captura agitada da página inicial te assustar. A gente não precisa de todos aqueles recursos avançados para o que estamos fazendo. Quando terminar de baixar e instalar o VS Code, abra-o. Talvez apareçam algumas telas de instrução. Depois, você vai ver uma tela assim: ![Captura de tela da tela de boas-vindas do Visual Studio Code. A barra lateral inclui opções como "Explorer," "Search," "Source Control," "Run" e "Extensions." A tela principal mostra a opção "Open Folder..." com guias para começar no VS Code e aprender o básico.](/assets/img/code-editor-2.webp) ## Abra o seu projeto Na tela de boas-vindas do VS Code, clique em _Open Folder_ e selecione a pasta do seu projeto web. Você vai ver os arquivos do site na barra lateral. Quando abrir o arquivo `index.html`, vai ver o código numa vista agradável, com números de linha e o que se chama _destaque de sintaxe_ — partes do código ganham cores para se diferenciar melhor das outras. ![Captura de tela do Visual Studio Code com o código HTML de "Blake's Homepage." A barra lateral esquerda mostra os arquivos do projeto. O editor principal mostra o mesmo código de antes, mas colorido para facilitar a distinção entre as partes.](/assets/img/code-editor-3.webp) O VS Code também ajuda a escrever código. Ele entende HTML e muitas outras linguagens. Quando você começa a digitar, ele sugere autocompletar. Você aceita clicando ou apertando Enter. Ele também indenta sozinho quando você cria uma linha nova, então você não precisa ficar inserindo tabs ou espaços na mão. O VS Code abre seus arquivos em abas. Isso fica conveniente depois, quando o site tiver várias páginas. {% aside 'Observação' %} Por padrão, o VS Code deixa linhas de texto saírem pela lateral da página. Se você preferir que o texto quebre para a linha seguinte, clique no menu _View_ e escolha _Word Wrap_. {% endaside %} ## Explore quando estiver pronto O VS Code pode fazer muitas coisas legais, mas o que cobrimos aqui já basta para começar. Pense nele como um Bloco de Notas mais caprichado. No fim das contas, ainda é só texto num arquivo. Começamos a jornada com o Bloco de Notas ou o TextEdit para mostrar que dá para fazer um site com ferramentas simples que você já tem no computador — sem mágica e sem programa caro. Dito isso, um editor de código deixa o processo de escrever HTML mais gostoso e mais fácil de gerenciar. E, quando você estiver pronto, pode explorar todos os recursos que o VS Code oferece. Também pode experimentar outros editores de código para ver de qual gosta. Por agora, vamos voltar a fazer o nosso site! ## A seguir Agora que melhoramos o editor de texto, vamos aprender a adicionar _estilo_ ao nosso site.