Visual Studio Code e JavaScript, a dupla de tecnologias front end amada por 10 entre 10 programadores front. E, como todo os que usam VSCode sabem, é possível usar extensões (ou plugins) para melhorar o JavaScript e aprimorar como se codifica na ferramenta.
Veja a seguir um compilado especial com as 10 melhores extensões JavaScript para se usar no Visual Studio Code em 2019 e dar aquele boost na produtividade no front end!
Quokka.js
Quokka.js é um “playground de prototipagem rápida” para JavaScript (e TypeScript). Ele executa códigos imediatamente enquanto você digita e exibe vários resultados de execução diretamente no VS Code.
Isso mesmo: os resultados dos códigos JavaScript vão aparecendo enquanto você digita, diretamente no editor!
No início, trabalhar com JavaScript no Visual Studio Code com o Quokka habilitado vai ser um pouco estranho, mas depois de não muito tempo, provavelmente você já vai ter se acostumado. Fazer códigos, testes, debbuging e prototipagem nunca mais será como antes!
Vamos adiantar de uma vez: trata-se de uma extensão paga, ou seja, para usar tudo o que Quokka.js tem a oferecer, você vai ter que desembolsar uma licença em dólares.
Mas não se preocupe, porque você pode instalar à vontade a versão “Community”, que já dá para ter uma boa noção de como é mexer com JS no VS Code usando o Quokka.js.
Apesar de essa compilação das melhores extensões do VSCode para JavaScript não estar disposta em nenhuma ordem em particular, o Quokka veio primeiro por um motivo: realmente, é uma das mais fantásticas extensões para JavaScript do Visual Studio Code!
REST Client
É bastante comum para desenvolvedores front end precisarmos trabalhar com APIs REST. Existem muitas boas ferramentas para examinar URLs/endpoints e verificar suas respostas, como o excelente Postman, por exemplo.
Mas por que usar um aplicativo à parte quando seu editor favorito pode facilmente realizar a mesma tarefa?
Conheça o REST Client, extensão JavaScript que permite enviar solicitações HTTP e visualizar respostas diretamente no Visual Studio Code! Com certeza, uma das melhores extensões JavaScript para o editor.
Não pense que trabalhar com JavaScript no VS Code usando REST Client proverá somente repostas “cruas” de requisições; ele possui, literalmente, dezenas de opções e funcionalidades. Dê uma olhadinha na página do plugin para conhecê-las.
Existem sim ferramentas mais completas, com mais opções para consultar APIs, mas o REST Client se mostrou o equilíbrio admirável entre ter uma ferramenta funcional para testar APIs e nunca ter que sair do editor de códigos.
npm Intellisense
O desenvolvimento front end moderno usa pacotes e bibliotecas em grande número, até para projetos dos mais simples. Não ajuda bastante um autocomplete para todos eles?
É justamente este o papel do npm Intellisense para VS Code: o plugin autocompleta módulos npm e import statements.
A extensão possui uma variedade de opções e possibilidades de uso, sendo bem versátil para a “simples” tarefa de autocompletar nomes de pacotes que serão usados.
Certamente, é um extensão para codificar em JavaScript no Visual Studio Code das mais diretas e úteis, que aumenta bastante a produtividade no dia-a-dia.
Import Cost
Dentro de uma compilação com as melhores extensões Visual Studio Code para JavaScript, não poderia faltar uma para aquela ajuda monstro em performance, hã?
A extensão Import Cost permite que você veja o tamanho de um módulo importado no JavaScript. Ela ajuda você a avaliar se importar uma biblioteca inteira é realmente necessário ou apenas um utilitário específico necessário.
O Import Cost consegue calcular o tamanho de imports e requires, atendendo a padrões do tipo:
import Func from 'utils'import * as Utils from 'utils'import {Func} from 'utils'import {orig as alias} from 'utils'import Func from 'utils/Func'const Func = require('utils').Func
E um benefício extra: a extensão também dá suporte a Typescript.
Live Server
O Live Server oferece uma maneira fácil de servir páginas estáticas e dinâmicas a partir do VS Code, oferecendo suporte a live reloading. Se você está familiarizado com algum plugin de navegador ou qualquer um dos pacotes npm que servem para isso, com certeza você vai gostar dessa extensão.
A extensão possui algumas configurações e atribui funcionalidades/atalhos interessantes ao Visual Studio Code para se trabalhar com o servidor.
Evidentemente, projetos mais complexos talvez não se beneficiem de uma solução de live server como esta extensão, mas, tenha certeza, o Live Server dá conta de ajudar em bastante situações. Definitivamente, você deveria dar uma olhada.
Debugger for Chrome
É uma realidade dura, mas debugging faz parte do dia-a-dia de muitos programadores. Então, nada mais justo do que facilitar esta nada aclamada tarefa propiciando facilitadores para tal.
Debugger for Chrome é uma extensão Visual Studio Code para debugar JavaScript de maneira fácil no Chrome ao marcar breakpoints diretamente dentro do VSCode.
A extensão provê todas as funcionalidades esperadas de um debugger, como breakpoints, stepping, watches, console etc.
É um plugin do VSCode um pouco mais complexo, então seria muito bom você dar uma olhada nos tutoriais para saber como proceder corretamente.
Paste JSON as Code
Paste JSON as Code é uma extensão VS Code que converte rapidamente dados de JSON para JavaScript — e uma série de outras linguagens, como TypeScript, Python, Go, Ruby, Swift, Elm e outras.
Basicamente, a extensão pega os poderes do quicktype.io gerar interativamente tipos e código de (des)serialização de JSON/JSON Schema/TypeScript e permite colar JSON/JSON Schema/TypeScript como código direto no VSCode.
A extensão infere tipos de dados JSON de amostra e, em seguida, gera modelos e serializers fortemente tipados para trabalhar com esses dados na linguagem de programação desejada — leia este tutorial para mais detalhes sobre seu funcionamento.
Ela possui algumas opções para customização e adiciona ações no Visual Studio Code. Confira a página do Paste JSON as Code para maiores informações.
ES7 React/Redux/GraphQL/React-Native snippets
Para trabalhar com JavaScript no VS Code seriamente com stacks modernos, snippets não podem ficar de fora.
Neste caso, ES7 React/Redux/GraphQL/React-Native snippets é uma extensão indispensável de se usar, neste contexto sendo uma das melhores extensões Visual Studio Code para JavaScript.
Pode demorar um pouquinho para decorar os atalhos de ativação, mas através de suas dezenas e dezenas de snippets para se trabalhar com ES6 e ES7, React, Redux, GraphQL e React-Native, a extensão rapidamente vai se tornar indispensável.
ESLint
ESLint transforma o linter JavaScript mais popular em uma extensão para o VS Code!
Se você já usa o ESLint em seus projetos, vai se sentir em casa; se ainda não usa, você está prejudicando seriamente a qualidade de seus códigos.
Se você ainda não conhecia o ESLint, ele é uma ferramenta poderosíssima e, como tal, vai exigir de você algum trabalho de documentação. Leia a documentação do ESLint para conhecer todas as possibilidades.
Prettier – Code formatter
Prettier é um dos mais famosos (se não, o mais famoso) formatador de códigos da atualidade. Ele modifica seu código para atender a uma série de regras predeterminadas, poupando bastante tempo e discussões desnecessárias sobre style guides.
Codificar JavaScript no Visual Studio Code ficou ainda melhor com a extensão Prettier – Code formatter, que traz o poder no Prettier para dentro do VSCode.
Prettier é uma ferramenta bastante poderosa, que também vai exigir um estudo prévio de sua parte para ser bem usada. Acesse o site e estudo mais sobre ela para fazer bom uso no VS Code.
Ah, e é possível dar um boost de produtividade no JavaScript no Visual Studio Code usando o Prettier – Code formatter juntamente com o ESLint!
Para mais detalhes (e um macetinho especial) sobre como fazer isso, leia este artigo que explica como fazer a mágica acontecer.
Menções honrosas de extensões JavaScript para Visual Studio Code
O VSCode possui uma lista infindável de extensões/plugins, não somente para JavaScript, mas para quase tudo de codificação.
Com a devida licença para tangenciar o tópico principal abordado (melhores extensões de Visual Studio Code para JavaScript), há algumas menções honrosas de extensões que não poderiam faltar em uma compilação deste tipo.
Estas são extensões para se usar “em geral” no VS Code, que certamente podem trazer algum benefício na codificação do dia-a-dia:
- Bracket Pair Colorizer e Indent Rainbow — Duplinha que facilita bastante o “escaneamento”/identificação de códigos.
- GitLens — Aumenta e aprimora tudo relacionado a Git no VSCode.
- VSCode Icons — Ícones bonitinhos pode parecer só uma firula, mas ajuda na identificação/produtividade.
- Babel JavaScript — Syntax highlighting para ES201x, React JSX, Flow e GraphQL.
- Path Intellisense — Autocomplete para nomes de arquivos.
- Node TDD — Test-driven development para Node/JavaScript direto no Visual Studio.
- CodeMetrics — Calcula a complexidade de arquivos JavaScript/TypeScript.
- Regex Previewer — Ajuda com regex, abrindo textos complementares para testar matches em tempo real.
- Settings Sync — Sincroniza configurações, extensões e atalhos entre diversas instalações do VS Code.
Conclusão
Estas foram nossas indicações das 10 melhores extensões Visual Studio Code para JavaScript em 2019 — com mais 10 de bônus!
Como se sabe, um programa tão popular como o VSCode faz crescer um ecossistema em torno de si que só tende ao crescimento.
Estas foram as sugestões dpw de melhores plugins VS Code para JavaScript, mas, certamente, muitas outras estão disponíveis e merecem atenção.
E você, tem mais alguma sugestão de extensão JavaScript para Visual Studio Code? Esquecemos de citar alguma importante?
Conta pra gente nos comentários!