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
Top comments (0)