---
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é <https://code.visualstudio.com/>. 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.