Dominando Visual Studio Code

Prévia do material em texto

Dominando o Visual Studio Code
Introdução
O Visual Studio Code (VS Code) é um editor de texto Open Source completo, criado pela Microsoft, que possui integração nativa com o Git, milhares de extensões, é rápido e permite que você realize o debug facilmente do seu código. O VS Code apesar de ser desenvolvido pela Microsoft, ele é um open source, feito com o Electron (mesma tecnologia utilizada no desenvolvimento do atom), suas principais vantagens são:
Velocidade
Grande número de extensões
Preparado para o Git
Preparado para Debugar
Para realizar o download do VS Code, basta acessar https://code.visualstudio.com/, nos sistemas operacionais Linux baseados em debian, é possível instalar a partir do gerenciador de pacotes, com os seguintes comandos:
curl https://packages.microsoft.com/keys/microsoft.asc | gpg --dearmor > microsoft.gpg
sudo mv microsoft.gpg /etc/apt/trusted.gpg.d/microsoft.gpg
sudo sh -c 'echo "deb [arch=amd64] https://packages.microsoft.com/repos/vscode stable main" > /etc/apt/sources.list.d/vscode.list'
O comando acima irá adicionar o repositório do vscode na sua máquina. Agora, para instalar, utilize os comandos abaixo:
sudo apt-get update
sudo apt-get install code # or code-insiders
Para instalar em outros sistemas operacionais siga as instruções do site. Outro link que devemos “guardar com carinho” é https://marketplace.visualstudio.com/ que é o link que contém as extensões e temas para o VS Code, que iremos abordar mais a frente.
Sidebar
A sidebar, ou barra lateral, possui 6 ícones, conforme o print abaixo:
O primeiro ícone, você vê a lista de arquivos (explorer) do projeto atual, exemplo:
O próximo ícone, que é a Lupa, é referente a pesquisa de arquivos no seu projeto, uma coisa interessante nesta parte, é que podemos colocar na pesquisa, um filtro para pesquisar excluindo determinados arquivos, exemplo:
No exemplo acima, estou “excluindo” (filtrando) da pesquisa quaisquer arquivos (por isso o *) que tenham a extensão .cs.
O terceiro ícone abre o painel do Git, exemplo:
Depois será abordado mais afundo sobre o Git. O quarto ícone é o menu de debug, esta parte também será abordada mais a fundo nos próximos tópicos. O quinto menu é onde vamos instalar as nossas extensões, exemplo:
O sexto e último ícone da sidebar é um atalho para opções dentro do VS Code, como Command Palette, Configurações (Settings), Atualizações, entre outras opções.
Footer do VS Code
O footer do VS Code é a barra inferior, conforme o print abaixo:
O primeiro ícone do footer é referente a qual branch no Git nós estamos no momento, no exemplo acima, estamos na branch master. Inclusive, se clicarmos no ícone da Branch é possível criar uma nova branch e já realizar o checkout para a mesma. O segundo e terceiro ícone é referente a erros e alertas que há no projeto, no exemplo acima, meus códigos do projeto não tem nenhum erro e nenhum alerta (uffa). O quarto ícone é para dar um feedback da sua experiência com VS Code.
Se você abrir algum arquivo, irá aparecer novos ícone no footer, exemplo:
Dos novos ícones, o Ln 1 representa em qual linha o nosso cursor está no momento, o Col 1 representa a coluna em que meu cursor está, o Spaces 4 representa quantos espaços estamos utilizando na indentação. Em UTF-8 mostra o encode do arquivo, o LF representa o “tipo” de quebra de linha neste arquivo texto, você pode escolher entre LF (Line Feed, que seria um ‘\n’) e CRLF (Carriage Return Line Feed, que seria um ‘\r\n’) . O PHP representa qual a linguagem utilizada no arquivo (php sempre! hahaha), de acordo com a linguagem utilizada, ele vai mudar as cores e highlights. Algumas extensões colocam ícones no footer, logo, se você já tiver adicionado alguma extensão, pode ser que seu footer esteja diferente do exemplo.
IntelliSense, Emmet Syntax
O IntelliSense é um autocomplete que o vscode disponibiliza, você pode “forçar” aparecer tela de IntelliSense com Ctrl + Space. Ele irá mostrar coisas que ele supõe que você irá utilizar, snippets que você possui.
O Emmet Syntax é uma syntax do plugin Emmet, que está disponível para vários editores de texto. Essa sintaxe aumenta sua produtividade, pois ela serve como atalho para escrever códigos, por exemplo, imagina que esteja escrevendo um HTML e você precisa criar uma div, que vai dentro uma ul com a classe .lista, dentro desta ul vai ter 5 li, com o Emmet você cria todo esse bloco de código apenas escrevendo:
div>ul.lista>li*5
Após digitar o “comando”, basta aperta a tecla Tab, que o Emmet irá produzir o seguinte código:
<div>
		<ul class="lista">
			<li></li>
			<li></li>
			<li></li>
			<li></li>
			<li></li>
		</ul>
	</div>
