Hoje irei apresentar o VS Code (Visual Studio Code) para quem ainda não teve contato com ele.


VS Code

Hoje irei apresentar o VS Code (Visual Studio Code) para quem ainda não teve contato com ele. Irei aproveitar e navegar por alguns pontos que eu achei legal estar compartilhando.


Navegando pela IDE

Seguindo a documentação oficial do Vs Code Docs, nós podemos dividir ele em 5 partes.

  • Editor — Área onde editamos os arquivos, o VS permite abrir mais de um arquivo lado a lado conforme está na imagem acima.
  • Side Bar — Podemos adicionar plugins ou como default ele fica monitorando as alterações do arquivo que estamos editando.
  • Status Bar — Informação sobre o projeto aberto.
  • Activity Bar — Ao meu ver essa é a parte que depois do Editor Groups, é a que nós mais utilizamos, nela temos um painel que podemos abrir e fechar, o um botão de search, controlador de versão e o melhor, um local para que possamos gerenciar os nossos plugins.
  • Panels — No painel nós podemos monitorar os erros de debug, temos o output e o melhor, podemos trabalhar com um ou mais terminais sem precisar utilizar o CMD do Windows ou terminal do Linux/MAC. Essa é uma das funcionalidades que eu acredito que a maioria dos devs fronts e backs, mais utilizam.

Atalhos

Como todas as IDE’s, o VS Code tem muitos atalhos, para que você possa ver uma lista com todos eles, vá em file -> preferences -> Keyboard Shortcuts ou já utilize um atalho (no Windows): Ctrl + k Ctrl + S . Abaixo você tem uma imagem mostrando as duas formas de se abrir a lista de atalhos:

Vs Code (Shortcuts)

Retirei da lista acima as que eu mais utilizo no meu dia dia:

  • ctrl + f: busca no arquivo que esta em foco
  • ctrl + p: buscar um arquivo dentro da solution
  • ctrl + shift + p: para executar algum comando do vs como por exemplo, desabilitar todos os breack points
  • ctrl + shift +g: eu utilizo ele antes de subir as alterações que eu fiz no durante o dia, aqui eu posso ver antes e depois, remover algo que não deva subir, alterar algum apontamento … etc

Settings

O VS Code nos permite alterar diversas funcionalidades como: Auto save, Wordwrape, tamanho de fonte …etc. Para que você possa ver todas essas opções, basta ir em File > Preferences > Settings. Abaixo você tem uma imagem demonstrando esse passo:

Vs Code (Settings)

Snippets

Snippets são blocos de código que nós podemos utilizar para agilizar o desenvolvimento. Com certeza você já utilizou algum sem saber. Abaixo você pode ver uma imagem com um exemplo retirado da documentação do VS Code.

O Emmet snippets é um outro exemplo que eu vejo os frontends utilizarem muito. Abaixo você pode ver um exemplo de criação de uma estrutura HTML utilizando ele:

Emmet snippets

O VS Code nos permite criar os nossos próprios users snippets. Para ver uma lista com as linguagens que podemos customizar e criar os nossos snippets, vá até File > Preferences > User Snippets. Abaixo você pode ver uma imagem com essa lista:

Caso você tenha interesse de criar o seu próprio User Snippet e publicar no Market Place, segue link contendo esse passo a passo: Crie seu próprio Code Snippet.

MarketPlace

Para finalizar esse primeiro artigo, irei apresentar o MarketPlace, nele você pode encontrar: plugins e extensões de terceiros, sendo elas pagas ou grátis.

Um exemplo de plugin grátis que eu acredito ajudar em projetos que utilizem o READ.ME é o Markdown, com ele você pode ter um preview de como ira ficar o arquivo antes de enviar para o seu repositório. Abaixo você pode ver um exemplo desse plugin sendo utilizado:

Para que possa encontrar esse plugin acima, ou pesquisar um outro para uma determinada linguagem, você pode ir no link VS Code Marketplace. Abaixo você pode o exemplo de uma pesquisa de plugins e extensões para o TypeScript.

Por fim, caso você tenha interesse em criar uma extensão e subir na loja, segue um link demonstrando esse passo a passo: Crie sua primeira extensão.

Compartilhe:

Share on facebook
Facebook
Share on twitter
Twitter
Share on pinterest
Pinterest
Share on linkedin
LinkedIn

Table of Contents

Postagens Relacionadas

RockBottomRiser

Rock Bottom Riser

Rock Bottom Riser 01/03/2021(US) – Documentário – 1h 10min –   Nota: 0/10   Sinopse     Elenco Nainoa Thompson Como – master navigator Moses
SaferatHome

Safer at Home

Safer at Home 26/02/2021(US) – Filmes – 0h 0min –   Nota: 0/10   Sinopse     Elenco Mais informações Título Original Safer at Home
SouLunaOUltimoShow

Sou Luna: O Último Show

O elenco de “Sou Luna” se apresenta ao vivo pela última vez no mítico estádio Luna Park em Buenos Aires. Vamos acompanhá-los na intimidade dos bastidores e r…
Chansondouce

Chanson douce

Chanson douce () – Drama, Crime – 1h 40min –   Nota: 6/10   Sinopse     Elenco Leïla Bekhti Como – Myriam Karin Viard