Visual Studio Code (VSCode)

vscode é o editor de código que utilizaremos ao longo do ano em ICC. Ele suporta diversas linguagens e extensões de arquivo.
Onde baixar o vscode? Clique aqui para fazer download do Visual Studio Code (vscode)
Na nossa disciplina, trabalharemos com 3 linguagens: HTML (extensão de arquivo .html), CSS (extensão .css) e JavaScript (extensão .js). No início da matéria, utilizaremos apenas arquivos .html

Atalhos

Os atalhos de teclado são úteis para agilizar o uso do computador e a escrita de código. Os atalhos mais comuns são:

Ctrl + N Novo arquivo
Ctrl + S Salvar arquivo
Alt + Z Desativar rolagem lateral (ou seja, você não vai precisar rolar a tela para o lado para ver todo o seu código; é o que uso quando projeto o vscode nas aulas)

Extensões

Uma das vantagens do vscode é permitir a instalação de extensões, que deixam o uso do programa ainda mais cômodo. Vou incluir os nomes das extensões que utilizo:

vscode-icons Inclui ícones diferenciados para cada extensão de arquivo
Prettier - Code Formatter Indentação automática de código
Rainbow Brackets Deixa os parênteses, chaves e colchetes de cores diferentes (bom para escrever expressões que têm muitos parênteses, pois facilita conferir se todos estão fechados)
Auto Rename Tag Ao renomear uma tag, o seu respectivo fechamento é automaticamente renomeado.
Portuguese (Brazil) Language Pack for Visual Studio Code Deixa o vscode em português
Ballerini Theme Tema escuro que uso (o mesmo que aparece nos prints abaixo)

Como instalar extensões?

No menu lateral, clicar no ícone ícone extensão

Buscar pelo nome da extensão na caixa de busca:
busca extensão
Clicar em Instalar ou Install (depende do idioma que estiver)

Esqueleto do HTML

Uma das facilidades do vscode é uma extensão chamada Emmet, que já vem instalada (não precisa incluir) e que auxilia com a escrita de códigos repetitivos por meio de abreviações.

A mais comum é a exclamação para preencher o "esqueleto" do html. Basta fazer a exclamação e dar enter em um arquivo já salvo como HTML (assim o programa reconhece a linguagem e traz a abreviação correta)
Esqueleto com abreviação Emmet

Como abrir meu HTML?

Para visualizar a página que você está fazendo, clique com o botão direito no nome do arquivo, na aba superior, e vá em "Revelar no explorador de arquivos" ou "Reveal in file explorer":
Menu explorador de arquivos

Isso vai abrir a pasta exata em que o arquivo está localizado, e o arquivo vai aparecer selecionado. Basta dar um duplo clique que ele vai abrir no navegador:
Arquivo selecionado

Fechei meu HTML no vscode e quero abrir de novo para editar o código

Neste caso, você tem que estar com a pasta onde o arquivo está aberta. Encontre o arquivo, clique com o botão direito e vá em Abrir Com... Visual Studio Code