The latest articles on DEV Community by Julia Bresolin (@juliabresolin). https://dev.to/juliabresolin https://media2.dev.to/dynamic/image/width=90,height=90,fit=cover,gravity=auto,format=auto/https:%2F%2Fdev-to-uploads.s3.us-east-2.amazonaws.com%2Fuploads%2Fuser%2Fprofile_image%2F677262%2F6e867d34-9c34-48a3-a16b-02ef3bdd3a3e.png https://dev.to/juliabresolin en Julia Bresolin Fri, 18 Feb 2022 20:38:19 +0000 https://dev.to/juliabresolin/debuggando-funcoes-com-mais-facilidade-no-vscode-44h2 https://dev.to/juliabresolin/debuggando-funcoes-com-mais-facilidade-no-vscode-44h2 <p>Fala, jovens! 👋🏼</p> <p>Eu sou a Julia e nesse meu primeiro post eu vim trazer para vocês uma coisa que eu descobri a pouquíssimo tempo mas que está me ajudando pra caramba, principalmente na hora de debuggar o código.</p> <p>Segue ⬇️</p> <p>Quando temos uma função, independente se com somente um parâmetro ou muitos, nem sempre conseguimos de forma rápida identificar para qual parâmetro está sendo passada aquela informação, por exemplo:</p> <p>Temos aqui, um componente React com um botão que, ao clicar, realiza o login do usuário com determinado serviço (Github, Google, Apple, etc.)</p> <p><a href="https://res.cloudinary.com/practicaldev/image/fetch/s--S3PDAlAf--/c_limit%2Cf_auto%2Cfl_progressive%2Cq_auto%2Cw_880/https://dev-to-uploads.s3.amazonaws.com/uploads/articles/7fr0o7yuhzis3fmmrzq3.png" class="article-body-image-wrapper"><img src="https://res.cloudinary.com/practicaldev/image/fetch/s--S3PDAlAf--/c_limit%2Cf_auto%2Cfl_progressive%2Cq_auto%2Cw_880/https://dev-to-uploads.s3.amazonaws.com/uploads/articles/7fr0o7yuhzis3fmmrzq3.png" alt="Interface do editor de texto Visual Studio Code" width="880" height="234"></a></p> <p>Neste caso, chamamos a função <strong>signIn</strong> para executar a rotina de login e passamos alguns parâmetros para ela. </p> <p>Se você é um programador que já trabalhou com rotinas de login, provávelmente conseguirá identificar, neste caso, qual parâmetro é qual por conta da experência, mas em alguns casos, nos deparamos com rotinas que não estamos acostumados a trabalhar diariamente e para entender à qual parâmetro estamos passando tais informações, teremos que procurar a declaração da função.</p> <p><strong>❗️É aí que entra a configuração de parâmetros do VSCode!</strong> </p> <p>Dentro do VSCode, indo em <strong>Configurações</strong> e pesquisando por <strong><em>parameter name</em></strong>, vamos encontrar duas configurações: uma para a linguagem javascript e outra para a linguagem typescript.</p> <p>Ao mudarmos essas configurações para <strong>all</strong>, o VSCode automaticamente irá mostrar, ao lado de cada parâmetro passado na função, qual é o seu respectivo nome, se liga:</p> <p><a href="https://res.cloudinary.com/practicaldev/image/fetch/s--7xJ5YJEQ--/c_limit%2Cf_auto%2Cfl_progressive%2Cq_66%2Cw_880/https://dev-to-uploads.s3.amazonaws.com/uploads/articles/jfpcs6du3ptfol8xd69y.gif" class="article-body-image-wrapper"><img src="https://res.cloudinary.com/practicaldev/image/fetch/s--7xJ5YJEQ--/c_limit%2Cf_auto%2Cfl_progressive%2Cq_66%2Cw_880/https://dev-to-uploads.s3.amazonaws.com/uploads/articles/jfpcs6du3ptfol8xd69y.gif" alt="Interface do Visual Studio Code" width="880" height="437"></a></p> <p>Dessa forma fica muito mais fácil debugar funções e entender os parâmetros que estão sendo passados para cada uma, tirando, em muitos casos, a necessidade de procurarmos a declaração da função.</p> <p>Muito legal né? 🤓</p> <p>O único ponto contra que encontrei até agora é que, em alguns casos muito pontuais, eu acho que ela acaba "bagunçando" o código, principalmente nos primeiros dias que eu utilizei, o que não tira em nada o mérito uma vez que <em>8 em cada 10 casos ela mais ajuda do que atrapalha</em>.</p> <p>Por hoje é isso, guys!</p> <p>Espero que tenham curtido e comenta aí se você já conhecia essa funcionalidade e o que achou dela.</p> <p>Até a próxima! Valeu! ❤️</p> vscode debug javascript typescript