Tudo o que você precisa saber para tornar seu desenvolvimento mais prático dentro do VSCode.

Transcrição da aula

Olá! Eu sou o Leonardo e nesse Alura+ vou apresentar para vocês um pouco do Visual Studio Code, também conhecido como VSCode ou VSC. O Visual Studio Code é uma IDE muito utilizada atualmente e com várias opções de atalhos e customizações.

Com o VSCode aberto, começaremos a escrever código. Para isso, podemos criar um novo arquivo ou abrir uma pasta. Nesse caso, vou abrir uma pasta, o que facilita mantermos o código organizado. A pasta será criada no diretório "Documentos/Alura/Alura+ VSC".

Não teremos nenhuma mudança visual grande, não abrimos nenhum editor e ainda não podemos escrever nenhum código. Isso porque ainda não temos um arquivo onde escrever esse código. Do lado esquerdo da tela, temos o "Explorer" do VSCode, que é onde ficam organizados nossos arquivos e editores.

Dentro dos arquivos, temos a pasta "Alura+ VSC", onde estará o nosso código. Passando o mouse sobre esse menu, veremos algumas opções:

• New File (novo arquivo)
• New Folder (nova pasta)
• Refresh Explorer (para atualizar o Explorer, por exemplo quando colocamos um arquivo por fora e ele não é detectado automaticamente)
• Collapse Folders in Explorer (minimizar pastas no Explorer)

Clicaremos em "New File" e, na caixa de texto que se abriu, digitaremos o nome do arquivo: app.js. O arquivo será criado e uma nova aba se abrirá no editor de código. Tínhamos outra aba aberta, "Getting Started", que podemos fechar.

Começaremos criando uma variável. Como nosso arquivo é um .js, trabalharemos com Javascript. Ao começarmos a digitar const, uma caixa de sugestões será exibida, algo que pode nos ajudar a escrever o código.

Criaremos a const nome com o valor igual a leo.

const nome = "leo"

Podemos mudar de ideia e, ao invés dessa const, fazer um console.log. Se apagarmos parte do nosso código, veremos que a caixa de diálogo não se abrirá novamente. Para que ela apareça, apertamos o comando "Ctrl + Espaço". Utilizando o "Enter", selecionaremos a palavra console e continuaremos o preenchimento com console.log(). Se quiséssemos o console.timeLog(), poderíamos nos dirigir a ele utilizando as setas para cima e para baixo.

Mas além do Javascript, que outras linguagens de programação o VSCode suporta? No canto inferior direito da IDE, veremos a palavra "Javascript" como linguagem selecionada - isso porque estamos trabalhando com um arquivo .js e ele fez a detecção automaticamente.

Se clicarmos nessa opção, abriremos um menu com todas as linguagens que podemos utilizar dentro do Visual Studio Code, dentre elas C, C++, Docker (dockerfile), Go, JSON, Lua, Markdown, dentre outras várias possibilidades. Vamos continuar trabalhando com Javascript.

Se fôssemos escrever um código completo nesse Alura+, ele seria muito longo. Ao invés disso, pegaremos um código pré-preparado e o copiaremos para o arquivo app.js. Usaremos "Ctrl + A" para selecionar o conteúdo de source.js, "Ctrl + C" para copiá-lo e "Ctrl + V" para copiá-lo" no nosso arquivo.

A primeira coisa que faremos é executar esse código. Porém, navegar pelas pastas dentro do console é um pouco trabalhoso. O Visual Studio Code também nos ajuda com isso, pois possui um terminal integrado. Abriremos o menu "Terminal" na parte superior da tela e clicaremos em "New Terminal", fazendo com que o console seja aberto na parte inferior da tela.

Para executarmos, usaremos o comando node seguido do nome do arquivo.

node app.js

Ao pressionarmos "Enter", veremos que nada acontecerá. Note que a nossa tela está um pouco pequena, e podemos aumentá-la segurando a tecla "Ctrl" e usando o "+" do teclado. Da mesma forma, "Ctrl -" reduz o zoom da tela.

Mas por que nosso código não retornou nada? Isso aconteceu pois esquecemos de salvar o conteúdo de app.js. O Visual Studio Code não salva os arquivos automaticamente. Isso é visível pelo aviso "1 unsaved" - ou seja, "um arquivo não salvo" - na área de editores do nosso menu.

Além disso, tem uma "bolinha" ao lado do nome do arquivo app.js, tanto nos editores abertos quanto na sua aba, algo que também indica que o arquivo não foi salvo. Para salvar, usaremos o atalho "Ctrl + S" ou o menu "File > Save" (Arquivo > Salvar).

