DEV Community

Cover image for Algumas extensões do VS Code para usar com o Flutter!
Henrique Pomatti dos Santos
Henrique Pomatti dos Santos

Posted on

Algumas extensões do VS Code para usar com o Flutter!

O desenvolvimento de aplicativos móveis é difícil e demorado o suficiente para nós, desenvolvedores, perdermos tempo importando bibliotecas ou tendo que reformatar um arquivo DART manualmente.

Neste artigo, daremos uma olhada em algumas extensões do VS Code que podem melhorar muito nosso fluxo de trabalho e nos ajudar a reduzir o tempo que perdemos em tarefas chatas e repetitivas que, somadas, ocupam muito do nosso tempo e produtividade.

Então bora com a primeira extensão, a mais importante!

Flutter e Dart

Estamos começando com um óbvio, mas crucial, essas são as extensões que você provavelmente já instalou quando configurou seu ambiente Flutter pela primeira vez. A extensão Flutter adiciona suporte para edição, refatoração, execução e recarregamento de aplicativos flutter.

Eu sugiro que você vá nas configurações e habilite a opção Dart: Preview Flutter Ui Guides. Isso tornará realmente fácil identificar os relacionamentos pai-filho em seu código, o que é particularmente útil quando você tem muitos widgets aninhados em seus arquivos de UI.

Bracket Pair Colorizer

No Flutter, frequentemente lidamos com uma grande quantidade de colchetes. Quando você inicia o aninhamento de widgets, pode se tornar difícil localizar pares de colchetes de maneira rápida e fácil. Não procure além do Bracket Pair Colorizer 2 para melhorar a legibilidade do código.

Pubspec Assist

Um dos principais contratempos que encontrei quando comecei a trabalhar com flutter foi importar e manter os pacotes atualizados. Sempre que eu precisava atualizar um pacote, tinha que ir para pub.dev, procurar o pacote, ir para a guia de instalação e copiar / colar uma linha de código. Como mencionei na introdução deste artigo, não podemos perder tempo com essas coisas.

É aqui que entra em ação a extensão chamada pubspec assist. Tudo o que você precisa fazer é abrir seu arquivo pubspec.yaml, abrir a paleta de comandos, selecionar “pubspec assist: add dependency” e digitar o nome da dependência que você precisa. Você o terá automaticamente adicionado ao seu arquivo pubspec.yaml, atualizado para a versão mais recente, tudo sem deixar o VS Code.

Material Icon Theme

O tema do nosso IDE é frequentemente subestimado. Não é uma mera característica estética. Na verdade, nos ajuda a encontrar arquivos e pastas de maneira mais rápida. Quando se trata de VS Code, meu tema preferido para ícones é o Material Icon Theme, de Philipp Kief. Ele tem uma grande variedade de ícones coloridos e de ótima aparência.

Better comments

Comentar código costuma ser útil para deixar notas para outros desenvolvedores que trabalham em nossa equipe ou para o nosso futuro eu. Costumo usar muitos TODOs para me lembrar de voltar a essas coisas e refatorar, por exemplo. Bem, comentários melhores me ajudam muito. Isso nos permite categorizar nossos comentários com base em seu tipo.

ToDo Tree

Por falar em TODOs, Todo Tree da Gruntfuggly é uma das minhas extensões favoritas enquanto trabalho, não apenas no flutter, mas no VS Code em geral. Ele procura por tags TODO e FIXME em seu código e exibe esses comentários em uma conveniente visualização em árvore no painel do explorador, permitindo que você vá diretamente para aquele comentário ao clicar nele. Uma extensão simples, mas tão poderosa que me economiza muito tempo procurando por ToDos em torno do meu código.

Image Preview

A visualização da imagem por Kiss Tamás é especialmente útil para nós, desenvolvedores do Flutter. Uma parte crucial da experiência de nossos aplicativos são as imagens. As imagens tornam o aplicativo mais atraente para os usuários. Mas, como você deve saber, importar imagens no Flutter é meio chato. Você tem que importá-los em um diretório e usar um caminho String para se referir à imagem toda vez que quiser usá-la, o intelli sense também não ajuda nisso. A visualização da imagem nos permite pelo menos ter uma visualização da imagem que escrevemos no caminho no lado esquerdo da linha de código. Muito semelhante ao Android Studio e Intellij para imagens e cores.
Além disso, se você passar o mouse sobre o caminho String, a extensão mostra um link para acessar o arquivo na estrutura do projeto e suas dimensões.

Conclusão!

Isso conclui minhas escolhas para as principais extensões do VS Code para Flutter. Todas essas extensões, graças aos seus grandes criadores, ajudam a mim e a muitos outros desenvolvedores por aí, a fazer seu trabalho de uma forma mais rápida e agradável.

Espero que tenha gostado deste artigo e se você tiver mais extensões que considere úteis para mim e outros desenvolvedores de flutter, escreva sobre elas em uma resposta a este artigo, possivelmente com uma descrição rápida. Vamos melhorar o fluxo de trabalho um do outro!

Discussion (0)