10 melhores plugins VSCode para criar aplicativos Flutter

Publicado em 01/11/2022 por cacpnrj

Tempo de leitura: 4 minutes

Neste artigo, gostaríamos de compartilhar nossa experiência de uso do IDE do Visual Studio Code (VSCode). Nossa equipe de desenvolvimento prefere usar certos plugins e aqui explicaremos o porquê. Sugerimos não prestar atenção na ordem deles: se um plugin estiver no final da nossa lista, não significa que seja pior que os outros.

Vamos começar.

Flutter e Dart

O primeiro plugin que você precisa para usar o framework Flutter é

Flutter: https://marketplace.visualstudio.com/items?itemName=Dart-Code.flutter

Este é o plugin principal que contém todas as ferramentas necessárias para usar o framework Flutter no VSCode. Ao instalá-lo, o plugin para o idioma será instalado automaticamente.

Dart: https://marketplace.visualstudio.com/items?itemName=Dart-Code.dart-code

2. Awesome Flutter Snippets

Para minimizar o trabalho desnecessário ao escrever código, os snippets foram inventados. Como eles funcionam? O desenvolvedor começa a inserir, por exemplo, a palavra “stl”, e o IDE começa a selecionar opções para criar um widget Stateless.

É muito conveniente e economiza muito tempo. Em teoria, qualquer desenvolvedor pode escrever esses trechos por conta própria. Mas o mercado tem um ótimo plugin

Awesome Flutter Snippets

Ele já contém todos os trechos de Flutter mais usados.

3. Flutter Color

O próximo na nossa lista é o plugin Flutter Color

Às vezes, ao descrever uma cor no código, você deseja representar essa cor visualmente. É exatamente para isso que serve este plugin. Ele converte a cor no código, por exemplo, 0xFF882A7B — em uma pequena área da mesma cor. Isso é muito útil para visualizar mentalmente as cores em um aplicativo.

Aqui está o que parece no código.

4. Image Preview

O plugin Image Preview funciona da mesma maneira.

Ele permite que você visualize facilmente o desenho que está usando diretamente no IDE.

5. Svg Preview

O próximo plugin é o Svg Preview

Normalmente os desenvolvedores usam o formato SVG para seus projetos. No entanto, ao contrário do formato PNG ou JPEG, você não pode simplesmente visualizá-lo no explorer. Este plugin foi escrito para que seja possível visualizar o arquivo SVG diretamente no IDE.

6. YAML

Todos os desenvolvedores do Flutter encontraram o problema de editar o arquivo pubspec.yaml. Como não há formatador e validador integrados no VSCode, este plugin vem em socorro.

YAML

Ele fornece suporte abrangente à linguagem YAML para o Visual Studio Code por meio do servidor de linguagem yaml com suporte integrado à sintaxe do Kubernetes.

7. Todo Tree

Os desenvolvedores às vezes precisam fazer uma anotação no TODO, o que significa “não se esqueça de fazer algo neste lugar no código”. Mas no VSCode não há ferramentas convenientes para exibir essas notas. Para fazer isso, recomendo usar o plugin.

Todo Tree

Este plugin pesquisa rapidamente seu espaço de trabalho (usando ripgrep) para tags de comentários como TODO e FIXME e os exibe em uma visualização em árvore. Clicar em um item da árvore abrirá o arquivo e colocará o cursor na linha que contém o TODO.

8. Thunder Client

O próximo da nossa lista é um plugin muito importante.

Thunder Client

Com ele, você pode testar a API diretamente no VSCode, criar suas próprias coleções, fazer qualquer tipo de solicitação à API, visualizar solicitações e respostas do backend.

Assim que descobrimos este plugin, paramos completamente de usar o Postman.

9. Git Graph

Para trabalhar com o git usamos o seguinte plugin:

Git Graph

É muito útil para visualizar ramificações, mesclagens, diferenças, redefinições e assim por diante.

10. Json to Dart Model

O seguinte plugin é necessário para trabalhar com JSON e é chamado

Json to Dart Model

Todo desenvolvedor precisa trabalhar com modelos JSON. Mas às vezes o modelo vindo do backend é muito grande. Pode levar muito tempo para criar uma classe de modelo manualmente. Este plugin possibilita criar rapidamente um modelo pronto copiando a resposta do backend.

11. Flutter & Dart Utilities

Extensão que auxilia na criação de testes, interfaces, classes e para trabalhar com arquitetura limpa, 3-tiers ou MVC tendo a possibilidade de criar funcionalidades e criar pasta de testes.