Após salvarmos, voltaremos ao terminal e usaremos a tecla para cima do teclado para retornarmos ao último comando, node app.js. Ao pressionarmos "Enter", teremos duas saídas:

8

[ 1 ]

Vamos analisar o que nosso código faz para chegar a essas saídas.

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

// funcionarios = [nomes,idades,faculdade]

// function eMaiorQue10(value) {
//     return 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 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"]

Temos alguns arrays com uma formatação não muito legal, com espaços entre os valores, por exemplo. Temos uma const notasGerais, um array de duas dimensões com indentação errada; um let media = 0 também com indentação errada; um for dentro de outro for, que parecem corretos; e outros códigos na parte de baixo.

É possível consertarmos nossos problemas de indentação e espaços inadequados. Para isso, clicaremos com o botão direito no corpo do arquivo e selecionaremos a opção "Format Document", cujo atalho é "Shift + Alt + F".

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"]

Isso tornará o código mais legível e organizado. Tem outra coisa que não está legal: na linha 42 tem um texto bem comprido, sendo necessário usar a rolagem horizontal para lê-lo por completo. A quebra de linha pode nos ajudar com isso. Usaremos o menu "View > Word Wrap", cujo atalho é "Alt + Z".

Isso fará com que parte do texto seja jogada para a próxima linha, que na verdade é uma continuação da linha 42 e não tem numeração, mantendo a 43 vazia. Salvaremos o arquivo e o executaremos novamente para verificarmos se não quebramos o código. Como temos o mesmo retorno, tudo continua correto.

Outro ponto interessante: repare que na linha 39, o código console.log("retornou") parece "apagado", enquanto os demais códigos têm cores mais vivas. Ao deixarmos o ponteiro do mouse sobre ela, veremos a mensagem "Unreachable code detected", informando que o código dessa linha não é executado.

Para resolvermos isso, podemos clicar sobre a linha e pressionar "Ctrl + .", abrindo o menu "Quick fix" (reparo rápido), que sugerirá remover essa linha. 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 o essa instrução encerra a execução da função.

Poderíamos recortar e colar o código, mas também existe outra maneira: segurar a tecla "Alt" com o cursor sobre a linha e pressionar a tecla para cima do teclado, movendo o código console.log("retornou") uma linha para cima. Após salvarmos e executarmos, continuaremos não recebendo nada, o que acontece pois a função teste() não é chamada nenhuma vez. Resolveremos isso incluindo a chamada da função.

//...
console.log(media)
teste()

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

Limparemos o console com clear e executaremos node app.js novamente. Podemos acessar esse código rapidamente pressionando para cima no teclado duas vezes. Como retorno, teremos:

8

retornou

[ 1 ]

Agora nossa saída mudou, antes era só 8 e [ 1 ]. Vamos ver se realmente teve alteração? Usaremos "Alt + baixo" no teclado para descermos o console.log("retornou") para a linha original. Ao salvar e executar, voltaremos a ter o retorno anterior - ou seja, realmente funcionou.

Quando estamos criando código, nem sempre tudo ocorre como esperado, e às vezes cometemos erros, por exemplo de sintaxe. Para testarmos isso, vamos incluir um erro bastante óbvio em nosso código: um + sozinho em uma linha. Repare que o VSCode realçará esse +, sublinhando-o.

Além disso, o nome do arquivo app.js será realçado em vermelho tanto no menu "Open Editors" quanto na aba aberta, com o número "1" ao lado do nome, indicando o número de erros. No canto superior direito, temos também um pequeno resumo do nosso código, que inclui uma linha vermelha no ponto em que colocamos o +; e na barra de rolagem um tracinho será exibido na altura do erro.

Nesse arquivo está fácil encontrarmos o erro, afinal nós o colocamos propositalmente. Porém, em códigos mais extensos, às vezes fica difícil encontrar os erros. Para contornar isso, podemos usar o atalho "F8" para navegar diretamente ao próximo erro, indicando também qual é o erro - nesse caso, temos a mensagem "expression expected", ou seja, o Javascript espera uma expressão. Vamos simplesmente apagar o + que estava sozinho na linha e fechar a caixa de diálogo clicando no "x". Note que, após apagarmos o erro, a expressão "expression expected" ficara mais escura, indicando que foi resolvida.

O Visual Studio Code também nos traz outras funcionalidades que podem ajudar no desenvolvimento. Vamos começar passando pelo array texto usando a expressão for.

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

for

