Solucionado (ver solução)
Solucionado
(ver solução)
2
respostas

[Dúvida] Como resolver os desafios no VS Code?

Como ainda não vimos como criar um arquivo em JS do zero (só temos os pacotes zip pra baixar já com o app.js, index.html,etc.), estou usando o playground para poder escrever os códigos dos desafios e checar se funcionam*.

Mas gostaria de aprender a criar um código JS "do zero", para poder testar os códigos no próprio Visual Studio Code. Percebi que é necessário pelo menos criar também um index.html para eu poder abrir no navegador, mas o que esse arquivo deve conter?

Tentei buscar no google essa solução, mas só acho respostas com o código do arquivo js e não as informações do index.html.

A quem puder responder essa dúvida, agradeço. <3

*Mas uso alert no código em vez de console.log a depender do exercício, pois só assim consigo visualizar os resultados.

2 respostas
solução!

Oi, Ligia! Tudo bem?

Para realizarmos os desafios e visualizarmos as nossas respostas no navegador devemos inicialmente criar uma pasta no nosso computador, após isso podemos abrir essa pasta no VSCode da seguinte forma:

Gif mostrando uma pasta vazia aberta no computador, em seguida, clicamos no endereço da pasta, localizado na sua parte superir, e difitamos o comando cmd, após isso, é aberto o prompt de comando na tela e digitamos "code ." , abrindo assim o ambiente do VSCode.

Aqui, abrimos a nossa pasta, clicamos no caminho da pasta, que fica localizado na sua parte superior e em seguida digitamos "cmd" e clicamos em enter, abrindo assim o nosso prompt de comando. No prompt basta, então, digitarmos "code ." e apertarmos a tecla enter para abrir a nossa pasta no VSCode.

Após isso, precisamos criar uma pasta clicando no ícone de New File do VSCode, como podemos visualizar abaixo:

Captura de tela da IDE Visual Studio Code, onde podemos visualizar o ícone New File disponível na pasta DESAFIOS para ser clicado.

Dessa forma, devemos criar um arquivo html que podemos chamar de index.html. No corpo desse arquivo podemos, então, colocar nosso código entre as tags <script> e </script> e salvarmos nosso projeto clicando em CTRL + S, como podemos observar na imagem abaixo:

Captura de tela da IDE Visual Studio Code, onde podemos visualizar o arquivo index.html e um código JavaScript dentro de uma tag script do html.

Por fim, basta abrirmos o nosso documento html no navegador, para isso podemos apenas entrar na pasta em que ele está salvo no nosso computador e clicar no arquivo duas vezes.

Espero ter ajudado! Caso tenha ficado alguma dúvida, sinta-se à vontade em comunicar, estou à disposição!

Um forte abraço e bons estudos!

Caso este post tenha te ajudado, por favor, marcar como solucionado ✓

Muito obrigada, Sarah!!!

Deu certo aqui :D

Só tive que instalar o code no PATH pra poder abrir a pasta usando "code .", pois estou usando o macOS.

Vou deixar aqui essas instruções, caso mais alguém precise delas: captura de tela de solucao no stack overflow

(Para quem está usando macOS, siga as instruções abaixo, antes de seguir os passos dados pela Sarah)

  1. Abra o Visual Studio Code
  2. Abra a paleta de comando com CMD+SHIFT+P (ou F1)
  3. Escreva "Shell" na paleta de comando
  4. Selecione "Shell Command: Install code in PATH" dentre as opções sugeridas
  5. Abra o Finder e escolha onde irá criar a nova pasta*
  6. Crie a nova pasta, clique nela com o botão direito e escolha "New Terminal at Folder" (Novo terminal na pasta), conforme a imagem abaixo:

captura de tela mostrando o finder do macOS

Uma janela do terminal se abrirá e, agora sim, é possível abrir a pasta no VS Code usando "code ." \o/

*É possível criar uma nova pasta diretamente do terminal, mas optei por não deixar essas instruções aqui.

captura de tela mostrando o terminal