VSCode: Dicas e truques
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 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 = 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!