VSCode: aprendendo dicas e truques

Entendendo o VSCode do zero - Apresentação

Boas-vindas ao curso de VSCode: aprendendo dicas e truques!

Leonardo Sartorello é um é uma pessoa de pele clara, com olhos azuis e cabelos castanhos escuros e curtos, e possui barba e cavanhaque. Veste camiseta preta e lisa, e está sentado em uma cadeira preta. Ao fundo, há uma parede branca e lisa com uma iluminação azul gradiente.

O Visual Studio Code é uma IDE (Integrated Development Environment, em português "ambiente de desenvolvimento integrado") bastante usada atualmente, com diversas opções de atalhos e customizações.

Começaremos abrindo o VSC, e perceba que ao abrir temos na parte central da tela o título "Visual Studio Code" e um subtítulo "Editing envolved" ("Edição envolvida"), com uma seção "Start", "Recent" e "Getting Started" ("começando").

Para começarmos a escrever o código, podemos clicar em "New file" ("novo arquivo") ou em "Open folder" ("nova pasta"), na seção "Start".

No caso, clicaremos em "Open folder" e escolheremos a opção "Alura + VSC". Após selecioná-la, perceba que do lado esquerdo do VSC, em "Explorer", temos os arquivos referentes à pasta que acabamos de escolher. O explorer é onde ficam organizados os arquivos e os editores.

Perceba que do lado direito da pasta Alura + VSC, temos alguns ícones referentes a algumas opções, sendo elas: "New file" ("Novo arquivo"), "New folder" ("Nova pasta"), "Refresh explorer" ("Atualizar explorador") e "Collapse Folders in Explorer" ("Recolher pastas no Explorer").

Clicaremos no primeiro ícone "New folder", e note que abaixo da pasta aparece uma caixa de texto para preenchermos. Para nomear a nossa nova pasta, digitaremos "app.js" e apertaremos a tecla "Enter".

Dessa forma, em "Explorer", ficamos com as seguintes pastas:

• Alura + VSC
  • app.js

Após criar a pasta, seremos redirecionados para uma aba com um editor sem nada escrito, em um arquivo chamado app.js. Assim, temos a aba "Getting Started", sendo por onde começamos e, a que acabamos de criar com o arquivo app.js.

Podemos clicar no xis ("X") do lado direito da aba "Getting Started", para fechar. Agora, ficamos somente com a aba com o nosso arquivo.

Iniciaremos um código com uma variável, por ser um arquivo .js significa que é um arquivo JavaScript, portanto usaremos o const.

app.js

const

Assim que começarmos a digitar, aparece uma aba de sugestões: const, constantSourceNode, CountQueuingStrategy, etc. Serve para nos auxiliar quando estivermos escrevendo o nosso código.

Escolheremos a primeira opção const mesmo, e queremos uma const nome igual a "leo". Isso para ser uma string.

app.js

const nome = "leo"

Temos um nome. Mas não queremos mais esse const nome, podemos removê-la e no lugar dela desejamos inserir um console log. Porém, perceba que ao removermos não aparece a caixa de sugestões.

cons

Para essa caixa de sugestões aparecer, podemos apertar as teclas "Ctrl + Espaço". Perceba que agora aparece as opções: console, const, constantSourceNode, etc. Podemos apertar "Enter" para escolher a opção "console".

No caso, queremos o console.log, mas se quisermos o timeLog, podemos manipular a caixa de sugestões apertando a tecla que contém uma seta apontando para cima e a outra para baixo, para ir uma por uma das opções.

console.log()

Porém, quais são as linguagens de programação que o Visual Studio Code (VSC) suporta? Observando o canto inferior direito, note que consta "JavaScript", isso por o arquivo ser .js, detectado de forma automática.

Clicando em "JavaScript", nos exibe todas as linguagens aceitas pelo VSC. Dentre elas, temos: C, C#, C++, CSS, Docker, HTML, Go, JSON, Markdown, Python, Ruby, entre várias outras linguagens disponíveis.

No caso, manteremos em JavaScript. Porém, se fôssemos escrever um código completo no Alura+, ficaria muito grande. Por isso, vamos colar um script pronto, que deixaremos em uma das nossas atividades para você copiar.

Primeiro, vamos copiar esse código, porque não queremos alterar o arquivo source.js em específico. Perceba que abriu uma aba chamada "source.js", sendo o arquivo com o código pronto.

Para copiar o código completo, podemos usar o atalho "Ctrl + A" para selecionar tudo, e depois "Ctrl + C", para copiar. Logo após, vamos clicar na aba "app.js" e colaremos no arquivo app.js, que está sem nada.

Assim, temos um código dentro do nosso editor.

