10 Extensões úteis para o seu VSCode
Tags: extensions, vscode, javascript, productivity
Published: 2024-05-15 13:39:41

O Visual Studio Code, ou VS Code, é um dos IDE’s (Ambiente de Desenvolvimento Integrado) mais populares atualmente devido sua interface amigável e sua extensibilidade por meio de extensões. No entanto, com a imensa gama de extensões disponíveis, pode ser desafiador encontrar aquelas que melhor atendem às suas necessidades específicas. Neste artigo, vamos conhecer dez extensões úteis que podem elevar sua experiência. Seja você um desenvolvedor front-end, back-end ou full-stack, estas extensões foram selecionadas para aumentar sua produtividade e melhorar a qualidade do código. Vamos mergulhar e descobrir como essas ferramentas podem transformar sua experiência de desenvolvimento no VS Code.

## Material Icon Theme

O [Material Icon Theme](https://marketplace.visualstudio.com/items?itemName=PKief.material-icon-theme) personaliza os ícones do seu VSCode de acordo com a linguagem que você está utilizando. É uma ótima ferramenta que agiliza o seu trabalho. Imagina o seguinte, você precisa rapidamente identificar um arquivo de linguagem específico e ele já está lá facilmente visível. Além disso, a extensão também customiza os ícone de suas pastas.

![Exemplos de ícones de arquivos](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/wwgd3re2roerwhz8d1fn.png)

## Color Highlight

A extensão [Color HighLight](https://marketplace.visualstudio.com/items?itemName=naumovs.color-highlight) possibilita a visualização das cores hexadecimais dentro do VSCode. Uma maneira fácil de identificar a cor necessária no momento.

![Exemplo de cores em hexadecial e rgb](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/x4wgye9g4nyxmsf4brv3.png)

## SVG Previewer

A extensão [SVG Previewer](https://marketplace.visualstudio.com/items?itemName=vitaliymaz.vscode-svg-previewer) facilita a pré-visualização de uma arquivo SVG dentro do seu VSCode. Mais uma maneira de identificação rápida dos seus arquivos, agora de imagem.

![Visualização de imagem svg no VSCode](https://raw.githubusercontent.com/vitaliymaz/vscode-svg-previewer/master/media/preview.gif)

## Live Server

O [Live Server](https://marketplace.visualstudio.com/items?itemName=ritwickdey.LiveServer) é uma mão na roda para desenvolvedores Front-end, ela permite visualizar as alterações do seu código em tempo real. A grande vantagem é que o Live Server automatiza a atualização da página no navegador para você através de um localhost. 

- A página no navegador é recarregada automaticamente sempre que ocorre uma alteração nos arquivos do projeto, economizando tempo e tornando o processo de desenvolvimento mais eficiente.
- Permite o uso de recursos do HTML5, como WebSockets e Geolocation, facilitando o desenvolvimento de aplicações web modernas.
- A extensão é altamente configurável, permitindo que os usuários ajustem as configurações de acordo com suas necessidades específicas de projeto.

![Visualização do projeto usando LiveServer](https://raw.githubusercontent.com/ritwickdey/vscode-live-server/428e01caf02bfa7ee75741df0f02fc9d2b5b0999/images/Screenshot/vscode-live-server-animated-demo.gif)

## Git Lens

O [Git Lens](https://marketplace.visualstudio.com/items?itemName=eamodio.gitlens) é uma extensão que integra as funcionalidade do Git diretamende no VSCode. Essa é uma ferramenta poderosa quando se trata de produtividade e agilidade. Algumas das funcionalidades dela:

- Com o GitLens é possível  explorar rapidamente o histórico de um repositório, incluindo branches, tags e commits.
- GitLens você pode visualizar de forma detalhada o histórico de alterações de um arquivo, sendo possível saber quem e quando fez alterações específicas em um projeto.
- Você pode comparar facilmente diferentes revisões de um arquivo para ver as alterações entre elas e entender como o código evoluiu ao longo do tempo.

![Visualização de histórico do arquivo usando o GitLens]( https://raw.githubusercontent.com/gitkraken/vscode-gitlens/main/images/docs/revision-navigation.gif)

## ES Lint

O [ES Lint](https://marketplace.visualstudio.com/items?itemName=dbaeumer.vscode-eslint) é um linter bastante utilizado pela comunidade do Javascript e Typescript. Esta extensão ajuda a identificar erros de sintaxe e problemas de estilo no código JavaScript, ajudando os desenvolvedores a manter um código limpo e legível.  Além disso, pode ser facilmente configurado para atender às necessidades do seu projeto, tudo através de um arquivo de configuração simples.

Na imagem abaixo é possível observar a ferramenta indicando erros de código em javascript:

![ESLint apresentando erros de código ao usuário](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/xh46ugn8zefru5gql4tg.png)

## Github Copilot

O [Github Copilot](https://visualstudio.microsoft.com/pt-br/github-copilot/) é uma extensão que você pode usar como uma assistente ou um parceiro de programação. Esta ferramenta desenvolvida pelo Github e pela Open AI pode gera sugestões de código com base no que você está escrevendo. É uma ótima opção quando você lida com tarefas repetitivas. Abaixo algumas vantagens:

- GitHub Copilot é alimentado por modelos de linguagem treinados em uma grande quantidade de código-fonte de código aberto. Isso significa que ele está constantemente aprendendo com novos padrões de codificação e soluções para problemas comuns, tornando suas sugestões cada vez mais precisas e úteis ao longo do tempo.
- Embora inicialmente tenha sido lançado com suporte principalmente para Python e JavaScript, o GitHub Copilot está expandindo seu suporte para uma variedade de linguagens de programação, o que o torna útil para uma ampla gama de desenvolvedores.

![Github Copilot auxiliando na construção de código]( https://user-images.githubusercontent.com/37570492/212964557-8d832278-61bb-4288-a8a7-47f35859e868.gif)

## Markdown All in One

Escrever um código limpo e que funcionen bem é essencial. Mas além disso, um bom programador ganha bons pontos aos escrever um README que seja visualmente bem construído  e  que explique bem o seu projeto. Neste contexto, a extensão [Markdown All in One](https://marketplace.visualstudio.com/items?itemName=yzhang.markdown-all-in-one) se encaixa como uma ótima ferramenta. Usando-a você pode editar e visualizar seu documento Markdown no próprio Visual Studio Code, sem a necessidade de alternar entre diferentes aplicativos ou janelas.

Abaixo algumas de suas principais vantagens:

- A extensão Markdown All In One oferece recursos de previsão para Markdown, o que significa que ela pode sugerir automaticamente elementos Markdown enquanto você digita, economizando tempo e esforço na digitação.
- A extensão facilita a criação de tabelas Markdown e a inserção de emojis, simplificando a formatação e tornando o documento mais visualmente atraente.

![Markdown All In One auxiliando usuário na construção de texto no formato markdown](https://raw.githubusercontent.com/yzhang-gh/vscode-markdown/master/images/gifs/section-numbers.gif)

## NPM IntelliSense

Mais uma extensão voltada para produtividade que pode agregar muito é a [NPM IntelliSense](https://marketplace.visualstudio.com/items?itemName=christian-kohler.npm-intellisense). Com esta ferramenta você obtém autocompletar para nomes de pacotes npm diretamente no editor. Isso economiza tempo e ajuda a evitar erros de digitação ao instalar ou importar pacotes em seu projeto.

Além disso, outras 3 vantagens:

- A extensão fornece informações sobre as versões disponíveis dos pacotes npm, o que pode ajudar a garantir que você esteja instalando a versão mais recente ou apropriada para o seu projeto.
- Se você estiver usando aliases de importação em seu projeto (por exemplo, **`import MyComponent from '@/components/MyComponent'`**), o npm IntelliSense pode reconhecê-los e oferecer autocompletar para esses caminhos personalizados.
- A extensão oferece suporte para completar scripts npm e outras configurações diretamente no arquivo **`package.json`**, facilitando a edição e a manutenção desse arquivo crucial.

![Visualização do NPM Intellisense ajudando na importação]( https://raw.githubusercontent.com/ChristianKohler/NpmIntellisense/bc5521b659b700c8a91cf04897007c611ed9532a/images/require_withname.gif)

## JavaScript (ES6) code snippets

A extensão [JavaScript (ES6) code snippets](https://marketplace.visualstudio.com/items?itemName=xabikos.JavaScriptSnippets) mais uma ferramenta aliada da produtividade. Com ela você tem disponível snippets de código para Javascript que podem te ajudar a poupar tempo.

Na tabela abaixo alguns exemplos de atalhos para métodos do javascript: 

| Atalho | Descrição | Exemplo |
| --- | --- | --- |
| fre | Loop forEach em sintaxe ES6 | array.forEach(currentItem => {}) |
| anfn | Cria uma função anônima | (params) => {} |
| sto | Método auxiliar setTimeout | setTimeout(() => {}); |
| prom | Cria uma nova Promise | return new Promise((resolve, reject) => {}) |
| thenc | Adiciona declarações then e catch a uma Promise | then((res) => {}).catch((err) => {}) |

Mais algumas vantagens dessa extensão:

- Os snippets fornecidos pela extensão são especialmente úteis para JavaScript moderno, como ES6 e versões posteriores, incluindo recursos como arrow functions, template literals, destructuring, spread/rest operators, classes, async/await, entre outros.
- Ao utilizar os snippets fornecidos pela extensão, você garante que seu código siga padrões consistentes e modernos de codificação JavaScript, o que pode melhorar a legibilidade e a manutenibilidade do código.
- Ao explorar os snippets fornecidos pela extensão, os desenvolvedores podem aprender novos recursos e sintaxes do JavaScript moderno. Isso é especialmente útil para desenvolvedores que estão se familiarizando com ES6 e versões posteriores.

Na tabela abaixo estão alguns métodos de console:

| Atalho | Descrição | Exemplo |
| --- | --- | --- |
| cas→ | Exibe uma mensagem de alerta no console | console.assert(expression, object) |
| ccl- | Limpa o console | console.clear() |
| cnb | Conta o número de vezes que um determinado rótulo foi usado | console.count(label) |
| cdb | Exibe uma mensagem de depuração no console | console.debug(object) |
| cdi- | Exibe as propriedades de um objeto no console | console.dir(object) |

Espero que este artigo tenha sido útil para você descobrir novas extensões que podem aprimorar sua experiência de desenvolvimento. Lembre-se de que a escolha das extensões certas pode fazer uma grande diferença em sua produtividade e no resultado final do seu trabalho. 

Se você tiver alguma extensão favorita que não foi mencionada aqui, sinta-se à vontade para compartilhá-la nos comentários! Até logo e  happy coding! :smile: