VSCode – 10 extensões essenciais para um programador JavaScript

Conheça 10 extensões do VSCode para se tornar um programador JavaScript mais produtivo em sua rotina de desenvolvimento.

 

Introdução

O Visual Studio Code está na lista dos editores de texto mais utilizados por programadores na atualidade. Ele chama a atenção por ser muito leve e por uma vastidão de extensões que melhoram a produtividade dos programadores.

Por esses motivos, este artigo tem o objetivo de facilitar a vida de programadores Javascript que utilizam o VSCode apresentando extensões de grande utilidade no dia a dia.

 

Lista de Extensões

 – Npm Intellisense
2   – Import Cost
 – Live Server
4   – Debugger for chrome
 – Paste Json as Code
 – ESLint
 – Prettier
 – Bracket Pair Colorizer
 – Better Comments
10 – Quokka JS


+ Bonus

1   – GitLens
2   – Auto Rename Tag
3   – Settings Sync

 

Detalhes de cada Extensão

 

1- Npm Intellisense

Esse plugin é útil para a agilidade na importação de módulos npm. Ele é capaz de identificar o que você deseja importar e te dar sugestões para o preenchimento automático da importação.

 

 

2- Import Cost

Uma ótima extensão para você ter conhecimento do tamanho de cada importação que realiza. Para isso ela faz uma exibição inline do tamanho da importação.
Um exemplo de uso é saber a diferença entre importar uma biblioteca inteira ou só a parte que você utilizará.

 

 

3- Live Server

Com ela é possível inicial um servidor localmente para páginas estáticas e dinâmicas com live reload, ou seja, o navegador atualizará automaticamente a cada alteração salva em um arquivo.

 

 

4- Debugger for chrome

Permite que desenvolvedores JavaScript depurem seus códigos dentro do VSCode utilizando um navegador Google Chrome como auxílio ou outras ferramentas que suportam o Chrome DevTools Protocol.

É uma extensão muito completa e merece uma publicação dedicada a ela.

 

 

5- Paste Json as Code

Uma ferramenta que converte automaticamente os dados de um JSON para um model fortemente tipado ou um serializer.
Ela também funciona com outras linguagens de programação.

 

 

6- ESLint

Essa extensão te ajuda a encontrar e corrigir problemas em seu código Javascript.
É algo essencial para o seu dia a dia!

 

 

7- Prettier

Prettier é um formatador de código opinativo. Ele analisa e retorna o código de forma consistente utilizando algumas regras que podem ser ajustadas, ou seja, você pode configurar para que ao salvar um arquivo a extensão analise o código dele e o devolva formatado. Tudo isso utilizando boas práticas.
Ele é um complemento ao ESLint.

 

 

8- Bracket Pair Colorizer

O que tem de simples tem de incrível. Essa extensão utiliza cores na definição de chaves, parenteses e colchetes para facilitar o entendimento das associações de cada um (onde começa e onde termina).

 

 

9- Better Comments

Ela te ajudará a criar comentários mais amigáveis em seu código.

Com ela você poderá categorizar suas anotações em:

  • Alerts
  • Queries
  • TODOs
  • Highlights
  • Comentários para se referir a códigos que não deveriam ser utilizados
  • Qualquer outro tipo de comentário que você configurar

 

 

10- Quokka JS

É uma ferramenta de produtividade para prototipagem rápida de JavaScript e Typescript.

Com ela, conforme você escreve seu código os resultados dele vão sendo exibidos diretamente no VSCode.

 

 

 


 

Programador(a), uma pergunta importante!

 

Você sente verdadeiramente que é um Programador(a) completo(a)?


Por muito tempo eu fiquei em dúvida se eu estava pronto ou não e essa insegurança me levou a pesquisar profundamente sobre o que realmente é necessário para ser um programador web completo.

Depois de fazer muitos treinamentos, ler muitos livros, conversar com outros desenvolvedores, ir a eventos e até trabalhar em empresas do Brasil e do exterior foi que eu pude encontrar as bases fundamentais para ser um programador Web com confiança (sem medo de buscar jobs e assumir grandes projetos).

Eu peguei todo esse conhecimento e somei com toda a didática que eu aprendi criando cursos e tutoriais que são acessados por milhares de pessoas todos os meses e criei um treinamento chamado Programador Full Stack Javascript.

Nele eu vou te mostrar o ‘caminho das pedras’, ou seja, o essencial para você dominar a programação web, se sentir mais completo(a) e conseguir o seu tão merecido Job de respeito.

Então se você quer evoluir de verdade (sem perda de tempo), clica no link abaixo e conheça o treinamento agora.

Link: Programador Full Stack Javascript em 8 semanas ->

 


 

 

Bônus

Aproveitando o embalo do foco dessa publicação, que tal um bônus com dicas de extensões para qualquer tipo de programador?

A seguir veja mais algumas extensões que irão aumentar sua produtividade.

 

1- GitLens

Uma ferramenta que auxilia no entendimento do código de um projeto git. Com ela você consegue visualizar rapidamente quem, porque e quando  um bloco ou uma linha de código foi modificado.

Ela se destaca por proporcionar uma forma simples de navegar entre o histórico de modificações do seu projeto e entender a evolução do código.

 

 

2- Auto Rename Tag

Muitas vezes fiquei frustado em ter de alterar uma tag em sua abertura e fechamento, ou seja, fazer o mesmo trabalho duas vezes. Essa extensão me deixou aliviado pois tendo ela instalada, ao alterar o nome de uma tag em sua abertura, o nome da tag é automaticamente atualizado em seu fechamento e vice-versa.

 

 

3- Settings Sync

Com essa extensão você conseguirá compartilhar entre múltiplas máquinas suas Configurações, Snippets, Temas, File Icons, Launch, Atalhos, Workspaces e Extensões utilizando um Github Gist, ou seja, além desse compartilhamento você estará automaticamente fazendo backup do seu Editor de Texto.

 

 

Conclusão

Não é atoa que o VSCode se tornou um dos maiores editores de texto da atualidade.

Em sua instalação padrão ele já é muito completo para uma rotina produtiva, porém, nessa publicação foi possível descobrir que algumas extensões voltadas para programadores JavaScript farão seus dias se tornarem ainda mais produtivos.

Você gostaria de novos conteúdos de produtividade?

Faça um comentário com dicas para nos ajudar a continuar trazendo conteúdos úteis para o seu dia a dia!

 

5 2 votes
Article Rating
maio 28, 2020
Subscribe
Notify of
guest
3 Comentários
Oldest
Newest Most Voted
Inline Feedbacks
View all comments
Flávio Camilo
Flávio Camilo
1 mês atrás

Perfeito , podia faZer mais posts nessa linha é uma possível Live de uso.

Leonardo Scorza
1 mês atrás
Reply to  Flávio Camilo

Boa Flávio, valeu pelo comentário 🙂

Marcelo
Marcelo
1 mês atrás

Acho que não precisa mais do plugin Settings Sync, pq o vscode já está com essa opção, tanto pra conta Microsoft quanto pro github, pelo menos no vscode insider.

Feito com s2 por OneBitCode
3
0
Would love your thoughts, please comment.x
()
x
%d blogueiros gostam disto: