8 poderosas extensões de código do Visual Studio para desenvolvedores front-end

Embora a Microsoft tenha lançado a primeira versão estável do Visual Studio Code, seu poderoso editor de código há apenas alguns meses, em março de 2016, já tem muitas extensões disponíveis que podem levar a experiência de codificação ao próximo nível. o extensões oficiais de código do Visual Studio estão hospedados no Visual Studio Code Marketplace, muitos dos quais podem ser de grande ajuda para desenvolvedores web.

Para este post, eu testei um monte de extensões VS Code relacionadas ao desenvolvimento front-end, e fiz uma lista das que eu encontrei mais intuitivo, fácil de usar e conveniente. Não é uma lista final por todos. Aproveite o tempo para navegar pelo mercado e ver o que mais pode oferecer a você, especialmente porque muitas grandes extensões ainda estão por vir..

Como instalar extensões de código VS

Instalar uma extensão é bastante simples no Visual Studio Code, como você pode faça dentro do editor de código. No mercado de códigos VS, cada extensão tem sua própria página, e você pode encontrar o comando que você pode instalar a extensão dada no topo desta página..

O comando sempre começa com o instalação ext prazo. Para instalar uma extensão, apenas pressione CTRL + P dentro do VS Code para iniciar o painel Quick Open, Copie e cole este comando para ele e, finalmente, reiniciar o editor de código para fazer o novo trabalho de extensão.

8 poderosas extensões de código do Visual Studio

Snippets de HTML

Se você quiser gravar HTML com frequência no Visual Studio Code, a extensão de fragmentos de HTML pode ser uma ferramenta útil, já que adiciona suporte elaborado para HTML. Embora o VS Code tenha suporte básico para HTML, como coloração de sintaxe, a extensão de fragmentos de HTML sabe muito mais.

Provavelmente, o recurso mais útil dessa extensão é que quando você começa a digitar o nome de uma tag HTML (sem o colchete angular inicial), os fragmentos de HTML são rapidamente exibe uma lista das opções disponíveis com uma breve informação sobre cada.

Quando você clica no elemento de que precisa, o HTML Snippets adiciona a tag HTML5 completa às suas propriedades mais comuns. Por exemplo, se você quiser adicionar um link (tag âncora) ao seu documento, basta digitar um uma em Código VS, escolha a opção correta na caixa pop-up, e os Snippets HTML irão inserir snippet no seu editor sem problemas.

O autor desta extensão também presta atenção na remoção de elementos obsoletos, portanto, se você quiser usar uma tag HTML que não pode ser encontrada na lista pop-up, vale a pena verificar se ela ainda é válida ou não.
Conclusão da Classe CSS HTML

HTML CSS Class Completion pode ser uma extensão útil se você precisar usar muitos Classes CSS no seu projecto. Freqüentemente nos acontece desenvolvedores, que somos não completamente certo no nome exato de uma classe, mas apenas fica no fundo da nossa mente como conhecimento passivo.

Esta extensão inteligente dá uma solução para este problema, uma vez que busca os nomes de todas as classes CSS no espaço de trabalho atual e exibe uma lista sobre eles.

Digamos que você queira criar um site usando o Zurb Foundation e deseja usar a pequena grade. Você não lembra como as classes são exatamente nomeadas, mas você sabe que elas têm nomes semânticos.

Com o HTML CSS Class Completion, você só precisa começar a digitar a palavra pequeno, e as opções disponíveis aparecem em sua tela ao mesmo tempo, para que você possa selecionar facilmente o que precisa.
Visualizar no navegador

View in Browser é uma extensão simples mas poderosa para o Visual Studio Code. Pode facilitar o desenvolvimento do front-end, permitindo que você dê uma olhada rápida no resultado do seu trabalho no navegador enquanto codifica. Você pode abrir seu arquivo HTML no navegador padrão diretamente do VS Code pressionando o CTRL + F1 atalho de teclado.

