Olá devs! Este artigo é resultado de um dos bate-papos que fizemos lá na nossa comunidade no Discord, onde conversamos sobre algumas ferramentas que são "uma mão na roda" para uma pessoa dev no processo de desenvolvimento de algum projeto.
Aqui vamos listar várias ferramentas que os devs da comunidade usam no dia a dia ou já utilizaram por um tempo. Nesta lista existem tanto ferramentas para dev front-end quanto para dev back-end ou dev de qualquer outra área que considere algumas dessas ferramentas úteis.
Índice
Desktop
Aqui vão alguns softwares Desktop que incluem diversas ferramentas internamente as quais você geralmente precisa utilizar no dia a dia como dev.
DevToys
O DevToys contém ferramentas como geração de QRCode, geração de UUIDs, formatação para base64, transformação de JSON para Yaml, etc.
Raycast (usuários MacOS)
O Raycast é como o Sotlight do Mac, mas que permite instalar vários plugins diferentes que incluem ferramentas como chat com o ChatGPT da OpenAI, geração de UUIDs, transformações de strings, color picker, dentre várias outras. Você pode encontrar os plugins disponíveis na loja deles.
Terminal
Algumas ferramentas que customizam o seu terminal para ficar mais agradável e trazer mais algumas funcionalidades como, por exemplo, integração com Git sendo possível visualizar a branch a qual você está trabalhando.
Oh My Zsh
Muito utilizado por usuários Linux ou MacOS. Se você for utilizar no Windows, você vai precisar utilizar o WSL ou se você quer utilizar o PowerShell, você pode utilizar a próxima opção.
Oh My Posh
Pode ser utilizado tanto por usuários Linux, MacOS ou PowerShell no Windows.
Extensões do Chrome
Color picker
Uma extensão que permite você capturar cores de componentes do site que está acessando. Muito utilizado por devs front-end. Este é só um exemplo, existem vários outros semelhantes dentro da loja do Chrome, escolha o que mais você se adequa.
JSON Viewer
Sabe quando você vai rodar uma rota GET da sua API no navegador e ela retorna um JSON todo misturado e sem condições de leitura? O JSON Viewer resolve esse problema para você indentando o JSON retornado na página.
React Developer Tools
Adiciona algumas ferramentas de debugs no "inspect" do navegador que facilita quando você for inspecionar componentes do react pelo navegador.
Web Apps by 123apps
Uma extensão que você pode não precisar no seu projeto como dev, mas pode precisar no seu dia a dia. Esta extensão e também o side do 123Apps apresenta ferramentas de edição de vídeo, edição de áudio, formatação de PDF (transformar imagens em PDF, dividir PDF, mesclar PDF, PDF to Word, etc), e mais alguns outros utilitários.
REST Clients
Quando você está construindo APIs, você provavelmente vai precisar de um cliente REST para executar suas rotas não é mesmo? Aqui vão alguns muito utilizados pela comunidade.
Postman
Um dos mais utilizados. Nele além de você gerenciar suas rotas, você consegue criar workspaces, compartilhar com outras pessoas e criar uma documentação dentro da própria ferramenta.
Insomnia
O Insomnia é um pouco mais simples do que o Postman, mas também permite criar workspaces, criar times, etc.
Hoppscotch
O Hoppscotch é bem prático pois ao acessar o site, você já pode passar a utilizar a ferramenta sem precisar realizar login ou instalar a ferramenta como no Postman e Insomnia.
Bruno
Bem semelhante ao Insomnia, mas traz algumas diferenças como armazenar as suas collections das rotas diretamente numa pasta do seu sistema de arquivos, utiliza o Git para versionamento, e algumas outras funcionalidades.
REST Client (VSCode extension)
Esse é na verdade uma extensão do VSCode que permite você pode criar seu cliente REST apenas criando um arquivo na pasta do seu projeto que vai conter todas as chamadas das suas rotas utilizando uma formatação específica da ferramenta.
Extensões do VSCode
Better Comments
Permite você inserir comentários destacados com cores específicas, assim, você pode destacar, por exemplo, algum ponto no código que você precisa voltar em algum momento e revisar.
IntelliCode
O Intellicode utiliza IA para te ajudar com alguns insights de código enquanto você está codando.
IntelliCode API Usage Examples
Inclui exemplos de código dentro das documentações de funções no VSCode de alguma lib que você está utilizando.
Path Intellisense
Te ajuda a encontrar os arquivos que você está importando dentro do código quando você está fazendo aquele famoso "../../......." para encontrar o arquivo.
ESLint
O ESLint é utilizado para ajudar na formatação automática do seu código JavaScript. Você pode customizar como quiser a formatação que você quer fazer no seu código, com ou sem ;, com aspas simples ' ou aspas duplas ", etc.
Prettier - Code Formatter
Funciona como o ESLint, mas pode ser utilizado para várias outras linguagens como JavaScript, TypeScript, JSON, CSS, HTML, Vue, Angular, etc.
Markdown All in One
Te ajuda na formatação de arquivos .md, como, por exemplo, os arquivos README.md que você cria para colocar no GitHub.
Markdown Preview Github Styling
Permite você visualizar seu arquivo .md dentro do VSCode na forma como vai aparecer no GitHub. É bem útil para você verificar se você não errou em alguma formatação no Markdown ou quer melhorar alguma informação antes de subir para o GitHub, por exemplo.
Polacode
Sabe quando você quer tirar uma foto do seu código para postar em algum lugar? O polacode te ajuda a fazer isso de forma rápida, sem precisar sair do VSCode ou lembrar o comando para dar screenshot. Você só seleciona o código que deve ser fotografado e manda o Polacode tirar a foto, que inclusive já sai formatada do jeito que você quer.
Rainbow CSV
Formata os arquivos CSV que você abrir no VSCode.
Regex Previewer
Permite você testar o regex que você criou. Ele abre uma tela de preview onde você pode ir escrevendo palavras diferentes a fim de testar seu regex selecionado.
DotENV (for .env environment variables)
Algumas linguagens utilizam o arquivo .env para guardar variáveis de ambiente. Esta extensão do VSCode te ajuda na formatação desses arquivos.
Front-End
Algumas extensões para a galera front-end.
Auto Rename Tag
Quando você troca o nome de uma tag HTML, essa extensão já altera automaticamente o nome na tag de abertura e na tag de fechamento.
Auto Close Tag
Quando você abre uma tag HTML, essa extensão já cria também uma tag de fechamento automaticamente para você não esquecer.
Color Picker
Mostra um ícone para abrir um color picker em cada cor hexadecimal que você inserir no seu HTML ou CSS. Assim, você pode abrir o color picker, selecionar a cor que você quer e ele vai alterar automaticamente o hexadecimal da cor selecionada.
Customização de ícones de arquivos
Algumas extensões que formatam os ícones das pastas e arquivos do seu projeto dentro do VSCode.
Nos dois exemplos abaixo você consegue personalizar os ícones da forma que você quiser utilizando sua configuração de usuário do VSCode, basta olhar a documentação da ferramenta para verificar como fazer isso.
Symbols
Material Icon Theme
Spell Checker
O Spell Checker te corrige quando você digita qualquer palavra de forma errada. Quando você digita uma palavra errada, a extensão passa um traço azul abaixo da palavra e você também pode pedir dicas de correções. Isso é bem útil para quando vamos nomear variáveis ou funções, com essa ferramenta podemos sempre ficar atentos(as) para escrever a palavra da forma correta e evitar erros mais tarde.
Code Spell Checker
Corrige palavras escritas em inglês.
Brazilian Portuguese - Code Spell Checker
Corrige palavras escritas em Português Brasileiro. Existem Spell Checkers para várias outras linguagens, caso precise para alguma outra, é só pesquisar nas extensões do VSCode que você acha.
Bom, essas foram algumas ferramentas que listamos na comunidade do Discord. E você tem alguma que você utiliza muito e não está listada aqui? Então comenta aqui e compartilha com a gente!
Top comments (0)