Unlimited Wordpress themes, plugins, graphics & courses! Unlimited asset downloads! From $16.50/m
Advertisement
  1. Web Design
  2. Visual Studio
Webdesign

Visual Studio Code: Meu Novo Editor de Código Favorito

by
Difficulty:BeginnerLength:ShortLanguages:

Portuguese (Português) translation by Erick Patrick (you can also view the original English article)

Nesse vídeo, apresentaremos nosso mais novo editor de código favorito: Visual Studio Code. Visual Studio é um produto da Microsoft, e isso pode ser uma surpresa para vários, mas coloquemos nossos pré-conceitos de lado e vejamos o que ele é capaz.

Visual Studio Code

Pelos anos, usamos vários editores de códigos: TextMate, Coda, SublimeText, Atom e cada um tem seus prós e contras. Visual Studio Code, contudo, é o nosso favorito até agora, então vejamos alguns de seus recursos.

Comecemos baixando a versão do nosso sistema (Windows, macOS, Linux) em code.visualstudio.com (é de graça).

Interface de Usuário

Um dos motivos de gostarmos do Visual Studio Code é sua interface: super simples.

Possui algumas barras laterais que podem ser posicionadas à direita ou esquerda, de acordo com a preferência, dando-nos alguns ícones para trocar entre painéis. Escolhamos entre Explorador, Pesquisa, Git, Depuração e Extensões. Em Visão, mudamos entre tela cheia, modo zen, etc.

Passando o mouse sobre as pastas no Explorador, temos algumas opções: Novo Arquivo, Nova Pasta, Atualizar e Fechar Tudo. Clique do botão direito traz o menu contextual.

Paleta de Comandos

Com Shift-Ctrl/Cmd-P, abrimos a Paleta de Comandos.

Nesse painel, podemos pesquisar tudo que quiser rapidamente: comandos Git, outros temas, instalação de extensão–tudo pode ser feito pela Paleta de Comando.

Similarmente, Ctrl/Cmd-P traz a paleta Ir ao arquivo...

Terminal

Com Ctrl/Cmd-` abrimos o terminal embutido, que adoramos.

Isso abre um terminal diretamente na raiz do projeto, economizando nosso tempo. Clicando o ícone + abre mais janelas de terminais as quais podemos navegar usando o menu suspenso. Isso é um recurso muito útil, especialmente se usamos compiladores ao programar.

Git

Outro recurso que somos muito fã é a integração com Git. Mudanças que fazemos aos arquivos são destacadas em vários lugares para sabermos o que se passa:

Na imagem, vemos a notificação da barra lateral dizendo-nos de mudanças não salvas, a lista de mudanças no painel Git e a linha destacada mostrando onde a mudança aconteceu no arquivo.

VSCode também compara versões lado-a-lado, para clareza extra.

Outros comandos padrões do Git, como sync, pull e por aí vai, estão disponíveis do painel do Git.

Emmet (Zen Coding)

Boas notícias: Emmer já está embutido no VSCode. Não é preciso configurá-lo, basta usá-lo (com Tab a teclada de ativação dos trechos) a partir do momento que abrimos o editor pela primeira vez.

Cursores Múltiplos

Ao destacar um pedaço de código no arquivo, o VSCode destacará todas as outras ocorrências no arquivo. Podemos apertar Cmd/Ctrl-D para adicionar outro Curso à próxima instância ou Shift-Ctrl/Cmd-L para adicionar cursores à todas instâncias. Edição em massa, fácil.

Configurações

O painel de Configurações no VSCode é bem intuitivo. Como no Sublime Text, as configurações são salvas em um arquivo (JSON no caso) permitindo navegar por todos os padrões. Ao clicar no ícone de edição próximo à configuração, é copiado para um arquivo customizado para modificá-la:

Apertemos Salvar e vejamos as mudanças automaticamente.

IntelliSense

IntelliSense é um recuros no VSCode que queríamos usar desde quando o abrimos pela primeira vez. É um auto-completar poderoso com assistente de destaque de sintaxe e vai um pouco além do que esse tipo de recurso faz.

Passando o mouse sobre seletores CSS dará exemplos de como usar o HTML correspondente (útil para iniciantes):

Passando mouse sobre propriedades revela sua documentação e valores de cores aparecer prefixados com pequenos seletores que aparecem na tela. Sugestões de código ao digitarmos são bem fortes também.

Extensões

Code > Preferências > Cor de Tema abrirá (adivinhou) a paleta de cor de tema. Rolemos pelos exemplos e verá a interface mudar de acordo. Apertemos Enter para fixar as mudanasç

Além dos temas padrão, há também um gigantesco mercado de outros exemplos disponíveis (atualmente gratuitos), além de extensões de todos os tipos.

Conclusão

Isso basicamente resume nossos recursos favoritos do Visual Studio Code. Vale dizer que há muitos, muitos mais recursos disponíveis. Em termos de experiência, usar o VSCode tem sido bem positivo. Antes, usávamos o Atom e não nos arrependemos da troca. Claro, podem discordar, mas em nossa opinião, não fará mal baixar esse editor e usá-lo por algum tempo.

Links Úteis

Advertisement
Advertisement
Advertisement
Advertisement
Looking for something to help kick start your next project?
Envato Market has a range of items for sale to help get you started.