Assim como seus concorrentes, a ferramenta permite instala\u00e7\u00e3o de extens\u00f5es. Por\u00e9m, uma vantagem competitiva do VS Code \u00e9 que seus plugins s\u00e3o menos pesados, permitindo uma maior variedade sem afetar sua usabilidade. Outro ponto positivo \u00e9 sua integra\u00e7\u00e3o nativa com o Git.<\/p>\n\n\n\n
Separamos alguns plugins que s\u00e3o \u00fateis e podem te ajudar na produtividade de seus projetos:<\/p>\n\n\n\n
>> Leia tamb\u00e9m: “Melhores editores de texto gratuitos”<\/em><\/a><\/p>\n\n\n\n Para come\u00e7ar bem a lista, a extens\u00e3o para VS Code Theme<\/a> permite que voc\u00ea estilize a interface do seu editor. \u00c9 importante que ele tenha um visual agrad\u00e1vel, afinal, voc\u00ea passar\u00e1 todos os dias olhando para ele.<\/p>\n\n\n\n Aqui vai exemplos de temas interessantes – existem outros milhares:<\/p>\n\n\n\n VS Code j\u00e1 possui suporte para diversas linguagens e frameworks. Caso sua tecnologia n\u00e3o esteja inclu\u00edda \u00e9 poss\u00edvel baixar a extens\u00e3o<\/a>. Ela adicionar\u00e1 automaticamente features espec\u00edficos e essenciais da sua linguagem ou framework.<\/p>\n\n\n\n O que me chamou mais aten\u00e7\u00e3o dessa extens\u00e3o para VS Code foi a diversidade de bibliotecas. O Icon Fonts<\/a> possui \u00edcones das mais populares fonts, Font Awesome, Ionicons, Glyphicons e Material Design, por exemplo.<\/p>\n\n\n\n >>Leia tamb\u00e9m: “5 linguagens de programa\u00e7\u00e3o para aprender”<\/a><\/em><\/p>\n\n\n\n Este plugin destaca TODO, FIXME e outras anota\u00e7\u00f5es em seu c\u00f3digo. Ele real\u00e7a as palavras-chaves por padr\u00e3o, por\u00e9m \u00e9 poss\u00edvel configur\u00e1-lo e personaliz\u00e1-lo.<\/p>\n\n\n\n TODO Highlight<\/a> quebra um galho gigantesco quando esquecemos de revisar nossos TODOs antes de enviarmos para deploy. Isso economiza retrabalho e aumenta produtividade<\/a>.<\/p>\n\n\n\n Para os(as) desenvolvedores(as) Front-end<\/a> de plant\u00e3o, separei dois plugins em um t\u00f3pico. Com o Color Info<\/a> \u00e9 poss\u00edvel visualizar as cores que voc\u00ea utilizou no CSS em uma escala maior. Ou seja, a cor ser\u00e1 exibida em um “quadrado” maior, al\u00e9m de mostrar suas informa\u00e7\u00f5es em todos os formatos (hex, rgb. hsl e cmyk).<\/p>\n\n\n\n J\u00e1 com o SVG Viewer<\/a> \u00e9 poss\u00edvel renderizar arquivos SVG e ver como eles ficam sem ter que sair do editor. Voc\u00ea consegue, tamb\u00e9m, converter para PNG.<\/p>\n\n\n\n <edit> Uma das extens\u00f5es para VS Code mais conhecida e usada por desenvolvedores(as) Web<\/a>. Isso porque, com o Prettier<\/a>, \u00e9 poss\u00edvel formatar documentas Javascript <\/a>e CSS e deix\u00e1-los iguais para toda a equipe, independente de quem escreveu. <\/p>\n\n\n\n >>Leia tamb\u00e9m: Emprego como desenvolvedor: checklist pr\u00e1tico<\/a><\/em><\/p>\n\n\n\n Quokka<\/a> \u00e9 um plugin de depura\u00e7\u00e3o. Ou seja, fornece feedback ao vivo sobre o c\u00f3digo. A extens\u00e3o \u00e9 f\u00e1cil de configurar e funciona automaticamente com projetos TypeScript.<\/a><\/p>\n\n\n\n Por \u00faltima, mas n\u00e3o menos importante, temos o Open-In-Browser<\/a>. O VS Code n\u00e3o oferece nenhuma interface incorporada para abrir arquivos no navegador. Com o plugin, \u00e9 poss\u00edvel adicionar um item “Abrir com navegador padr\u00e3o”.<\/p>\n\n\n\n Obviamente voc\u00ea n\u00e3o tem obriga\u00e7\u00e3o de usar todas as extens\u00f5es do artigo. O objetivo do conte\u00fado \u00e9 apresentar plugins que podem te ajudar e aumentar sua produtividade.<\/p>\n\n\n\n Quer participar de uma comunidade de desenvolvedores(as)? Conhe\u00e7a a He4rt Developers<\/a>. Entre no link: discord.io\/He4rt<\/a> <\/p>\n\n\n\n Fique \u00e0 vontade de compartilhar feedbacks e outras extens\u00f5es para VS Code nos coment\u00e1rio. Espero que tenha gostado do texto \ud83d\ude42<\/p>\n\n\n\n Est\u00e1 buscando novas oportunidades como desenvolvedor? Acesse a ProgramaThor<\/a>, uma startup focada no recrutamento de desenvolvedores. Para se candidatar \u00e0s vagas para programador e receber notifica\u00e7\u00f5es em casos de matching, basta se cadastrar e completar seu perfil corretamente.<\/p>\n\n\n\nTheme<\/h2>\n\n\n\n
Pacotes de linguagens e frameworks<\/h2>\n\n\n\n
Icon Fonts<\/h2>\n\n\n\n
TODO Highlight<\/h2>\n\n\n\n
Color Info e SVG Viewer<\/h2>\n\n\n\n
O Jo\u00e3o<\/a> l\u00e1 no nosso Twitter<\/a> deu um feedback sobre o conte\u00fado e acrescentou mais uma extens\u00e3o. O Color Highlight<\/a>, assim como o TODO Highlight, \u00e9 poss\u00edvel destacar as cores adicionando um background da pr\u00f3pria cor.
<\/edit><\/p>\n\n\n\n![\"Top](\"https:\/\/programathor.com.br\/blog\/wp-content\/uploads\/2018\/09\/vaga-desenvolvedor-1.jpg\")
<\/a>Prettier<\/h2>\n\n\n\n
Quokka<\/h2>\n\n\n\n
Open-In-Browser<\/h2>\n\n\n\n
Conclus\u00e3o<\/h2>\n\n\n\n
![\"PROGRAMATHOR\"](\"https:\/\/programathor.com.br\/blog\/wp-content\/uploads\/2018\/08\/LOGO-PROGRAMATHOR-1-1024x171.jpg\"){kind=logo}
<\/a><\/figure><\/div>\n\n\n\n
\n\n\n\nConsiga um emprego!<\/strong><\/h3>\n\n\n\n