Vamos continuar no próximo vídeo. Te espero lá!

Entendendo o VSCode do zero - Executando o código

A primeira coisa que faremos com esse código, é executá-lo. Porém, navegar de pasta em pasta dentro do console é um pouco complexo.

Para resolver, o VSC nos auxilia nisso, por ter um terminal integrado. Clicaremos em "Terminal" no menu superior e depois escolheremos a opção "New Terminal" ("Novo Terminal").

Perceba que na parte inferior do VSC é aberto um terminal com as seguintes abas, à esquerda: problems ("problemas"), output ("resultado") e debug console ("console de depuração").

Após abrirmos o terminal, podemos executar o código. Para isso, usaremos o comando node com o nome do arquivo, no caso app.js. Em seguida, apertamos a tecla "Enter" para rodar.

node app.js

Não retornou nada, e isso aconteceu porque não salvamos o código. O VSC não salva os códigos de forma automática, precisamos fazer isso manualmente.

Podemos visualizar isso no canto superior esquerdo, abaixo de "Explorer", do lado direito de "open editors" ("editores abertos"), em que temos uma mensagem "1 unsaved" ("1 não salvo").

Do lado esquerdo do arquivo app.js, em que normalmente temos em xis ("X"), consta uma bolinha ("•"): • app.js. Isso significa que o arquivo não foi salvo!

Para salvá-la, podemos selecionar as teclas "Ctrl + S" ou ir em "File > Save", na canto superior esquerdo.

Depois de salvar, voltaremos ao terminal para executar novamente o comando node app.js.

8

[ 1 ]

Temos dois retornos, um número 8 e um array com o número 1 contido nele.

Agora, vamos analisar o que o código executa.

// idades = [30, 35, 28]
// nomes = ["Ana", "Juliana", "Leonardo"]
// faculdade = {false,true,false}

// funcionarios = [nomes,idades,faculdade]

// function eMaiorQue10(value) {
//     retunr value >= 10;
//   }

// var filtrado = numeros.filter(eMaiorQue10);
// // filtrado é [12, 130, 44]

// console.log(filtrado)

const notas1 =    [10, 6.5   , 8, 7.5]
const notas2 =   [9, 6, 6 ]
const notas3 = [8.5,    9.5]


    const notasGerais = [notas1, notas2, notas3]
    
  let media = 0
  
for (let i = 0; i < notasGerais.length;i++) {
      for(let j = 0; j < notasGerais[i].length; j++) {
    media += notasGerais[i][j] / notasGerais[i].length
    }
}

media = media / notasGerais.length

console.log(   media      )

function teste(   ) {
  return    10
  console.log(   "retornou")
}

let TextoDeQuebraDeLinha = "Oi, tudo bem? Eu sou o Leonardo, esse texto é longo mesmo para podermos testar a quebra de linha"

array = [ ]
array.push(1 )
console.log(array)

let texto = ["oi","ok"]

Iniciamos com um array, com as notas1, notas2 e notas3. Logo após, temos uma const notasGerais, sendo um array de duas dimensões e um let media = 0.

Perceba que a indentação deste código está errada, há espaços demais. Temos um for dentro de outro for, que aparentemente está com a indentação correta, e outros códigos na parte de baixo.

Para arrumar essa indentação e espaços inadequados, clicaremos com o botão direito do mouse no corpo do arquivo app.js e selecionaremos a opção "Format Document" ("Formatar Documento"), em que o atalho é "Shift + Alt + F".

arquivo app.js após arrumarmos a indentação:

const notas1 = [10, 6.5, 8, 7.5]
const notas2 = [9, 6, 6]
const notas3 = [8.5, 9.5]

const notasGerais = [notas1, notas2, notas3]

let media = 0

for (let i = 0; i < notasGerais.length; i++) {
    for (let j = 0; j < notasGerais[i].length; j++) {
        media += notasGerais[i][j] / notasGerais[i].length;
    }
}

media = media / notasGerais.length

console.log(media)

function teste() {
    return 10
    console.log("retornou")
}

let TexteDeQuebraDeLinha = "Oi, tudo bem? Eu sou o Leonardo, esse texto é longo mesmo para podermos testar a quebra de linha"

array = []
array.push(1)
console.log(array)

let texto = ["oi", "ok"]

Perceba que o código está mais legível e sem espaços desnecessários. Perceba que na linha 42, temos um texto bem comprido, em que precisamos usar a rolagem horizontal para conseguirmos ler por completo.

Para conseguirmos ler tudo de uma forma mais organizada, usaremos a quebra de linha. Para isso, usaremos o menu superior e escolhemos as opções "View > Word Wrap", ou usaremos o atalho "Alt + Z".

