Executando verificação de segurança...
5

Melhores plugins para você usar no VSCode

Olá, seja bem-vindo(a) ao meu primeiro post aqui no TabNews! Nesse post eu vou falar sobre alguns plugins bastante interessantes e que, na minha opnião, vão ajudar você bastante ao escrever seus códigos.

 

Como baixar plugins no Visual Studio?

Use a caixa de diálogo Gerenciar Extensões para instalar e gerenciar extensões do Visual Studio. Para abrir a caixa de diálogo Gerenciar Extensões, escolha Extensões > Gerenciar Extensões. Ou digite Extensões na caixa de pesquisa e escolha Gerenciar Extensões.

Para instalar extensões de dentro do Visual Studio:

  1. Em extensões > gerenciar extensões, localize a extensão que você deseja instalar. Se você souber o nome ou parte do nome da extensão, será possível pesquisar na janela Pesquisar.

  2. Selecione Baixar.

    Esta extensão está agendada para instalação. sua extensão será instalada depois que todas as instâncias de Visual Studio tiverem sido fechadas.
    

Se você tentar instalar uma extensão que tenha dependências, o instalador verificará se elas já foram instaladas. Se elas não tiverem sido instaladas, a caixa de diálogo Gerenciar Extensões listará as dependências que devem ser instaladas para que seja possível instalar a extensão.

 

Agora sim, vamos começar!

 

 

1. Tabnine

Esse plugin utiliza inteligência artificial que identifica o padrão do seu código e autocompleta ele.

 

2. Vscode-Icons

Esta extensão cria ícones referentes a cada tecnologia que for usada no projeto, ajudando na organização e na melhor identificação do mesmo.

 

3. Live Server

Uma das extensões obrigatórias para quem trabalha com front-end através do Visual Studio Code. Sabe aquele projeto html, css e javascriptque quando precisamos ver as alterações que fizemos no código damos refresh no navegador para ver o resultado? Esse plugin cria um localhost da aplicação e toda alteração que é salva no projeto, é atualizada automaticamente, evitando dar refresh na página a cada modificação no código feita. Assim que instalado, é só clicar no botão Go Live e o localhost será aberto no seu navegador padrão.

 

4. GitLens

Esta extensão ajudará no trabalho em equipe, já que ela promove a visualização de alterações e adições feitas no código, trazendo os diffs de cada código e uma sessão exclusiva do GitLens, que agrega as informações mais importantes do repositório, como os commits feitos, quais branches, tags, etc.

 

5. Quokka

O Quokka.js é uma extensão que executa JavaScript e TypeScript com feedback em tempo real. Em outras palavras, enquanto você digita, os resultados aparecem em tempo real diretamente no VS Code.

 

6. Beautify

E por último, mas não menos importante, esse belo plugin que faz a indentação dos seus códigos e os deixa de forma legível e organizados. Essa extensão ajuda muito!

 

 

 

Bom, eu tenho certeza que você vai gostar bastante delas, pra quem está começando elas são bastante importantes. Vale ressaltar que existem diversas outras extensões muito úteis também, mas eu preferi citar apenas essas.

 

Até o próximo post!

Carregando publicação patrocinada...
4

Gabriel, obrigado por esse post!

Vou deixar mais uma aqui, logo abaixo:

WakaTime para VS Code editor vs code

O plugin de código aberto para métricas de produtividade, metas, tabelas de classificação e rastreamento automático de tempo.

Instalar

  1. Pressione F1 ou CMD + Shift + P e digite:Extensions: Install Extension.

tela instalar

  1. Digite e pressione: wakatimeenter

tela plugin wakatime

  1. Digite sua API Key, então pressione Enter.
    (Se você não for solicitado, pressione ou digite: F1 or CMD + Shift + P então digite: WakaTime API Key.)

tela plugin wakatime

  1. Use o CÓDIGO VS como você normalmente faz e sua atividade de codificação será exibida no WakaTime Dashboard.

tela plugin animada wakatime

FIM!

1

Cara, Recentemente baixei o wakatime, mas depois de usar uns dias vi que eu tenho que pagar uma quantia de 12 dolares mensais pra poder ver meu proprio historico, sendo que free é somente os ultimos 14 dias. Isso me faz pensar.. até quanto estamos DANDO nossos dados? tipo nos anos90 a microsoft quase foi dividida por pegar dados de terceiros, hoje nós DAMOS esses dados, e em alguns casos ainda PAGAMOS pra que empresas os tenham.

2
1

Obrigado pelo link :)
E sim, eu entendo que haja custos, mas cobrar pra ver meu proprio historico é foda.
Tipo seria como se o googleDrive/gmail/github/outro Service me cobrasse se eu quiser acessar dados com mais de 14 dias.

1
4

Parabéns pelo post, Gabriel!

Não conhecia o Quokka, muito obrigado pela recomendação 😃

Aproveitando irei deixar minhas sugestões:

1. Code Spell Checker

Um simples corretor ortografico, com suporte a varias linguas e que funcina bem com CammelCase.

O objetivo deste plugin é ajudar a detectar erros ortográficos comuns, mantendo baixo o número de falsos positivos.

Exemplo do funcionamento do Plugin:

Exemplo do funcionamento do plugin

2. Settings Sync

Um plugin para sinconizar suas configurações do VS Code em várias máquinas usando o GitHub GIST.

O plugin tem suporte para sincronização das configurações, configurações de inicialização, snippets de código, temas, ícones, atalhos de teclados, Workspaces e extensões.

4

Eu não sabia que já tinha três dessas instaladas! kkkkkk Fui fazendo as instalações e verificando.

Tenho a observar o seguinte:

Tabnine: tentei instalar o Copilot sugerido pelo @filipedeschamps, porém, o projeto está fechado para testers, então entrei na waitlist e instalei o Tabnine. A princípio, parece legal.

Live Server: baita mão na roda, especialmente pra quem tem dois monitores (pra quem não tem, dividir a tela também funciona). É uma das que tinha instalado (numa correria com outras tantas extensões e não atentei de ativar). Já tinha visto funcionando no projeto do Myke da NLW da Rocket Seat mas me passou batido e tava no "Tab+F5+Tab".

Quokka: o próprio VSCode estava sugerindo comprar, mas depois descobri que havia a versão gratuita vendo um vídeo do Dev Soltinho. Não pude testar porque ainda estou mexendo no HTML do projeto, para depois mexer no JS.

Beautify: já estou usando o Prettier, como parte da preparação de ambiente do Myke (NLW - Rocket Seat). Pela descrição, ambos fazem a mesma coisa.

Grato pelas dicas!

2
1

Valeu pela sugestão! Vou fazer um artigo sobre isso no futuro, inclusive existe uma extensão que ajuda com os atalhos, mas agora não me recordo o nome.

1

Gabriel, muito obrigado por esse post!

Eu não consigo viver mais sem utilizar o Beautify. É extremamente satisfatório automaticamente executar ele ao salvar 🤝

E eu usava o Tabnine, mas troquei pelo Copilot e estou achando os resultados muito melhores e interessantes 👍

2
2

Copilot é incrível e uso! Entretanto, medinho da AI estar programando por mim. Vocês que usam o copilot (incluindo eu), tenham a experiência de programar sem ele e depois me contem.