{"componentChunkName":"component---src-templates-blog-post-js","path":"/extensões-super-hiper-legais-para-vscode/","result":{"data":{"markdownRemark":{"fields":{"slug":"/extensões-super-hiper-legais-para-vscode/"},"frontmatter":{"title":"Extensões super hiper legais para VSCode","description":"Aumentando sua produtividade e qualidade de código com extensões para VSCode.","date":"11 de agosto de 2020","thumbnail":"/assets/img/visual-studio-code.png"},"html":"<h1>Introdução</h1>\n<p>Fala gurizada, esse é meu primeiro post e já começamos com estilo, aqui vai algumas dicas hiper legais para os devs de plantão.</p>\n<p>Atualmente não podemos falar de produtividade ao codar sem citarmos editores de código, e o VSCode não deixa duvida que é o cara certo para isso. Nativamente ele já possui algumas ferramentas que facilitam muito a vida na hora do desenvolvimento, mas existem também uma infinidade de extensões para aumentarmos ainda mais nossa produtividade.</p>\n<h1>Code Snippets</h1>\n<p><img src=\"/assets/img/ngrepeatsnippet.gif\" alt=\"Um exemplo de Code Snippet onde é executado vários comandos que geram blocos de código.\" title=\"Exemplo de snippets.\"></p>\n<p>Code Snippets são \"atalhos\" que geram instruções e blocos de código extensos e comuns no dia a dia.</p>\n<p>Falando sério, não há nada mais delicinha que snippets, e existem váááários deles no VSCode, para qualquer tipo de linguagem e gosto. </p>\n<p>Os principais que eu poderia citar para o universo Front-end são:</p>\n<h3><strong>Para desenvolvimento:</strong></h3>\n<ul>\n<li><a href=\"https://marketplace.visualstudio.com/items?itemName=xabikos.JavaScriptSnippets\">JavaScript (ES6) code snippets</a>;</li>\n<li><a href=\"https://marketplace.visualstudio.com/items?itemName=skyran.js-jsx-snippets\">JS JSX Snippets</a>;</li>\n<li><a href=\"https://marketplace.visualstudio.com/items?itemName=PulkitGangwar.nextjs-snippets\">Next.js snippets</a>;</li>\n<li><a href=\"https://marketplace.visualstudio.com/items?itemName=Mikael.Angular-BeastCode\">Angular 8 Snippets;</a></li>\n</ul>\n<h3><strong>Para testes:</strong></h3>\n<ul>\n<li><a href=\"https://marketplace.visualstudio.com/items?itemName=andys8.jest-snippets\">Jest Snippets</a>;</li>\n<li><a href=\"https://marketplace.visualstudio.com/items?itemName=iZDT.javascript-unit-test-snippet\">JavaScript Unit Test snippets</a>;</li>\n</ul>\n<h1>Live Server</h1>\n<p><img src=\"/assets/img/vscode-live-server-animated-demo.gif\" alt=\"Gif mostrando o funcionamento da extensão live server, ao modificar um arquivo .html, o navegador atualiza sozinho!\" title=\"Exemplo de Live Server\"></p>\n<p><a href=\"https://marketplace.visualstudio.com/items?itemName=ritwickdey.LiveServer\">Essa extensão</a> é mágica e facilita muito projetos \"vanilla\", sem nenhum framework nem nada do tipo. O que ela faz é iniciar um servidor de desenvolvimento com reload de página automático, ou seja, ao modificar um arquivo do seu projeto a extensão já atualiza seu navegador sozinha!  Diga adeus aos infinitos F5.</p>\n<h1>Produtividade</h1>\n<p>Essas extensões são feras quando o quesito é melhorar nossa produtividade!</p>\n<h3><strong><a href=\"https://marketplace.visualstudio.com/items?itemName=aaron-bond.better-comments\">Better Comments</a></strong></h3>\n<p>Essa extensão ajuda a criar alguns comentários mais amigáveis no nosso código, podemos até categorizar nossas anotações, bacana né?</p>\n<p><img src=\"/assets/img/better-comments.png\" alt=\"Uma imagem demonstrando todas as categorias de comentarios da extensao Better Comments\" title=\"Exemplo better comments\"></p>\n<h3><strong><a href=\"https://marketplace.visualstudio.com/items?itemName=MS-vsliveshare.vsliveshare\">Live Share</a></strong></h3>\n<p>Cara, essa extensão é mágica, sério! Ela te permite trabalhar em conjunto num mesmo projeto simultaneamente! E o mais bacana é que você acompanha em tempo real as alterações do seu colega. <s>Agora da para acompanhar as gambiarras ao vivo.</s></p>\n<h3><a href=\"https://marketplace.visualstudio.com/items?itemName=MS-vsliveshare.vsliveshare\"></a><strong><a href=\"https://marketplace.visualstudio.com/items?itemName=esbenp.prettier-vscode\">Prettier</a></strong></h3>\n<p>O que essa extensão faz é formatar seu código, podendo seguir um padrão pré definido. Ela ajuda demais em projetos com Lint, fica a dica!</p>\n<h3><a href=\"https://marketplace.visualstudio.com/items?itemName=esbenp.prettier-vscode\"></a><strong><a href=\"https://marketplace.visualstudio.com/items?itemName=ritwickdey.live-sass\">Live Sass Compiler</a></strong></h3>\n<p>Essa extensão faz automaticamente a compilação/transpilação de arquivos SASS/SCSS em tempo real e funciona super bem com o Live Server!</p>\n<p><img src=\"/assets/img/animatedpreview.gif\" alt=\"gif demonstrando o uso da extensao Live Sass Compile, onde o mesmo mostra alteraçoes sendo atualizadas em tempo real no navegador\" title=\"Exemplo Live Sass Compiler\"></p>\n<h1>Menções honrosas</h1>\n<p>Algumas extensões não couberam em nenhum tópico acima, mas ainda sim são super delicinhas e valem a pena dar uma conferida:</p>\n<h3><strong><a href=\"https://marketplace.visualstudio.com/items?itemName=waderyan.gitblame\">Git Blame</a></strong></h3>\n<p>Essa extensão serve para quem desenvolve em código compartilhado com outros devs, ao colocar o cursor em uma linha do código, a extensão mostra qual desenvolvedor fez ou alterou aquela linha. <s>Assim fica mais fácil dar nos dedos.</s></p>\n<h3><strong><a href=\"https://marketplace.visualstudio.com/items?itemName=2gua.rainbow-brackets\">Rainbow Brackets</a></strong></h3>\n<p>O que essa extensão faz é destacar os parênteses, chaves e colchetes, deixando mais visível onde cada um se inicia e finaliza, assim evitando confusão.</p>\n<h3><strong><a href=\"https://marketplace.visualstudio.com/items?itemName=formulahendry.auto-rename-tag\">Auto Rename Tag</a></strong></h3>\n<p>Essa extensão nos ajuda a alterar algum trecho de código HTML, ao modificar o início de uma tag a extensão altera automaticamente seu fechamento, e vice-versa.</p>\n<h1>Conclusão</h1>\n<p>Esses pequenos problemas que as extensões resolvem fazem uma baita diferença no nosso dia a dia, seja automatizando algo repetitivo ou nos ajudando a executar uma tarefa específica. Contar com um editor de código mais inteligente nos ajuda a ser mais eficientes.</p>\n<p>E ai? Curtiram o post? Fique a vontade para expressar sua opinião na área de comentários! E caso ficou faltando alguma extensão maneira, compartilha com noix nos comentários! O universo agradece!</p>\n<p>Por hoje é só, aquele abraço!</p>","timeToRead":3}},"pageContext":{"slug":"/extensões-super-hiper-legais-para-vscode/","previousPost":null,"nextPost":{"fields":{"slug":"/novas-features-do-es2021-es12/"},"frontmatter":{"title":"Novas features do ES2021/ES12."}}}},"staticQueryHashes":["1246478059","1873617545","764694655"]}