O Emmet é um plugin poderoso, que já vem nativo com o VS Code. Vocêpode conferir mais detalhes de comandos do emmet em https://docs.emmet.io/cheat-sheet/. 
Configuração
Você pode alterar as preferências do seu vscode indo em FIle, Preferences (tecla de atalho Ctrl + ,), todas as preferências default vão estar ao lado esquerdo, para alterar uma preferência, basta você escrever a preferência como uma propriedade dentro de um objeto json (do javascript), isto é, da seguinte forma:
“propriedade”: “valor”
No caso do valor ser booleano ou inteiro, não precisa das aspas. É possível alterar a preferência também, passando o mouse em cima da preferência e clicando no ícone de edição ao lado esquerdo, exemplo:
Atalhos
Para mostrar o status bar, uma espécie de inspetor de elementos, basta apertar a seguinte combinação:
Ctrl + Shift + m
O Status bar serve para mostrar os problemas na hora da execução do seu projeto, output com informações do seu projeto, o console de debug, que será mostrado nos tópicos futuros o passo a passo do debug e por último o terminal.
Para pesquisar algo no arquivo:
Ctrl + f
Para navegar de um arquivo para o outro, função que existe também no sublime:
Ctrl + p
Para abrir a Paleta de comandos (Command Paletter), basta:
 Ctrl + Shift + p
O command paletter deve ser um dos atalhos/comandos mais utilizados durante o desenvolvimento. 
Para iniciar o debug:
F5
Para abrir o arquivo de definição de uma classe/objeto do seu projeto, basta pressionar:
F12
Este comando é muito interessante e dependendo do tipo do seu projeto é também muito utilizado. Muitas vezes, quando estou desenvolvendo no Laravel, basta eu ir com o cursor em cima de um objeto ou algo do framework, aperta o F12 e ele me leva ao arquivo de origem, ou seja, o arquivo do framework, para que assim, eu possa ler o arquivo de origem e entender o objetivo daquele objeto ou classe. Lembrando que, para funcionar no Laravel, ainda é necessário instalar a extensão do Laravel para o vscode que será vista mais a frente.
Para abrir arquivos lado a lado (limitado apenas a 2 arquivos):
Ctrl + (clique com o mouse no arquivo)
O comando anterior é limita a quantidade de arquivos abertos de acordo com a resolução da tela. Ele também funciona se você clicar com o botão direito mouse em cima de outro arquivo e selecionar a opção “Open to the side”. Para mudar de uma aba para outra, ou seja, alternar entre as abas dos abas dos arquivos abertos, é possível com o seguinte comando:
Ctrl + index da aba(começando em 1)
Exemplo: Ctrl + 2 (irá para a aba 2)
Ainda é possível, dividir a tela do arquivo atual em duas, utilizando o seguinte atalho:
Ctrl + \
Agora imagina a seguinte situação, temos vários arquivos abertos, conforme o print abaixo:
E queremos navegar entre arquivos, mas não queremos dividir a tela entre eles, como nos exemplos anteriores, apenas navegar entre um arquivo e outro, para isso, podemos utilizar a seguinte combinação:
Ctrl + Tab
Que irá abrir uma mini janela para escolher qual arquivo abrir, exemplo:
Para abrir a aba de Git:
Ctrl + Shift + G
Para abrir o explorador, aquela parte de navegação explorer de arquivos, utilize:
Ctrl + Shift + e
Isso é muito útil, pois, muitas vezes fechamos o explorador para ganhar espaço na tela e pode focar melhor no arquivo e queremosabrir novamente ela, sem ter que clicar com o mouse no sidebar e selecionar o primeiro icone.
Para entrar em modo zen, ou, zen mode basta clicar:
Ctrl + k,z
Lembre-se que o comando acima é diferente de:
Ctrl +k, Ctrl + z
O zen mode deixa seu vscode em tela cheia, é muito utilizado quando precisamos de mais foco, pois ganhamos espaço e nos livramos de muitas informações na tela. Para sair do zen mode, basta clicar a mesma combinação, ou clicar a tecla ESC duas vezes.
Para acessar a janela de extensões, basta clicar:
Ctrl + Shift + x
Para mais atalhos e informações, acesse https://code.visualstudio.com/docs/getstarted/tips-and-tricks. 
Como instalar extensões
Extensões são plugins que estendem a ferramenta. Acesse a janela de extensões, procure pelo nome da sua extensão por uma palavra chave, exemplo, procure por materialize e clique em cima da extensão.
Após isso, vai abrir uma aba com os detalhes da extensão, exemplo:
Para instalar, basta clicar em Install, exemplo:
Após realizar o download, a maioria das extensões pede para você realizar o reload do vscode, que pode ser feito de forma automática, basta clicar em reload. Ainda é possível desabilitar a extensão, tanto apenas no projeto atual quanto deixa desabilitada sempre. E ainda, temos a opção de desinstalar a extensão.
Como instalar temas
Para obter os temas, basta seguir os mesmos passos da instalação de uma Extensão. Após a instalação, é preciso definir no VS Code que tema que você deseja utilizar, para isso, vá em:
 File > Preferences > Color Theme
