Criar e gerar automaticamente arquivos no Visual Studio Code

Concluído

Assim como ocorre com a maioria das funcionalidades do Visual Studio Code, há muitas maneiras de criar e gerenciar arquivos. Nesta unidade, criaremos e editaremos um arquivo. Sugerimos que você crie uma pasta chamada intro-to-vscode no computador local e trabalhe nela. Embora você possa considerar isso como a pasta do projeto para este módulo, o Visual Studio Code não criará arquivos que não sejam os arquivos específicos necessários para esta lição, a menos que você crie um workspace, abordado ao final desta unidade.

Como usar o Explorer para gerenciar arquivos

O botão Explorer, mostrado abaixo, ativa e desativa a exibição do Explorer na barra lateral.

Explorer icon.

Você deverá ver o botão Abrir Pasta conforme mostrado aqui.

Open folder button.

Selecione esse botão e navegue para a pasta intro-to-vscode criada anteriormente.

Criar um arquivo HTML

Nesse caso, você provavelmente ainda não tem nenhum arquivo e, portanto, a pasta está vazia. Vamos resolver isso agora. Use o ícone Novo Arquivo, mostrado abaixo, para criar um arquivo na pasta atual. Observe que esse ícone não é exibido, a menos que você focalize o cursor do mouse sobre a parte do Explorer em que o nome da pasta está listado.

New File icon.

Nomeie o novo arquivo index.html e pressione Enter.

Usando o Emmet para criar o código

Agora você deverá ter um arquivo vazio chamado index.html aberto no editor e listado no Explorer. Se você começar a digitar um HTML válido, verá a codificação de cores aparecer conforme você trabalha. Em vez de digitar tudo manualmente, podemos usar o suporte interno do Emmet do Visual Studio Code para fazer muitas partes entediantes.

Na janela index.html vazia do editor, digite ! (ponto de exclamação) e, em seguida, selecione a tecla Tab. Isso instruirá o Emmet a preencher o HTML mínimo necessário para criar uma página da Web usando valores padrão, conforme mostrado abaixo.

HTML added by Emmet.

Pegamos uma linha direta para criar o HTML aqui, ignorando as funcionalidades opcionais do Emmet. Por exemplo, quando você digitar o ponto de exclamação, mas antes de digitar a tecla Tab, você verá algo semelhante ao mostrado a seguir.

Emmet info option.

Observe o pequeno i no círculo azul à direita, no qual você pode clicar para obter mais informações. Além disso, anote a localização da referência completa do Emmet em Emmet no Visual Studio Code. Você não precisa saber todos os detalhes neste momento, mas é útil ter uma ideia do escopo do Emmet e do que ele pode fazer para torná-lo mais eficiente.

Vamos voltar ao nosso novo arquivo que estamos editando. Observe as alterações na interface do usuário após a adição de conteúdo.

Unsaved file indicators.

Há um número 1 no ícone do Explorer na Barra de Atividades, o que significa que há um arquivo aberto que foi alterado, mas não salvo. Depois disso, há uma contagem das alterações não salvas no Explorer, ao lado do cabeçalho Editores Abertos. Por fim, o nome do arquivo na lista de editores abertos e a guia do editor para o próprio arquivo têm um ponto grande.

Todos esses vários indicadores são fornecidos para notificá-lo de que há alterações não salvas, para sua informação, independentemente de quais partes da interface do usuário você decide ocultar ou mostrar.

O salvamento manual de arquivos não é diferente do normal, no menu Arquivo ou usando atalhos de teclado. O Visual Studio Code também tem um recurso de salvamento automático de arquivo que pode ser habilitado, que está no menu Arquivo. (Como alternativa, clique em F1, comece a digitar "salvamento automático" e selecione Arquivo: Ativar/Desativar Salvamento Automático).

Realce de sintaxe nas extensões internas

Vamos dar uma olhada na lista de extensões internas. Essas são as extensões que vêm pré-instaladas no Visual Studio Code e que não são exibidas na lista normal de extensões instaladas. Para exibir as extensões internas, selecione o ícone de reticências (...) na área Filtrar Extensões e escolha Mostrar Extensões Internas. O tamanho dessa lista pode surpreendê-lo. Reserve um momento para percorrer os vários itens e ter uma noção do que já está aqui.

Observação

Há extensões de realce de sintaxe para muitas linguagens, como o HTML já interno. Talvez você tenha observado essa extensão específica no trabalho na seção anterior quando adicionou o HTML com o Emmet.

Usando um workspace para organizar o projeto

Embora não seja necessário, você pode optar por trabalhar no constructo do workspace, caso esteja trabalhando com vários arquivos ao mesmo tempo. Isso não é nada mais do que um ambiente de trabalho que contém todas as configurações e todos os arquivos desejados para determinado projeto. Se você criar um workspace, precisará nomeá-la e salvá-lo na localização de sua escolha. Não abordaremos os workspaces detalhadamente aqui. Caso deseje saber mais, confira Workspaces de várias raízes na Documentação do Visual Studio Code.