A estrutura do for é bastante conhecida, e não precisamos fazê-la manualmente toda vez. Sendo assim, escreveremos for e usaremos "Ctrl + Espaço" para abrir a caixa de sugestões. Selecionaremos a opção For Loop. Ela é na verdade um snippet, um trecho de código já pronto para utilização. Ao clicarmos, toda a estrutura do for será montada no editor:

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

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

Ele cria uma variável index com valor inicial 0, faz uma comparação e incrementa o index. Eu pessoalmente não gosto de chamar a variável iterada de index, mas sim de i. Como acabamos de criar a estrutura, todos os index estarão selecionados, e poderemos simplesmente pressionar a letra (ou palavra) desejada para substituí-lo, alterando todas as ocorrências automaticamente.

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

}

Também alteraremos o array, afinal queremos percorrer o array texto. Se somente selecionar um dos array e começarmos a digitar, o outro não será alterado. Porém, isso é possível selecionando a palavra desejada e usando o atalho "Ctrl + F2", que seleciona todas as vezes que a palavra aparece em nosso código.

Porém, também não é isso que desejamos fazer, afinal isso alteraria outras variáveis do nosso arquivo. Outra opção é selecionar a palavra desejada e pressionar "Ctrl + D" para selecionar também a próxima ocorrência dela. Isso pode ser repetido até selecionarmos todas as ocorrências desejadas até o final do arquivo. Chegando ao final, ele retorna para a primeira palavra, percorrendo o código novamente. Vamos selecionar somente as duas ocorrências de array em nosso loop.

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

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

 }

A palavra texto não é muito descritiva, e talvez seja melhor substituirmos por outra. Para isso, vamos selecionar nossa variável e pressionar "F2". Isso abrirá uma caixa de texto que nos permitirá alterar o nome da variável - nesse caso, usaremos PalavrasSimples. Ao pressionarmos "Enter", todas as ocorrências da variável texto serão alteradas para PalavrasSimples.

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

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

 }

Em outro ponto do código, temos a variável media:

console.log(media)

Quando estamos escrevendo 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, então isso pode ser relativamente fácil. Entretanto, em códigos maiores - de 200, 500, 1000 ou até mais linhas - é capaz de nos perdermos.

A tecla "F12" pode nos ajudar, levando diretamente para a declaração da variável.

let media = 0

Agora queremos colocar esse código em produção, ou seja, subi-lo em um servidor e disponibilizá-lo para uso. Nesse cenário, queremos ter somente as saídas numéricas, e não o texto "retornou". Uma maneira de fazermos isso é apagarmos a linha referente a essa saída (41), algo que pode ser feito selecionando a linha e usando o backspace ou usando o atalho "Ctrl + Shift + K", que elimina a linha sem que nos preocupemos com as linhas adjacentes.

Já vimos vários atalhos interessantes, mas existe ainda mais um que é bastante utilizado. Na parte de cima do código temos um bloco comentado, e agora desejamos "descomentá-lo".

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

// funcionarios = [nomes,idades,faculdade]

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

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

