16 principais extensões de código do VS para desenvolvedores da Web

O Microsoft Visual Studio Code (VS Code) é um dos principais editores de código para desenvolvedores de software. Desde seu lançamento, sua popularidade aumentou não apenas por causa da plataforma estável que fornece, mas também por causa da natureza extensível que a Microsoft incorporou a ele. O mercado de extensões é uma cornucópia de add-ons e recursos que permitem aos desenvolvedores personalizar o VS Code no ambiente de desenvolvimento dos seus sonhos. Queremos detalhar algumas das principais extensões do VS Code disponíveis hoje para que você não perca nenhuma.

1. Mapa de teclado de texto sublime e importador de configurações

No topo da nossa lista está o importador de configurações e mapa de teclas de texto sublime apropriadamente intitulado. Caso o título não seja descritivo o suficiente, esta extensão permite que você extraia seus mapas de teclado e configurações Sublime Text existentes para que você possa fazer a transição perfeita para o uso do VS Code como padrão. Já que tantas pessoas amam o Sublime e passaram anos nele, fazer o VS Code manter a memória muscular conquistada daquele editor faz muito sentido.

2. Snippets de código JavaScript (ES6)

Digitar JavaScript (ou qualquer código) pode se tornar complicado quando você repete os mesmos trechos indefinidamente. Esta extensão ajuda a aliviar isso, permitindo que você basicamente escreva atalhos para trechos de código usados ​​com frequência. Quando acionado, o snippet simplesmente substitui o texto e o insere diretamente no documento.

3. Par de suporte Colorizer 2

Independentemente da linguagem que você codificar, os colchetes provavelmente serão uma parte importante dele. E mantê-los retos pode ser uma dor de cabeça. Mas com esta extensão do VS Code, você pode codificar com cores os pares correspondentes para ajudar a aliviar aquele ponto problemático e trabalhar para fazer o próprio código funcionar - não o editor.

4. ESLint

De muitas maneiras, ESLint é o linter para JavaScript. Detectar erros e fornecer feedback e avisos imediatos é essencial para manter o código de sua equipe limpo, e realmente não há maneira melhor de fazer isso em JS do que ESLint. É altamente recomendável instalar este o mais rápido possível.

5. Gerente de Projeto

Um problema com o VS Code que surge com bastante frequência é como alternar entre diferentes projetos. Por padrão, o fluxo não é exatamente o mais intuitivo. Portanto, o Project Manager trabalha para corrigir esse problema, fornecendo a você um menu na barra lateral que você pode usar para salvar diferentes pastas e projetos Git para alternar facilmente entre eles. Isso não é tanto uma melhoria do editor, mas sim um aumento na qualidade de vida.

6. Visualização do navegador

Um dos elementos mais desagradáveis ​​do desenvolvimento da web é carregar e atualizar seu conteúdo em diferentes navegadores para teste. A Visualização do navegador ajuda a limitar a quantidade de que você precisa para fazer isso, fornecendo uma visualização sólida do seu trabalho dentro do próprio VS Code em um novo processo do Chrome.

7. Mais bonito

Todos nós queremos um código mais bonito. Portanto, provavelmente todos deveríamos instalar o Prettier para lidar com isso para nós. A descrição descreve o Prettier como um "formatador de código opinativo, ele impõe um estilo consistente ao analisar seu código e imprimi-lo novamente com suas próprias regras que levam em consideração o comprimento máximo da linha, agrupando o código quando necessário". Você pode não querer usá-lo para todos os idiomas ou projetos, portanto, há várias opções de configuração para que você possa personalizá-lo ao seu gosto.

8. gitlink

Gostamos do gitlink por causa de sua simplicidade. Embora existam muitas extensões Git por aí, uma das coisas sobre o gitlink é que ele é simples e faz apenas uma coisa. E funciona bem. Basta destacar um fragmento de código e o gitlink o levará ao repositório online desse fragmento específico. É extremamente útil ir rapidamente para o seu repo, não importa onde ele esteja hospedado remotamente.

9. Melhores comentários

