DEV Community

Cover image for VSCODE: Extensões para desenvolvedores Front-End
Kelven Rubalaine
Kelven Rubalaine

Posted on

5

VSCODE: Extensões para desenvolvedores Front-End

Conteúdos

Introdução

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

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

Image preview

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

Color Highlight

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

Bracket Pair Colorizer

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

ES7 React/Redux/GraphQL/React-Native snippets

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

vscode-styled-components

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

Live Server

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

Prettier - Code formatter

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

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

Hostinger image

Get n8n VPS hosting 3x cheaper than a cloud solution

Get fast, easy, secure n8n VPS hosting from $4.99/mo at Hostinger. Automate any workflow using a pre-installed n8n application and no-code customization.

Start now

Top comments (0)

Cloudinary image

Optimize, customize, deliver, manage and analyze your images.

Remove background in all your web images at the same time, use outpainting to expand images with matching content, remove objects via open-set object detection and fill, recolor, crop, resize... Discover these and hundreds more ways to manage your web images and videos on a scale.

Learn more

👋 Kindness is contagious

Please leave a ❤️ or a friendly comment on this post if you found it helpful!

Okay