{"id":232343,"date":"2023-01-13T15:43:00","date_gmt":"2023-01-13T12:43:00","guid":{"rendered":"https:\/\/wordpress.mediadoma.com\/?p=232343"},"modified":"2022-11-10T08:51:26","modified_gmt":"2022-11-10T05:51:26","slug":"5-extensoes-uteis-para-vs-code","status":"publish","type":"post","link":"https:\/\/wordpress.mediadoma.com\/pt-pt\/5-extensoes-uteis-para-vs-code\/","title":{"rendered":"5 extens\u00f5es \u00fateis para VS Code"},"content":{"rendered":"\n

O sucesso do VS Code e sua r\u00e1pida ado\u00e7\u00e3o pela comunidade de desenvolvedores n\u00e3o se deve apenas ao fato de ser um editor muito competente com ferramentas \u00fateis prontas para uso, mas \u00e0 vibrante comunidade de usu\u00e1rios criando v\u00e1rios \u00fateis para trabalhar melhor com ele. Vamos passar por cinco extens\u00f5es do VS Code escolhidas a dedo para melhorar a velocidade e a efici\u00eancia do nosso fluxo de trabalho.<\/p>\n

Cliente REST<\/h2>\n

https:\/\/marketplace.visualstudio.com\/items?itemName=waderyan.gitblame<\/a><\/p>\n

Depois de mudar para o VS Code do PhpStorm, a primeira coisa que perdi foi o cliente REST integrado que o PhpStorm tinha, onde voc\u00ea podia escrever solicita\u00e7\u00f5es em texto simples. Felizmente, essa extens\u00e3o permite que voc\u00ea fa\u00e7a solicita\u00e7\u00f5es de API REST diretamente de um editor de VS Code e obtenha a resposta. Voc\u00ea simplesmente precisa iniciar um arquivo em branco, adicionar a solicita\u00e7\u00e3o l\u00e1, alterar seu idioma para “http" e voc\u00ea obter\u00e1 um bot\u00e3o na parte superior do arquivo dizendo SEND REQUEST que voc\u00ea clicar\u00e1 para enviar a solicita\u00e7\u00e3o da API REST de dentro C\u00f3digo VS.<\/p>\n

Culpa integrada do Git<\/h2>\n

https:\/\/marketplace.visualstudio.com\/items?itemName=waderyan.gitblame<\/a><\/p>\n<\/p>\n

Esta extens\u00e3o permite que voc\u00ea visualize quem cometeu o qu\u00ea em cada linha do seu editor. Embora a extens\u00e3o do Git Lens seja mais onipresente, prefiro o Git Blame porque n\u00e3o gosto de ter as mensagens de confirma\u00e7\u00e3o, mesmo que estejam desbotadas, misturadas com meu c\u00f3digo como o Git Lens faz. Essa extens\u00e3o exibir\u00e1 o committer na barra de status na parte inferior e, quando voc\u00ea clicar nele, exibir\u00e1 a mensagem de commit com um link para pular para o commit no GitHub. Aqui est\u00e1 minha pr\u00f3pria captura de tela mostrando o link:<\/p>\n

\"5<\/a><\/p>\n

Colorizador de par de colchetes<\/h2>\n

https:\/\/marketplace.visualstudio.com\/items?itemName=CoenraadS.bracket-pair-colorizer-2<\/a><\/p>\n

\"5<\/a><\/p>\n

\u00c9 f\u00e1cil se perder no c\u00f3digo tentando descobrir qual colchete corresponde a qual. Essa extens\u00e3o exibir\u00e1 cada n\u00edvel de colchete em uma cor diferente e at\u00e9 desenhar\u00e1 uma linha do colchete de abertura ao de fechamento, para que voc\u00ea esteja sempre ciente do contexto em que est\u00e1 trabalhando.<\/p>\n

Destaque de sintaxe JavaScript Babel<\/h2>\n

https:\/\/marketplace.visualstudio.com\/items?itemName=mgmcdermott.vscode-language-babel<\/a><\/p>\n

\"5<\/a><\/p>\n

Essa extens\u00e3o n\u00e3o apenas destacar\u00e1 os recursos do ES6 ou ES7, mas tamb\u00e9m destacar\u00e1 corretamente o c\u00f3digo React, a sintaxe do GraphQL e at\u00e9 o CSS em JS no estilo StyledComponents.<\/p>\n

Tema de cores do VS Code<\/h2>\n

https:\/\/marketplace.visualstudio.com\/items?itemName=akamud.vscode-theme-onedark<\/a><\/p>\n

\"5<\/a><\/p>\n

Os esquemas de cores para o editor que se adequam perfeitamente ao nosso gosto n\u00e3o s\u00e3o dif\u00edceis de encontrar? Uma vez que encontramos um, n\u00e3o vamos deix\u00e1-lo ir at\u00e9 que um melhor apare\u00e7a. O esquema de cores que estou usando atualmente e acho muito legal \u00e9 este, Atom One Dark, e combina bem com o tema de \u00edcones Seti inclu\u00eddo no VS Code.<\/p>\n

Sua vez<\/h2>\n

Alguma extens\u00e3o que voc\u00ea ame e queira express\u00e1-la publicamente? Conhece algum similar aos apresentados aqui? Talvez um que voc\u00ea desenvolveu? Deixe-me saber nos coment\u00e1rios!<\/p>\n

Fonte de grava\u00e7\u00e3o: startfunction.com<\/a><\/div><\/p>\n","protected":false},"excerpt":{"rendered":"

Cinco extens\u00f5es escolhidas a dedo para o VS Code que melhorar\u00e3o a velocidade e a efici\u00eancia do seu fluxo de trabalho.<\/p>\n","protected":false},"author":1,"featured_media":157430,"comment_status":"closed","ping_status":"closed","sticky":false,"template":"","format":"standard","meta":{"footnotes":"","_wp_rev_ctl_limit":""},"categories":[898,722,920,796],"tags":[1170],"class_list":["post-232343","post","type-post","status-publish","format-standard","has-post-thumbnail","hentry","category-codigo-2","category-desenvolvedor","category-outro","category-visual-studio-code-8","tag-affiai-pt-pt"],"_links":{"self":[{"href":"https:\/\/wordpress.mediadoma.com\/pt-pt\/wp-json\/wp\/v2\/posts\/232343","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/wordpress.mediadoma.com\/pt-pt\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/wordpress.mediadoma.com\/pt-pt\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/wordpress.mediadoma.com\/pt-pt\/wp-json\/wp\/v2\/users\/1"}],"replies":[{"embeddable":true,"href":"https:\/\/wordpress.mediadoma.com\/pt-pt\/wp-json\/wp\/v2\/comments?post=232343"}],"version-history":[{"count":0,"href":"https:\/\/wordpress.mediadoma.com\/pt-pt\/wp-json\/wp\/v2\/posts\/232343\/revisions"}],"wp:featuredmedia":[{"embeddable":true,"href":"https:\/\/wordpress.mediadoma.com\/pt-pt\/wp-json\/wp\/v2\/media\/157430"}],"wp:attachment":[{"href":"https:\/\/wordpress.mediadoma.com\/pt-pt\/wp-json\/wp\/v2\/media?parent=232343"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/wordpress.mediadoma.com\/pt-pt\/wp-json\/wp\/v2\/categories?post=232343"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/wordpress.mediadoma.com\/pt-pt\/wp-json\/wp\/v2\/tags?post=232343"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}