Comentar seu código é um dos hábitos mais importantes que um desenvolvedor pode ter. Mais do que isso, comentar bem o seu código é uma habilidade que deve ser ensinada em todas as aulas de ciência da computação e bootcamp de codificação por aí. Dito isso, Better Comments é uma daquelas extensões de código VS que todos precisam porque, se você acreditar no nome, permitirá que você deixe comentários melhores em seu código. Com atalhos que permitem diferenciar entre perguntas, exclamações, código comentado, consultas, alertas, destaques e TODOs, esta extensão não apenas tornará sua vida mais fácil, mas tornará a vida de sua equipe mais fácil. E qualquer desenvolvedor que vier atrás de você no projeto. Não podemos recomendar isso o suficiente.

10. Ícones de código VS

Uma parte importante da personalização do VS Code com extensões é a personalização real. Não apenas mudanças de funcionalidade. Com VS Code Icons, o editor se torna um pouco mais colorido e fácil de navegar. O sistema de arquivos é coberto com ícones que representam vários tipos de arquivo, e eles aparecem no explorer, bem como nas próprias guias do documento. Isso torna muito mais fácil e menos problemático trabalhar em sistemas de arquivos complicados. Literalmente às vezes. A facilidade de leitura dos ícones evita fadiga ocular e, consequentemente, dores de cabeça. Portanto, para sua saúde, instale VS Code Icons.

11. Tag de fechamento automático

Talvez sejamos nós, mas digitar as tags de fechamento para qualquer idioma torna-se uma tarefa árdua. Há simplesmente algo sobre adicionar que / in no final que faz com que os pressionamentos de tecla pareçam um pouco estranhos. Nunca tema. Tag de fechamento automático tornou nossas vidas mais fáceis. Então, queremos tornar o seu mais fácil. É simples e fácil e você pode continuar digitando entre eles e simplesmente pressionar a tecla até a próxima linha ou até o final dela. Instale-o e dê aos seus dedos uma pausa da ginástica de fechar as tags manualmente.

12. colorir

CSS é ótimo. Escolher cores em CSS não é. Quando você está lidando com códigos hexadecimais e valores RGBA, às vezes é difícil obter uma imagem mental de qual paleta você definiu para um site. Esta extensão ajuda a aliviar isso, fornecendo uma nota visual para quaisquer códigos de cores que você usa dentro de seus arquivos. Você pode ver as cores que está usando dentro do próprio texto como um destaque, para que não precise ficar constantemente trocando amostras e seletores de cores e assim por diante.

13. Polacode

Polacode é como uma câmera Polaroid para seu editor de código. Projetado para tornar o instantâneo de seu código mais limpo e fácil, isso é obrigatório para qualquer redator de tutorial que deseja que seu código seja perfeito.

14. GitLens

É difícil explicar totalmente o que torna o GitLens tão bom. Funciona como se o Git e o VS Code tivessem sido projetados um com o outro em mente e, em vez de trabalhar por meio de hierarquias de linha de comando, você obtém visualizações e insights que eliminam grande parte da confusão do trabalho em equipe do Git. Você pode ver as coisas através do foco, ver alterações recentes e anotações, visualizações de comparação dentro do próprio VS Code, mapas de calor, histórico de linha e muito mais. É basicamente a extensão Git perfeita e achamos que você deve instalá-la imediatamente.

15. Servidor Live

Você já quis lançar um servidor de desenvolvimento local de dentro do seu IDE e trabalhar nele em tempo real? Não importa como você respondeu a essa pergunta, você vai querer dar uma chance ao Live Server. Porque é exatamente isso que você pode fazer com ele. Embora possa não remover completamente a necessidade de produtos como Local by Flywheel e MAMP, certamente reduz a necessidade em muitas situações.

16. Embeleze

O Beautify usa o popular js-beautify para manter seu JavaScript com uma aparência agradável e organizada. Não se preocupe com linhas quebradas e espaçamentos e recuos estranhos. Basta clicar em um botão e todo o seu código estará pronto para seu close-up (talvez com o Polacode acima).

Conclusão

Essa lista pode ter milhares de itens. Na verdade, provavelmente alguns de vocês têm centenas de extensões diferentes instaladas que podem ser ativadas e desativadas em momentos diferentes. Mas achamos que essas são as extensões do VS Code que você pode instalar e aprender o que mais deseja à medida que se aprofunda no mercado.

Quais são as suas extensões de código VS preferidas? Deixe-nos saber nos comentários!

Artigo caracterizado por imagem por SVIATLANA SHEINA / shutterstock.com