10 extensões para Visual Studio Code

O Visual Studio Code se tornou o editor de código mais utilizado pelos desenvolvedores devido à sua grande variedade de recursos úteis para agilizar o trabalho. Um de seus pontos fortes é que possui uma biblioteca de extensões, que agregam inúmeras opções de implementação para ser mais eficiente na programação.

Pela sua utilidade compartilho 10 extensões essenciais para Visual Studio Code, com as quais você terá melhor desempenho em seus projetos.

1) Prettier

Esta ferramenta permite-nos desenhar o formato do código que escrevemos, ou seja, ajuda-nos a organizar o nosso código para o ver e ler com mais facilidade. Desta forma automatizamos o processo, economizando tempo, possíveis erros e disputas sobre o formato do código no trabalho em equipe, tornando-o profissional. Em inglês o termo é conhecido Code Formatter.

Sua principal função é recuar o código ou gerar os recuos que adicionamos ao código, o que é importante quando utilizamos ferramentas de debugger de JavaScript, breakpoints ou linguagens como Python, que funcionam dessa forma. Se quiser mais informações, você pode visitar o site oficial.

Neste exemplo vemos uma folha de estilo (CSS) onde o código está desordenado.

Clicamos com o botão direito no conteúdo e selecionamos a opção Formate com.

Selecionamos Prettier e ¡pronto!

2) Import Cost

Com uma operação simples, ele informará o peso dos pacotes que você instalou em seus projetos, facilitando saber quanto foi o aumento de tamanho em seus projetos, ao mesmo tempo que permite ter o controle do processo.

Em nosso arquivo podemos ver os comentários do lado direito de nossas importações. Essa é a extensão e indica o peso de cada pacote instalado. Você pode encontrar a extensão no marketplace do Visual Studio.

3) Live Server

Esta ferramenta indica cada alteração que fizermos em nosso projeto sem a necessidade de clicar no botão atualizar do navegador ou F5, pois ao salvar uma alteração em nosso IDE a página será atualizada automaticamente, o que economiza tempo em alguns casos.

O que devemos fazer é clicar no botão Go Live e a página em que estamos trabalhando será aberta. Em seguida, faremos nossas alterações e elas serão refletidas automaticamente, sem precisar usar o teclado e o mouse para atualizar a página. Você pode encontrar a extensão no marketplace do Visual Studio.

⚠️ Outra forma de acessar é: clique com o botão direito e selecione Open with Live Server.

4) Better Comments

Uma maneira de nunca perder o controle do que seu código faz é comentar cada parte dele, por isso esta extensão é altamente recomendada, pois ajuda a adicionar cores diferentes aos textos. Com isso você pode deixar seu código mais organizado e priorizar de acordo com as cores do comentário que acabou de adicionar.

Para configurar Better Comments, vá para a extensão e selecione Configurações de extensão.

Agora clicamos no texto azul (Editar no settings.json).

Então vamos para a parte do better-comments.tags:

Para criar um, copiamos o formato do objeto que vem por padrão e editamos o valor de suas propriedades: Por exemplo, adicionamos na tag o que usaremos como comando de comentário. Aqui adicionei com + e ==.

À direita temos um arquivo JavaScript que aceita as diferentes cores. Se precisar de mais informações, visite o marketplace do Visual Studio.

⚠️ Observação: Aceite seus comentários de idioma normalmente, basta adicionar a tag que você adicionou em uma linha ou em um grupo de linhas.

5) Auto Close Tag

A forma como esta extensão funciona é simplesmente simples e fácil de usar. Ao escrever seu código, sempre haverá momentos em que você se esquecerá de adicionar a tag ou outra parte do código para fechar aquela seção.

No entanto, com o Auto Close Tag isso nunca mais acontecerá, pois ao inserir a primeira parte do código, a extensão detectará automaticamente o que você está tentando fazer e o ajudará com o preenchimento automático, para que feche instantaneamente a tag. Isso será muito útil se você for novo ou se esquecer esse tipo de detalhe.

Exemplo: Criei a tag div aqui para preenchimento automático. Para baixá-lo ou obter mais informações, visite o marketplace do Visual Studio.

6) SVG

Uma ferramenta extremamente útil para quem gosta de editar imagens SVG. Depois de instalada a extensão, devemos procurar o arquivo SVG em nosso IDE e iremos abri-lo, pois ali faremos as alterações. Depois disso, inserimos Ctrl/Cmd + Shift + P em nosso Visual Studio Code. Uma pequena janela será aberta no visual onde escreveremos Preview SVG. A seguir, a imagem SVG será exibida e poderemos aplicar as alterações que desejarmos ao nosso arquivo SVG.

Outra forma de acessar é clicar com o botão direito e selecionar Open Preview, que abrirá uma janela mostrando-nos o svg e com acesso ao código para editá-lo facilmente.

7) Image Preview

Com esta ferramenta visualizamos a imagem que queremos adicionar ao nosso código. Um exemplo é usar HTML: vemos que ele aparece à esquerda como uma miniatura e, se o fizermos hover no src da imagem, vemos ela um pouco ampliada no cursor. Você pode baixar a extensão em Marketplace do Visual Code .

8) AutoProfixer

Esta ferramenta é necessária para adicionar todos os vendor necessário em nosso arquivo CSS. Estes são os prefixos que são adicionados a algumas propriedades para torná-las compatíveis com os navegadores. Se quiser mais informações, visite o Marketplace do Visual Studio.

Outro exemplo: Temos um arquivo CSS com as seguintes propriedades e queremos adicionar os prefixos a eles. Ele é acessado com a paleta de comandos (Ctrl+Shift+P no Windows) e escrevemos Autoprefixer:Run. Veremos como eles são adicionados automaticamente:

9) Booksmarks

Ao criar projetos grandes, tendemos a ter muitos arquivos em pastas diferentes com muitas linhas de código. Por mais organizado que seja, o mais provável é que nos percamos na busca por algo específico. Para evitar isso, recomendo usar Bookmarks, que gera um sinal onde você quiser para que você possa se deslocar com mais facilidade para aquele local específico.

Nesta planilha temos um grande número de linhas:

Passamos pela linha que queremos marcar e vamos para o lado esquerdo do Visual Studio Code. Nós clicamos Bookmarks e selecione o botão azul Bookmarks: ativar.

A seguir, vemos como uma fita azul está marcada ao lado da linha onde estamos com o cursor e, à direita, vemos um explorador de extensões que nos mostra todas as marcas que fazemos. Neste caso, temos apenas o recém-criado. Se você quiser informações mais detalhadas, vá para o seu documentação oficial.

10) Snapcode

Se quisermos compartilhar código, mas não quisermos que nossa interface do Visual Studio Code saia, podemos usar Snapcode. Caso queiramos utilizá-lo, abrimos a paleta de comandos e escrevemos snapcode:

Vemos como nossa janela está dividida e vemos as instruções a seguir:

Copiamos o código e colamos na imagem que aparece, dentro da parte escura:

Na parte inferior, o botão abaixo da parte onde copiamos é aquele que captura a imagem. Ao clicar salvamos a imagem localmente e ficará assim:

Para baixar a extensão, procure-a no Marketplace do Visual Code.

Isso é tudo! Com essas extensões seu trabalho ficará muito mais simples e organizado. Espero que esta informação tenha sido muito útil.

Até breve, sucesso!