Observe que Visualizar no navegador suporta apenas HTML, Então, se você quiser ver o seu site, você precisa ter o arquivo HTML aberto. Você não pode acessar diretamente o navegador a partir de um arquivo CSS ou JavaScript.
Depurador para o Chrome

O Depurador para Chrome foi criado pela própria Microsoft e é atualmente a 4ª extensão de código do Visual Studio baixada com mais frequência.

O depurador do Chrome torna possível depurar JavaScript no Google Chrome sem sair do editor de código. Isso significa que você não precisa trabalhar com o JavaScript transpilado que o navegador vê, mas você pode executar a depuração diretamente dos arquivos originais. Veja esta demonstração para ver como funciona.

A extensão tem todos os recursos que um depurador decente precisa, como configuração de ponto de interrupção, variável assistindo, pisando, uma consola de depuração acessível, e muitos outros (veja a lista de recursos da primeira versão).

Para usar essa extensão, você precisa iniciar o Chrome com depuração remota ativada, e configurar um bom launch.json Arquivo. Este último pode demorar um pouco, mas você pode encontrar instruções detalhadas sobre o GitHub sobre como fazê-lo corretamente.
JSHint

A extensão JSHint do Visual Studio Code integra o popular JSHint JavaScript linter diretamente no editor de código, para que você possa ser informado sobre seus erros assim que você os comprometer. Por padrão, a extensão JSHint usa as opções padrão do linter que você pode personalizar com a ajuda de um arquivo de configuração.

O uso dessa extensão é bastante simples, pois o JSHint marca os erros com vermelho e as notificações com um sublinhado verde. Se você quiser mais informações sobre os problemas, apenas passe o mouse sobre as partes sublinhadas e o JSHint exibirá um rótulo com a descrição do problema de uma só vez..
Snippets de código jQuery

Os trechos de código do jQuery podem acelerar bastante o desenvolvimento do front-end no código do Visual Studio, já que ele permite que você grave rapidamente o jQuery sem erros básicos de sintaxe. Snippets de código jQuery atualmente tem cerca de 130 trechos disponíveis você pode invocar digitando o gatilho certo.

Todos os trechos de jQuery, mas um começo com o jq prefixo. A única exceção é a func desencadear isso insere uma função anônima no editor.

Essa extensão útil é uma ajuda conveniente quando você não tem certeza da sintaxe correta e deseja poupar tempo para verificar a documentação. Também torna mais fácil percorrer rapidamente as opções disponíveis.
Bower

A extensão Bower VS Code pode tornar seu fluxo de trabalho de desenvolvimento da Web mais intuitivo ao integrar o gerenciador de pacotes Bower ao Visual Studio Code.

Se você colocar esta extensão em uso você não tem que alternar entre o terminal e o editor, mas você pode facilmente realizar suas tarefas de gerenciamento de pacotes diretamente dentro do Visual Studio Code.

A extensão Bower leva você através da criação de seu projeto bower.json arquivo, e você também pode instalar, desinstalar, pesquisar, atualizar pacotes, gerenciar o cache e executar muitas outras tarefas com ele (consulte a lista completa de recursos).

Você pode acessar comandos relacionados ao Bower iniciando a Paleta de Comandos pressionando F1, digitando “Bower” na barra de entrada, clicando no “Bower” opção na lista suspensa exibida e escolhendo o comando Bower apropriado.
História do Git

Git History torna possível seguir as alterações de um projeto Git dentro do Visual Studio Code. Essa extensão é especialmente útil quando você deseja contribuir com um projeto maior do Github e precisa de uma maneira de verificar rapidamente as modificações que outros desenvolvedores fizeram.

Com a extensão do histórico do Git instalada, você pode ver a história de um arquivo inteiro ou linha particular dentro dele. Você também pode comparar versões anteriores do mesmo arquivo.

Você pode acessar os comandos relacionados ao Git History se você digitar a palavra “Git” na Paleta de Comandos (F1), escolha “Git” dentro da lista suspensa e, finalmente, selecione o comando que você precisa. Observe que você precisa abrir o arquivo do qual você deseja ver o histórico antes de executar qualquer ação nele.