VSCODE: Extensões para desenvolvedores Front-End
Tags: vscode, webdev, css, javascript
Published: 2021-08-27 20:57:30

## Conteúdos
* [Introdução](#vscode)
* [CSS Peek](#css-peek)
* [Image Preview](#image-preview)
* [Color Highlight](#color-highlight)
* [Bracket Pair Colorizer](#bracket-pair-colorizer)
* [ES7 React/Redux/GraphQL/React-Native snippets](#es7)
* [vscode-styled-components](#vscode-styled-components)
* [Live Server](#live-server)
* [Prettier - Code formatter](#prettier-code-formatter)

## Introdução <a name="vscode"></a> 
O Visual Studio Code é um dos editores de texto mais populares para o do desenvolvimento de software por ser gratuito e altamente customizável. Hoje trago uma lista das extensões que todo desenvolvedor frontend devia ter ou devia conhecer.

## CSS Peek <a name="css-peek"></a> 
CSS Peek é uma extensão que suporta arquivos `.html` e `.js`. Sugere nomes de classes e id's com base em ficheiros CSS dentro do seu projecto.

![css peek no vscode](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/n6qrqsta6ih3ge51ae8r.jpg)

## Image preview <a name="image-preview"></a> 
Image preview mostra uma pré-visualização de imagens de url's assim como imagens importadas da máquina do usuário, dessa forma nos ajuda a evitar links quebrados ou importar imagens que não existem.

![image preview no vscode](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/qerind7gu73qc7q1qpkj.jpg)

## Color Highlight <a name="color-highlight"></a> 
Essa extensão irá estilizar todas a cores Hex, HSL, RGB... Que estiverem presentes no seu código fonte, assim facilitando a visualização das mesmas e melhorando a experiencia de desenvolvedor. 

![color highlight no vscode](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/i2dum7v31z9i7gj8qfa6.jpg)

## Bracket Pair Colorizer <a name="bracket-pair-colorizer"></a> 
Bracket pair colorizer nos ajuda a identificar de uma forma melhor o escopo de uma função, declaração, classe, etc. Dando uma cor especifica para colchetes ou parentes, assim mesmo tendo varias declarações dentro de uma função, fica mais fácil identificar o inicio e fim de cada uma.

![Bracket Pair colorizer on vs code](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/3xiy1ojgelodmlvluhbh.jpg)

## ES7 React/Redux/GraphQL/React-Native snippets <a name="es7"></a> 
Extensão contem snipets de es7 para Javascript Vanilla, React Js e React native, são snipets para rotinas mais comuns do mundo de js como por exemplo `sti` para `setInterval(() => { }, intervalTime)`.

![es7 snipets no vscode](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/d2p5cagvv26g3tzkhi0a.jpg)

## vscode-styled-components <a name="vscode-styled-components"></a> 
vscode-styled-components voltada para desenvolvedores React, auxilia no intelisense, syntax highlight e reporte de erro de sintaxe das suas declarações de styled components, já que o VsCode por padrão trata as declarações de styled component como qualquer outra string.

![suporte para styled components no vscode](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/moydi8tadqf68h7c7qb1.jpg)

## Live Server <a name="live-server"></a> 

Para quem está a desenvolver um website simples com HTML, CSS e Javascript, o live server cria um servidor de desenvolvimento para ti, assim dando uma funcionalidade de live reload para o seu projecto a cada modificação feita no mesmo, assim eliminando o trabalho repetitivo de sempre fazer refresh a cada nova actualização.

![live server no vscode](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/l00szl60qyvlhsaqiwcj.jpg)

## Prettier - Code formatter <a name="prettier-code-formatter"></a> 
Prettier formata o seu código, dando um estilo consistente, e melhorando a visibilidade do mesmo, o prettier funciona com Javascript, Typescript, JSX, JSON, CSS, SCSS, Less, HTML, Vue, Angular, GraphQL, Markdown e YAML

![prettier on vscode](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/ewimqgcuv76p2m12nknl.jpg)

Obrigado por ler o meu primeiro artigo, se tiver alguma sugestão ou opinião é só colocar nos comentários.
Avalia meu portfólio? [kelven.dev](https://kelven.dev)