VSCODE: Extensões para desenvolvedores Front-End

Conteúdos

• Introdução
• CSS Peek
• Image Preview
• Color Highlight
• Bracket Pair Colorizer
• ES7 React/Redux/GraphQL/React-Native snippets
• vscode-styled-components
• Live Server
• Prettier - Code formatter

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.

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.

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.

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.

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).

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.

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.

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

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