app.js

// código omitido

let TexteDeQuebraDeLinha = "Oi, tudo bem? Eu sou o Leonardo, esse texto é longo 
mesmo para podermos testar a quebra de linha"

// código omitido

Assim, uma parte do texto é redirecionada para a próxima linha. Perceba que na linha 42 temos o começo do texto, e a linha seguinte não contém numeração, e a linha 43 está vazia.

Essa linha não contém numeração, porque ela é continuação da linha 42, o texto completo está nessa linha. Mas estamos visualizando a linha quebrada para conseguirmos ler por completo.

Salvaremos o arquivo e o executaremos novamente para verificarmos se não quebramos o código. Para isso, vamos ao terminal mais uma vez e rodar o comando node app.js.

8

[ 1 ]

Como temos o mesmo retorno, tudo continua correto.

Outro detalhe interessante é na linha 39, console.log("retornou"). Perceba que aparece "apagado", enquanto o restante do código possui cores mais destacadas.

Colocando o mouse sobre essa linha, é exibida a mensagem "Unreachable code detected" ("Código inacessível detectado"), que significa que o código dessa linha não é executado.

Para resolvermos isso, clicaremos na linha e pressionaremos as teclas "Ctrl + .", abrindo o menu "Quick fix" (reparo rápido), que sugerirá remover essa linha, remove unreachable code.

Como não queremos removê-la, mas sim executá-la, precisaremos encontrar outra alternativa - por exemplo, colocá-la antes do return da função teste() já que essa instrução encerra a execução da função.

Poderíamos fazer isso manualmente, recortando e colando o código. Mas há outra forma: com o cursor sobre a linha, seguraremos a tecla "Alt" e pressionaremos a tecla para cima do teclado.

Perceba que a parte do código console.log("retornou") foi movido uma linha para cima:

//código omitido

function teste() {
    console.log("retornou")
    return 10
}

//código omitido

Salvaremos o arquivo e o executaremos novamente, executando o comando node app.js.

8

[ 1 ]

Perceba que seguimos sem receber nada de retorno, isso acontece porque a função teste() não é chamada. Para resolver isso, incluiremos a chamada da função no código, após o console.log(media).

//código omitido

console.log(media)

teste()

function teste() {
    console.log("retornou")
    return 10
}

//código omitido

Após incluir essa chamada da função, salvaremos o código e executaremos o comando node app.js, mais uma vez. Como retorno, teremos:

8

retornou

[ 1 ]

Nosso resultado mudou, antes era apenas o número 8 e o [1]. Vamos verificar se teve alguma alteração.

Para isso, usaremos o atalho "Alt + seta para baixo" no teclado para descermos o console.log("retornou") para a linha original.

//código omitido

function teste() {
    return 10
    console.log("retornou")
}

//código omitido

Podemos salvar e executar comando node novamente. Voltaremos a ter o retorno anterior, isto é, realmente funcionou.

8

[ 1 ]

Portanto, se quisermos mover a linha precisamos apertar e segurar o "Alt" e se for para cima, apertar a tecla para cima do teclado; se for para baixo, basta selecionar a tecla para baixo do teclado.

Neste vídeo era isso, espero que tenha gostado. Até mais!

Entendendo o VSCode do zero - Códigos e erros

No momento de criarmos o código, podemos cometer erros, como o de sintaxe.

Para testarmos esse erro, vamos incluir o sinal de mais ("+") sozinho em uma linha, para gerar o erro. Colocaremos no final do arquivo.

//código omitido

array = []
array.push(1)
console.log(array)

let texto = ["oi", "ok"]

+

Note que o VSC sublinha esse sinal de mais, destacando-o.

Além disso, do lado esquerdo, repare que o nome do arquivo app.js será destacado na cor vermelha, tanto no menu "Open Editors" quanto na aba aberta, com o número "1" ao lado do nome, que indica o número de erros.

No canto superior direito do VSC, temos também um pequeno resumo do código, que inclui uma linha vermelha no ponto em que colocamos o sinal de mais ("+"); e na barra de rolagem um traço será exibido na altura do erro.

Neste arquivo está fácil de encontrarmos o erro, já que fomos nós que incluímos. Porém, em códigos maiores, pode ser mais difícil de encontrar os erros.

Para resolver isso, usaremos o atalho "F8" para navegarmos diretamente ao próximo erro, indicando qual o erro. Perceba que no nosso caso, foi exibida a mensagem "expression expected" ("expressão esperada"), isso significa que o JavaScript espera uma expressão.

Vamos remover o sinal de mais que incluímos na linha para gerar o erro. Perceba que ao apagarmos o erro, a mensagem "expression expected" fica mais escura, isso quer dizer que o problema foi resolvido.

