Tag Archives: vscode

VSCode – FrontEnd Extensions 

Um pouco de teoria! – Web Apps!

Saga: M&M (Mundo Mobile)

Os plugins são recursos incríveis, que transformam um editor simples numa potente ferramenta de trabalho. Para o desenvolvimento Front, não tem como ser diferente.

O VSC disponibiliza Extensions que nos auxiliam (aceleram) no desenvolvimento front-end

Snippets HTML

Incorporam suporte para HTML. Embora o editor ofereça suporte básico para HTML, como coloração de sintaxe, etc….

Um recurso legal é que, ao iniciar a digitação do nome de uma tag HTML (sem o colchete angular inicial), os Snippets exibem uma lista das opções disponíveis com breve informação.

Quando clicamos no elemento, o Snippets adiciona a tag HTML5 completa às suas propriedades mais comuns. Por exemplo, para adicionar um link (tag âncora), apenas digite um a no editor, escolher a opção correta no pop-up e os Snippets completos será inserido no editor.

vsc_front_html_snippets HTML CSS Class Completion

Extensão útil quando trabalhamos com muitas classes CSS. É comum em desenvolvedores, não saber o nome exato de uma classe.

Esse recurso resolve isto, pois ele busca os nomes de todas as classes CSS na workspace atual e exibe uma lista sobre elas.

Suponha a criação de um site usando Zurb Foundation e queira usar um grid. Mas não lembramos como as classes são nomeadas com exatidão, mas sabemos que elas têm nomes semânticos.

Com esta extensão, precisamos apenas iniciar a digitação da palavra small e as opções disponíveis surgirão.

vsc_front_html_css_class_completion

View in Browser

Permite visualizar rapidamente o resultado no browser durante a codificação.

Podemos abrir o HTML no browser padrão diretamente do VSCode via atalho CTRL+F1.

O View in Browser suporta HTML apenas, portanto, para ver o site, precisará ter o HTML aberto. Você não pode acessar diretamente o browser de um arquivo CSS ou JS.

Debugger for Chrome

Considerada uma das extensions mais baixada. Esta extensão permite depurar JS no Chrome sem sair do editor. Isso significa que não precisamos trabalhar com o JS transpilado que o browser vê, mas podemos executar o debug diretamente dos arquivos originais.

A extensão tem todos os recursos necessários para um debug decente, como:

  • breakpoint setting
  • variable watching
  • stepping
  • debug console
  • etc

Para utilizá-la, inicie o Chrome com remote debugging enabled e configure o launch.json.

JSHint

Permite integrar o popular JSHint diretamente no editor, para sermos informado sobre erros.

Por padrão, ela utiliza as opções padrão do linter que podemos personalizar com a ajuda de um config file.

A utilização é simples, pois o JSHint marca os erros com vermelho e as notificações com sublinhado verde. Para mais informações sobre os problemas, passe o mouse sobre as partes sublinhadas e o JSHint exibirá um label com a descrição do problema.

vsc_front_jshint

jQuery Code Snippets

Permite gravar rapidamente o jQuery sem erros básicos de sintaxe.

Há cerca de 130 snippets que podemos invocar digitando o trigger certo.

Todos os snippets, exceto um, iniciam com o prefixo jq. A única exceção é a trigger func que insere uma função anônima no editor.

Essa extensão é útil quando não estamos certo sobre a sintaxe e desejamos ganhar tempo para verificar a documentação. Também facilita percorrer rapidamente as opções disponíveis.

vsc_front_jquery_snippets

Bower

Torna o workflow de dev Web mais intuitivo ao integrar o gerenciador de pacotes Bower ao editor.

Utilizando essa extensão, não é preciso alternar entre terminal/editor, mas poderá executar facilmente as tarefas de gerenciamento de pacotes diretamente no editor.

O Bower nos leva através da criação do bower.json do projeto e também podemos instalar, desinstalar, pesquisar, atualizar pacotes, gerenciar o cache e realizar várias outras tarefas.

Acesse os comandos Bower iniciando a paleta de comandos via F1, digitando “Bower” na barra de entrada, clicando na opção “Bower” na lista suspensa que aparece e escolhendo o cmd Bower apropriado.

vsc_front_bower

Git History

Permite acompanhar as mudanças de um projeto Git dentro do editor. Útil para contribuir com projeto grande do Github e que precisam analisar as modificações que outros devs fazem.

  • Visualize o histórico de um arquivo inteiro
  • Ou de uma determinada linha dentro dele
  • Compare versões anteriores do mesmo arquivo

Acesse os cmds Git History digitando “Git” na Paleta de Cmds (F1), escolha “Git” dentro da lista, e selecionar o cmd. É preciso abrir o arquivo para ver o histórico antes de executar qualquer ação nele.

vsc_front_git_history

Instalação

Antes que eu me esqueça. Instalando as extensões.

No VSCode Marketplace, toda extensão possui sua própria página, e você pode encontrar o comando de instalação da extensão no topo da página. O comando sempre inicia com o termo de instalação ext.

Para instalar, dê um CTRL + P para iniciar o painel Quick Open, copie/cole esse comando nele e, reinicie o editor para que a nova extensão funcione.

Para mais detalhes consulte a documentação da extensão.

Keep Programming!!!!