3 minutos de leitura
Autor(a)
Como uma boa curiosa, gosto de ler, ver, ouvir e experimentar. Uma entusiasta da web acessível a todos. Hoje, faço parte da Escola de UX e Design na Alura.
Fique por dentro de conteúdos, insights e oportunidades do universo tech. Receba novidades e lançamentos direto no seu e-mail.
Como um dos Ambientes de Desenvolvimento Integrado (IDE) mais populares entre desenvolvedores, o Visual Studio Code conta com um vasto ecossistema de extensões que auxiliam no processo de escrita de código, independentemente da linguagem utilizada.
A seguir, apresento uma lista de extensões que podem ajudar a tornar seu processo de desenvolvimento mais ágil e produtivo.
Se você ainda não tem o VS Code instalado em sua máquina, clique aqui para fazer o download para Windows, Linux ou Mac. Para aprender como instalar, você também pode conferir nosso artigo “Visual Studio Code: instalação, teclas de atalho, plugins e integrações”.
Esta não é exatamente uma extensão, mas sim um link que leva a diversas opções de temas diferentes. O tema de cores é muito importante para evitar o cansaço visual durante a programação e para facilitar a identificação de palavras-chave dentro do código.
Um dos temas mais utilizados no VS Code é o Dracula, criado por um desenvolvedor brasileiro, o Zeno Rocha.
Avalie este artigo
É uma das extensões obrigatórias para quem trabalha com front-end através do Visual Studio Code.
Sabe aquele projeto HTML, CSS e JavaScript que 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.
Para baixar essa extensão, clique aqui.
Que tal utilizar a inteligência artificial para te ajudar a autocompletar o seu código? O GitHub Copilot é uma ferramenta de programação colaborativa com IA que ajuda você a escrever código de forma mais rápida e inteligente. Essa extensão fornece sugestões de código em tempo real enquanto você digita, além de oferecer assistência conversacional com IA.
Para baixar essa extensão, clique aqui.
É uma das extensões mais famosas entre desenvolvedores. Ela funciona como um embelezador de código, tornando ele indentado para arquivos JSON, HTML, CSS, TypeScript, Javascript e entre outros.
Baixe esta versão clicando aqui.
É uma extensão que ajuda nas marcações nas linhas ou em trechos de código. Sabe quando você precisa mudar uma linha do código, mas não vai fazer naquele exato momento? O BookMark vai te ajudar a lembrar.
Ele gera uma aba exclusiva com todas as marcações criadas de todos os arquivos do seu projeto. Além da forma de selecionar um marcador como está no Gif abaixo, pode ser feito através do comando Alt + Windows + k, no Windows, ou no Mac, Option + Command + k.
Clique aqui e faça o download.
Nesta extensão, os imports serão localizados, analisados e irão autocompletar a importação que está sendo chamada. Funciona com Typescript e TSX.
Essa extensão adiciona ícones referentes a cada tecnologia que for usada no projeto, ajudando na organização e na melhor identificação dele.
Clique aqui para baixá-la.
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. https://marketplace.visualstudio.com/items?itemName=eamodio.gitlens
Clique para baixar.
Se você curtiu este artigo e quer conhecer mais sobre VSCode e Front-end, conheça nossa Carreira Desenvolvimento Front-End React.
Bons estudos e até o próximo artigo :)