Podemos fechar a caixa de diálogo com a mensagem clicando no xis ("X"), do lado superior direito.

O VSC também nos traz outras funcionalidades que nos auxiliam no desenvolvimento. Vamos começar passando pelo array texto usando o comando for.

Note que ao escrevermos for, já aparece a caixa de sugestões: for, for loop, foreach, forin, forof, etc.

//código omitido

let texto = ["oi", "ok"]

for ()

Vamos remover o parêntese e voltar somente para o for.

A estrutura do comando for é bem conhecida, e não precisamos montá-la manualmente. Por isso, escreveremos for e usaremos o atalho "Ctrl + Espaço", para abrir a caixa de sugestões.

Selecionaremos a opção "For Loop". Ela é na verdade um snippet ("trecho"), isto é, um trecho de código pronto para usar. Ao clicarmos, toda a estrutura do for será montada no editor:

//código omitido

let texto = ["oi", "ok"]

for (let index = 0; index < array.length; index++) {
    const element = array[index];
}

Note que ele cria uma variável index com valor inicial 0, faz uma comparação e incrementa o index. Particularmente, não gosto de chamar a variável iterada de index, mas sim de i.

Como acabamos de criar a estrutura, todas as palavras index estarão selecionados, e poderemos simplesmente pressionar a letra (ou palavra) desejada para substituí-lo, alterando todas as ocorrências automaticamente.

//código omitido

let texto = ["oi", "ok"]

for (let i = 0; i < array.length; i++) {
    const element = array[i];

}

Agora, vamos alterar o array, afinal desejamos percorrer o array texto. Se selecionarmos uma das palavras "array" e começarmos a digitar, o outro não será alterado.

Isso é possível de fazermos se selecionarmos a palavra desejada e apertar o atalho "Ctrl + F2", que seleciona todas as vezes que a palavra aparece no código. Porém, não é isso que queremos, já que alteraríamos em trechos do código que não desejamos modificar.

Outra opção é selecionar a palavra desejada e pressionar o atalho "Ctrl + D", para selecionar a próxima ocorrência dela. Podemos repetir isso até selecionarmos todas as ocorrências desejadas dessa palavra.

Ao chegar no final, ele retorna para a primeira ocorrência da palavra,e percorre o código novamente. Vamos selecionar somente as duas ocorrências de array em nosso loop.

//código omitido

let texto = ["oi", "ok"]

 for (let i = 0; i < texto.length; i++) {
     const element = texto[i];

 }

Contudo, a palavra texto não é intuitiva, talvez seja melhor substituirmos ela por outra. Para fazer isso, selecionaremos a variável texto, na linha 50, e pressionaremos "F2". Isso abrirá uma caixa de texto que nos permitirá alterar o nome da variável - nesse caso, digitaremos PalavrasSimples.

Ao pressionarmos a tecla "Enter", todas as ocorrências da variável texto serão alteradas para PalavrasSimples.

//código omitido

let PalavrasSimples = ["oi", "ok"]

 for (let i = 0; i < PalavrasSimples.length; i++) {
     const element = PalavrasSimples[i];

 }

Outra opção é a variável media, no início do código:

console.log(media)

Ao escrevermos o código, podemos nos perguntar como uma variável começou para entendermos o contexto dela. Nesse cenário, temos um código bastante enxuto, logo isso pode ser fácil. Contudo, em códigos maiores é capaz de nos perdermos.

Para nos ajudar nisso, selecionaremos a tecla "F12" para sermos direcionados para a declaração da variável, sendo a let media = 0.

Agora, desejamos colocar esse código em produção, isto é, subi-lo em um servidor e disponibilizá-lo para uso. Quando as pessoas usarem, queremos ter somente as saídas numéricas, e não o texto "retornou".

Para ajustar isso, podemos remover a linha referente a essa saída. Para isso, selecionamos a linha e apertamos o backspace ou usamos o atalho "Ctrl + Shift + K", que apaga a linha sem que nos preocupemos com as linhas adjacentes.

Linha a ser removida:

console.log("retornou")

Nesta aula era isso, espero que tenham gostado. Até mais!

Sobre o curso VSCode: aprendendo dicas e truques

O curso VSCode: aprendendo dicas e truques possui 33 minutos de vídeos, em um total de 19 atividades. Gostou? Conheça nossos outros cursos de Node.JS em Programação, ou leia nossos artigos de Programação.

Matricule-se e comece a estudar com a gente hoje! Conheça outros tópicos abordados durante o curso:

• Entendendo o VSCode do zero
• Conhecendo as ferramentas do VSCode