As 10 melhores extensões de código VS de 2018 para desenvolvedores front-end

Provavelmente, o Visual Studio Code pode ser chamado de melhor editor de código moderno. Se você ainda não está trabalhando com ele, deve pelo menos olhar para ele. Muitas extensões foram escritas para o VS Code, que são colocadas no diretório Marketplace , cujo acesso conveniente é organizado a partir do próprio editor.

Existem extensões para código de depuração e formatação, extensões que facilitam o trabalho com várias plataformas (como Heroku, GitHub, Docker, Azure) e tecnologias. No Marketplace, você pode encontrar temas para o editor, linter, ferramentas para facilitar a entrada de fragmentos de código repetidos e muito mais.



O autor do material, cuja tradução estamos publicando hoje, selecionou as 10 melhores extensões de código VS, destinadas principalmente para quem está envolvido no desenvolvimento front-end, ou seja, trabalha com HTML, CSS, JavaScript e várias estruturas da web.

Informações preliminares

Se você não trabalhou com o VS Code antes, mas deseja experimentar este editor, faça o download aqui . Mas, se estiver interessado, um material em que suas capacidades são demonstradas.

Após baixar e instalar o VS Code, abra o painel de extensões.


Painel de extensão

Em seguida, usando o campo de pesquisa, encontre a extensão em que está interessado, estude as informações sobre ela e, se você decidir que precisa, instale-a. As ferramentas de pesquisa de extensões se parecem com a imagem abaixo.


Pesquisar extensões para o VS Code no Marketplace

Agora vamos falar sobre extensões.

Servidor ao vivo

Extensão de servidor ao vivo

Esta maravilhosa extensão foi projetada para criar um servidor local, usado durante o desenvolvimento para hospedar páginas estáticas e dinâmicas nele. Depois de instalar esta extensão, o botão Go Live aparecerá na barra de tarefas, o que permite iniciar o servidor. Pressionar esse botão durante a edição de uma página HTML fará com que essa página seja aberta em um navegador. O servidor suporta o recarregamento interativo de páginas, que é realizado após fazer alterações no código e salvar os arquivos correspondentes.

Compilador sass ao vivo

Extensão Live Sass Compiler

Esta extensão, interativamente, compila arquivos SCSS em arquivos CSS. Isso é feito muito rapidamente. Você pode iniciar uma visualização dos resultados da aplicação de estilos compilados em um navegador usando o botão Assista meu sass na barra de tarefas. Esta extensão, como discutido anteriormente, suporta recarga interativa de materiais.

Fragmentos de código Javascript (ES6)

Snippets de código da extensão Javascript (ES6)

Essa extensão é digna de nota, pois possui mais de 2 milhões de downloads e, aparentemente, sua popularidade só cresce com o tempo. Ele fornece ao desenvolvedor construções de software (trechos) adequados para uso nos seguintes tipos de arquivos:

• TypeScript (.ts)
• Reação JavaScript (.jsx)
• Reação TypeScript (.tsx)
• Html (.html)
• Vue (.vue)

NPM

Extensão NPM

Essa é a extensão oficial do Node Package Manager (npm) para o VS Code. Isso facilita o trabalho com o arquivo package.json. Em particular, ele exibe avisos sobre dependências refletidas no arquivo, mas não instaladas, bem como sobre as que estão instaladas, mas não estão registradas no pacote.json. Ajuda a identificar pacotes cujas versões não estão em conformidade com as regras especificadas em package.json e fornece ao desenvolvedor ferramentas convenientes para executar comandos npm.

ESLint

Extensão ESLint

Esta extensão fornece recursos de linting para arquivos .js e .jsx. É configurável e permite uma formatação uniforme de código. O ESLint, com seus quase 12 milhões de downloads, pode ser chamado de uma das extensões mais populares do VS Code.

Mais bonito

Extensão mais bonita

Esta extensão altamente popular possui quase quatro milhões de downloads. Ajuda a formatar o código JavaScript, o que permite manter uma base de código uniforme e melhora a legibilidade dos programas. Existe uma extensão semelhante no Marketplace, Beautify, também bastante popular.

CSS Peek

Extensão CSS Peek

Essa extensão útil é útil ao trabalhar com o layout da página, identificando e derivando, com base em nomes de classe e identificadores de elemento, estilos aplicados a eles. Isso ajuda a economizar tempo, eliminando a necessidade de o desenvolvedor alternar constantemente entre arquivos HTML e CSS. Obviamente, essas tarefas podem ser resolvidas visualizando os arquivos apropriados no modo de tela dividida, mas nem todo mundo gosta de trabalhar nesse estilo.

6 trechos angulares

Extensão angular de 6 trechos

Essa é a extensão oficial que oferece trechos de desenvolvedores para o Angular 6. O código correspondente segue o guia de estilo Angular; o uso dessa extensão acelera o processo de desenvolvimento de projetos Angular, principalmente devido à conclusão do código. Ele suporta TypeScript, sintaxe do operador de serviço, RxJS, ngRx e até mesmo Material Angular. Se você está desenvolvendo aplicativos Angular no VS Code e ainda não está usando esta extensão, definitivamente deve dar uma olhada nela.

Vetur

Extensão Vetur

Esta é a extensão oficial Vue.js para o VS Code, com um número impressionante de downloads, dos quais possui mais de 5 milhões. Destina-se a facilitar o desenvolvimento de aplicativos Vue.js. O Vetur pode verificar se há erros no código, suporta preenchimento automático e trechos.

Depurador para Chrome

Depurador para extensão do Chrome

Esta é a extensão oficial do VS Code, projetada para depurar o código JS usando o Google Chrome. Atualmente, é uma das extensões de código VS mais usadas.

Sumário

Examinamos apenas uma dúzia de extensões para o VS Code, mas na verdade existem muitas. É bem possível que, ao explorar o catálogo do Marketplace, você encontre algo que lhe pareça muito mais útil do que as extensões discutidas. No entanto, a maioria deles pode ser de grande ajuda para qualquer desenvolvedor front-end. Esperamos que eles também sejam úteis para você.

Se você está interessado no tópico de extensões para o VS Code - aqui está outro material sobre eles, focado nos desenvolvedores de JS. Ao publicar esse material, perguntamos aos leitores sobre quais extensões eles usam. Então , descobriu-se que este é o Code Outline, Todo Tree e GitHub. Hoje, queridos leitores, queremos fazer a mesma pergunta. Quais extensões do VS Code você gosta?