Poderíamos apagar as barras (//) linha por linha, mas existe o atalho "Ctrl + ;" (ou "Command + ;" no Mac), que permite comentar ou descomentar trechos de código.

Mas e se quisermos alterar esse atalho de "Ctrl + ;" para "Ctrl + /"? Para isso, clicaremos na engrenagem no canto inferior esquerdo ("Manage") e acessaremos o menu "Keyboard Shortcuts" (atalhos de teclado), cujo atalho é "Ctrl + K > Ctrl + S". Na nova aba, pesquisaremos por "comment" (comentário em inglês) e clicaremos duas vezes em "Toggle line comment", opção que permite "trocar" o comentário da linha - ou seja, se ela está comentada, deixará de estar; se não estiver comentada, será comentada.

Será aberta uma caixa de texto pedindo para digitarmos a nova combinação, em nosso caso "Ctrl + /". A caixa será preenchida com "ctrl+abnt_c1" e logo abaixo teremos o significado desse código, que é o atalho que digitamos. Após pressionarmos "Enter", o conteúdo será salvo.

O interessante desse menu "keyboard shortcuts" é a possibilidade de encontrar todos os atalhos do VSCode, como "cut", o clássico "Ctrl + X", e o "copy", "Ctrl + C". No último caso, o VSCode também aceita "Ctrl + Insert".

No arquivo app.js, selecionaremos o trecho comentado e pressionaremos "Ctrl + /" para descomentarmos.

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

funcionarios = [nomes,idades,faculdade]

function eMaiorQue10(value) {
    return value >= 10;
  }

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

Assim conseguiremos descomentar o bloco inteiro de código. Mais abaixo, vemos que a linha filtrado [é 12, 130, 44] continua comentada. Isso acontece pois ela já era um comentário - inclusive, se selecionarmos o bloco inteiro e o comentarmos novamente, a linha será comentada duas vezes (// //). Isso é útil pois conseguimos guardar o que já era comentário anteriormente em nosso código, evitando problemas.

Já vimos os principais atalhos do VSCode, e agora conheceremos outras funções que ele nos oferece. Uma delas é o "Source Control", também conhecido como "Git" para quem já tem costume. Acessado a partir do menu à esquerda da tela (e pelo atalho "Ctrl + Shift + G"), ele nos permite inicializar um repositório Git ou publicar nosso código no Github - ou seja, o VSCode tem integração com o Github.

Se escolhermos "Publish to Github", a IDE nos perguntará se a extensão pode utilizar nosso login, abrindo uma janela do navegador pedindo autorização para acessar nosso Github. Caso você não esteja logado, será necessário usar seu usuário e senha. Na janela seguinte, basta autorizar o acesso, clicar em "Abrir Visual Studio Code" e, de volta no programa, em "Open".

Na parte superior da rela, teremos uma caixa de diálogo onde é possível criar um repositório, sugerindo o nome da nossa pasta ("Alura+ VSC"). Podemos publicá-lo como um repositório privado ou público. Não criaremos o repositório nesse vídeo, mas, caso você queira, basta fazer todo o percurso normal do Git, incluindo commit, push e assim por diante.

Vamos falar um pouco sobre as extensões do VSCode, que também são bem úteis. Acessadas pelo menu à esquerda (e também pelo atalho "Ctrl + Shift + X"), elas permitem incluir mais funcionalidades ao VSCode.

Como estamos trabalhando com Javascript, o ESLint é uma extensão bastante utilizada. É um formatador de código que inclui algumas boas práticas em Javascript. Pesquisando por ESLint e clicando em "install", ele será instalado. O ESLint é um caso especial dentre as extensões, pois precisa ter a biblioteca instalada na máquina - algo que pode ser feito usando o comando npm install eslint, para usá-lo somente no projeto atual, ou npm install -g eslint para instalá-lo globalmente.

Outra extensão interessante é a Live Share. Desenvolvida pela Microsoft, essa ferramenta permite compartilhar código com outra pessoa em tempo real, como um arquivo do Google Docs ou do Office 365. Isso é legal quando você está trabalhando em grupo e é necessário editar o mesmo arquivo sem que seja necessário ficar "disputando o teclado" ou narrando o código para alguém digitar. Basta todas as pessoas baixarem o Live Share para que possam editar o mesmo código.

O Live Server também é bem interessante. É um jeito rápido de desenvolver sites, muito útil para quem desenvolve em HTML, CSS e Javascript para Web. Ele abre um servidor em uma porta, que podemos acessar pelo navegador para explorar os efeitos do código no site que estamos desenvolvendo.

Para quem trabalha com banco de dados SQL, temos a SQLTools, que ajuda a formatar o seu banco de dados, gerar queries, explorar os conteúdos salvos, dentre outras funcionalidades.

Se você desenvolve em Java, temos a extensão da Language Support (suporte de linguagem) da Redhat, uma grande empresa bastante conhecida por quem trabalha com Linux.

Existem algumas linguagens ou plataformas que não são suportadas pelo Visual Studio Code, por exemplo os microcontroladores. Nesse caso, podemos usar o PlataformIO, uma IDE que trabalha "em cima" do VSCode, oferecendo algumas plataformas como Atmel AVR (para Arduino), Expressif 32 e assim por diante. Também é uma plataforma boa para desenvolver com IOT, com frameworks para Arduino, por exemplo, substitindo a IDE própria do Arduino, que não é muito amigável em termos de possibilidades (como atalhos e sugestões).

Já passamos por vários atalhos de teclado e funções do Visual Studio Code, nos familiarizamos com sua interface e aprendemos a começar projetos do zero ou abrir projetos já existentes. Também aprendemos a usar o terminal integrado e a integração com o Github, além de conhecermos algumas extensões. Devemos nos lembrar que as extensões do VSCode existem para expandir as possibilidades e tornar nosso trabalho mais ágil.

Uma opção que acabei não comentando é a troca de tema do VSCode, acessada pelo menu à esquerda da tela o pelo atalho "Ctrl + K > Ctrl + T". Existem vários temas disponíveis, alguns claros (light) e outros escuros (dark), e outros como o Tomorrow Night Blue, que deixa a interface mais azul.

Espero vocês na próxima!