Tecla de atalho: Ctrl + K, Ctrl + T
Ele irá abrir um Menu com as opções, você pode ir mudando e o próprio VS Code irá te dar um preview, assim, você pode ir verificando o Tema que melhor lhe agrada. No meu caso utilizo o seguinte tema:
Dracula (ref ao tema Dracula Oficial);
Mesmo com o tema do seu gosto, pode ser que seja necessário trocar um cor ou outra, para isso, vá em Settings (tecla de atalho [ Ctrl + , ]). Na coluna da esquerda, onde estão os valores (configurações) padrões do VS Code, possui uma seção chamada Workbench. São as configurações desta seção que devem ser sobrescritas (override) no seu lado direito. 
Um detalhe legal é que você pode copiar as configurações, colar no lado direito e fazer as alterações, ou simplesmente clicar no ícone do lápis e escolher a opção desejada. Outra coisa bacana, são os comentários dentro do VS Code, que são bem explicados e detalhados a funcionalidade de cada configuração.
 Para alterar as cores do seu Workbench, vá no seu lado de configuração (lado direito), e coloque o seguinte objeto JSON:
"workbench.colorCustomizations": {
	//SUA ALTERAÇÕES VÃO AQUI DENTRO;
},
Usando o próprio IntelliSense do VS CODE (com um [ Ctrl + Space ], onde space é a sua barra de espaço) é possível ver todas as configurações que o seu VS CODE aceita neste objeto.
Como gerar snippets
Os snippets são blocos de texto gerados após utilizar o atalho para o mesmo (que seria o próprio snippet). A ideia do snippet é agilizar o processo de desenvolvimento, principalmente em blocos de código que são grandes e corriqueiros, assim, apenas chamando o snippet, ele irá criar todos esse bloco de código para você.
O próprio Emmet tem vários snippets bacanas, para gerar o seu HTML, mas o legal no VS Code é que ele vai além, existem snippets para cada linguagem de programação que você for utilizar. Para você ver o snippets atuais, vá em:
File > Preferences > User Snippets
Ele irá abrir um menu para que você escolha a linguagem. Após escolher a linguagem, ele irá mostrar todos os snippets que você criou para aquela linguagem.
fdfd
Gerando tasks
De forma resumida, uma task é alguma coisa que pode rodar no shell.
fdfd
Como usar o Git
fdrr
Como debugar o código
Odldfdl
Tópico Secundário
Texto relativo ao tópico secundário.
Listas
Segue abaixo, exemplo de lista:
Item 1
Representa o texto relativo ao item 1.
Item 2
Representa o texto relativo ao item 2.
Item 3
Representa o texto relativo ao item 3.
Comandos:
$ git config
$ git config 
Imagem
Texto para proxima imagem: