Categories: Tecnologia

Conheça o VS Code – Alternativa ao Sublime

VS Code

VS Code (Visual Studio Code) é um editor da Microsoft, de código aberto. Ele foi desenvolvido e funciona de forma estável (espantem-se) em Windows, Mac OS e Linux.

O objetivo do projeto do VS Code é criar um editor de código para facilitar a compilação e depuração de aplicativos Web e aplicativos na nuvem.

Ele é gratuito, e pra gente começar faça o download do VS Code aqui.

Linguagens

O VS Code suporta várias linguagens nativamente e é possível adicionar mais linguagens através da VS Code Marketplace.

Atualmente ele tem Syntax coloring, que é a mudança das cores e estilos de acordo com a linguagem utilizada para as seguintes linguagens:

  • Batch
  • C++
  • Clojure
  • Coffee Script
  • Dockerfile
  • F#
  • Go
  • Jade
  • Java
  • HandleBars
  • Ini
  • Lua
  • Makefile
  • Objective-C
  • Perl
  • PowerShell
  • Python
  • R
  • Razor
  • Ruby
  • Rust
  • SQL
  • Visual Basic
  • XML

Entre outras coisas interessantes tem IntelliSense, linting e outline para:

  • CSS
  • HTML
  • JavaScript
  • JSON
  • Less
  • Sass

E ainda refatoração e encontra todas as referências em:

  • TypeScript
  • C#

O VS Code, por padrão dá suporte a linguagem para um arquivo com base em sua extensão. Porém, se você quiser mudar a linguagem, basta clicar na linguagem atual, que é exibida no canto direito da barra de status.

Iniciando os Trabalhos com o VS Code

Como vários outros editores, o VS Code adora uma interface comum e um painel Explore à esquerda, mostrando os arquivos e pastas que temos acesso. Ao clicar em qualquer arquivo, o conteúdo é exibido no editor na parte direita.

Lado a Lado

Podemos ter lado a lado até três editores abertos. Quando eu estou trabalhando construindo meus projetos de sites é extremamente útil, pois como você pode ver na imagem abaixo, abro HTML, CSS e JS em cada uma.

Se você já está com um editor aberto basta clicar em outro arquivo no explore pressionando o CTRL.

Também pode clicar com o botão direito sobre o arquivo desejado e clicar na opção Open to the side.

Você pode redimensionar e reordenar esses editores. Arraste e solte, na região do título do editor, para reposicionar ou redimensionar o editor.

‘Explorador’ (Explore)

Explore é usado parar navegar, abrir e gerenciar todos as pastas e arquivos do seu projeto.

Após abrir uma pasta no VS Code, o conteúdo da pasta é exibido no Explore. Dentro do próprio editor você pode:

  • criar, excluir e renomear pastas e arquivos
  • mover pastas e arquivos arrastando (drag and drop)
  • usar o menu de contexto (clique com o botão direito do mouse) para ter ainda mais opções.

Você também pode arrastar um arquivo de fora do VS Code para dentro dele e copiá-lo.

Pesquisa

O VS Code permite que você procure em todos os arquivos na pasta do seu projeto, que está aberta. Pressionando CTRL + SHIFT + F e depois digitando o que deseja buscar. Os resultados da pesquisa são agrupados em arquivos contendo o termo de pesquisa, com a indicação dos acessos em cada arquivo e sua localização.

É possível expandir um arquivo para ver todas as ocorrências da busca dentro desse arquivo. Se clicar em cima dessa ocorrência, será exibida no editor.

Você pode configurar opções de busca mais avançadas, digitando CTRL + SHIFT + J. Serão exibidos campos adicionas para configurar a pesquisa.

Conclusões

A iniciativa é boa, e por ser Open Source, acredito que irão aparecer excelentes features novas com o tempo.

Para quem já teve o problema de desenvolver no trabalho em um ambiente e em casa em outro, devido a sistemas operacionais diferentes, o VS Code pode te ajudar bastante nisso.

Meu objetivo agora é desenvolver exclusivamente com ele para pegar ainda mais macetes. Ele é muito mais profundo do que apresentei nesse post, com suporte a bastante opções via linha de comando, suporte a Git e vários outros.

Deixa um comentário aí embaixo, e quem sabe eu crio uma série sobre VS Code?!

Se quiser pode dar uma olhada na documentação oficial do VS Code!

André Felizardo

View Comments

Share
Published by
André Felizardo

Recent Posts

Blockchain & Cripto

Desvendando o Potencial da Blockchain e Criptomoedas através da Criptografia Em um mundo onde a…

7 meses ago

Automatize o deploy de uma aplicação React com Github Actions e FTP

O deploy de uma aplicação React é uma etapa crucial para disponibilizar sua criação na…

1 ano ago

Github Satellite 2020 – Muitas novidades

Satellite 2020 foi a primeira conferência virtual do Github. O Github já tinha sido liberado…

5 anos ago

Web Components – Guia Geral

Neste guia veremos o que são web components, quando usar, sua estrutura e também um…

5 anos ago

Tipos de Frontend

A alguns anos atrás escrevi um texto sobre o que é o frontend, também palestrei…

5 anos ago

SVG – Guia definitivo

O que é SVG é a sigla para Scalable Vector Graphics que traduzindo seria gráficos…

5 anos ago