() translation by (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
