{"id":230300,"date":"2022-11-24T10:46:00","date_gmt":"2022-11-24T07:46:00","guid":{"rendered":"https:\/\/wordpress.mediadoma.com\/?p=230300"},"modified":"2022-11-24T10:48:51","modified_gmt":"2022-11-24T07:48:51","slug":"um-ide-para-desenvolvimento-wordpress-independentemente-da-experiencia","status":"publish","type":"post","link":"https:\/\/wordpress.mediadoma.com\/pt-pt\/um-ide-para-desenvolvimento-wordpress-independentemente-da-experiencia\/","title":{"rendered":"Um IDE para desenvolvimento WordPress (independentemente da experi\u00eancia)"},"content":{"rendered":"\n<p>No <strong><a href=\"https:\/\/wordpress.mediadoma.com\/pt-pt\/um-ambiente-de-desenvolvimento-wordpress-usando-um-gerenciador-de-pacotes\/\" title=\"artigo anterior\">artigo anterior<\/a><\/strong>, passei pelo processo de configura\u00e7\u00e3o de um ambiente de desenvolvimento local usando um gerenciador de pacotes. Especificamente, falei sobre o uso do <strong><a href=\"https:\/\/brew.sh\/\" target=\"_blank\" rel=\"noopener nofollow\" class=\"external external_icon\">Homebrew<\/a><\/strong> para instalar o <strong><a href=\"https:\/\/laravel.com\/docs\/5.5\/valet\" target=\"_blank\" rel=\"noopener nofollow\" class=\"external external_icon\">Valet<\/a><\/strong> e o <strong><a href=\"https:\/\/getcomposer.org\/\" target=\"_blank\" rel=\"noopener nofollow\" class=\"external external_icon\">Composer<\/a><\/strong>.<\/p>\n<p>O primeiro oferece o servidor web Nginx, um servidor de banco de dados MySQL, enquanto o Homebrew permite instalar o PHP. O Composer oferece a capacidade de lidar com depend\u00eancias do PHP. Se voc\u00ea n\u00e3o leu o post, eu recomendo, pois este post \u00e9 baseado em todo esse ambiente.<\/p>\n<\/p>\n<p>Especificamente, falarei sobre IDEs. \u00c9 um t\u00f3pico quente, eu acho, mas se voc\u00ea n\u00e3o tiver uma prefer\u00eancia, vou orient\u00e1-lo no processo de escolher um que eu acho melhor (pelo menos para come\u00e7ar), configur\u00e1-lo e us\u00e1-lo no contexto do <strong><a href=\"https:\/\/wordpress.mediadoma.com\/pt-pt\/um-ambiente-de-desenvolvimento-wordpress-usando-um-gerenciador-de-pacotes\/\" title=\"ambiente estabelecido na semana passada\">ambiente estabelecido na semana passada<\/a><\/strong>.<\/p>\n<h2>Um IDE para desenvolvimento WordPress<\/h2>\n<p>Para muitos desenvolvedores profissionais do WordPress, \u00e9 prov\u00e1vel que voc\u00ea os ou\u00e7a falando sobre <strong><a href=\"https:\/\/www.jetbrains.com\/phpstorm\/\" target=\"_blank\" rel=\"noopener nofollow\" class=\"external external_icon\">PhpStorm<\/a><\/strong>. E com raz\u00e3o. Eu uso esse IDE espec\u00edfico h\u00e1 mais de um ano e \u00e9 realmente poderoso.<\/p>\n<p><a href=\"https:\/\/wordpress.mediadoma.com\/wp-content\/uploads\/2022\/01\/post-164596-61e768df76d6e.png\" data-rel=\"lightbox\"><img decoding=\"async\" class=\"SDStudio-light-box-enable SDStudio-editor-tools-md-imp\" src=\"https:\/\/wordpress.mediadoma.com\/wp-content\/uploads\/2022\/01\/post-164596-61e768df76d6e.png\" alt=\"Um IDE para desenvolvimento WordPress (independentemente da experi\u00eancia)\"><\/a><\/p>\n<p>Ele tem um \u00f3timo suporte para v\u00e1rios recursos avan\u00e7ados, \u00e9 extens\u00edvel e possui muitos recursos integrados que o tornam um \u00f3timo ambiente para trabalhar; no entanto, descobri que de todos os IDEs que experimentei, ele tamb\u00e9m vem com a curva de aprendizado mais \u00edngreme. \u00c9 tamb\u00e9m um IDE pago que talvez seja um desligamento para alguns. Mas est\u00e1 tudo bem. Abordaremos isso ao longo deste post.<\/p>\n<p>Isso n\u00e3o \u00e9 necessariamente uma coisa ruim: \u00e0s vezes, as coisas que mais valem a pena aprender s\u00e3o as mais dif\u00edceis de usar. Mas existem alternativas por a\u00ed e estou tentando garantir que todos que est\u00e3o lendo isso estejam na mesma p\u00e1gina.<\/p>\n<p><strong><a href=\"https:\/\/wordpress.mediadoma.com\/pt-pt\/um-ambiente-de-desenvolvimento-wordpress-usando-um-gerenciador-de-pacotes\/\" title=\"Como eu disse\">Como eu disse<\/a><\/strong> no post anterior:<\/p>\n<blockquote>\n<p>Se vou escrever sobre esse material em detalhes, devo assumir que todos estamos usando o mesmo ambiente?<\/p>\n<\/blockquote>\n<p>J\u00e1 que estou errando do lado do sim, acho que \u00e9 apropriado selecionar um IDE que funcione bem com qualquer pessoa \u2013 desde aqueles que est\u00e3o apenas aprendendo at\u00e9 aqueles que s\u00e3o um pouco mais avan\u00e7ados. Insira <strong><a href=\"https:\/\/code.visualstudio.com\/\" target=\"_blank\" rel=\"noopener nofollow\" class=\"external external_icon\">o c\u00f3digo do Visual Studio<\/a><\/strong>.<\/p>\n<h3>Uma observa\u00e7\u00e3o sobre este IDE<\/h3>\n<p>Se voc\u00ea l\u00ea este blog h\u00e1 algum tempo (ou est\u00e1 apenas come\u00e7ando), ver\u00e1 que tenho um arquivo de postagens neste IDE espec\u00edfico. Alguns dos posts que escrevi incluem:<\/p>\n<ul>\n<li><a href=\"https:\/\/tommcfarlin.com\/vs-code-wordpress\/\" target=\"_blank\" rel=\"noopener nofollow\" class=\"external external_icon\">C\u00f3digo do Visual Studio para desenvolvimento do WordPress<\/a><\/li>\n<li><strong><a href=\"https:\/\/tommcfarlin.com\/php-codesniffer-in-visual-studio-code\/\" target=\"_blank\" rel=\"noopener nofollow\" class=\"external external_icon\">Configurando PHP CodeSniffer no Visual Studio Code<\/a><\/strong><\/li>\n<li><strong><a href=\"https:\/\/tommcfarlin.com\/visual-studio-code-todo\/\" target=\"_blank\" rel=\"noopener nofollow\" class=\"external external_icon\">TODOs, REVIEWs, and FIXMEs<\/a><\/strong>,<\/li>\n<li>e assim por diante.<\/li>\n<\/ul>\n<p>Na verdade, eu tenho uma lista de <strong><a href=\"https:\/\/tommcfarlin.com\/tag\/visual-studio-code\/\" target=\"_blank\" rel=\"noopener nofollow\" class=\"external external_icon\">pend\u00eancias<\/a><\/strong> inteira pela qual voc\u00ea pode passar. O problema: \u00e9 um pouco datado. Ao usar o PhpStorm, o Visual Studio Code (ou Code, para abreviar) fez melhorias significativas desde a \u00faltima vez que o usei.<\/p>\n<p>Com isso dito, parte desse material pode parecer redundante, mas, no final das contas, nos colocar\u00e1 na mesma p\u00e1gina.<\/p>\n<h3>C\u00f3digo do Visual Studio<\/h3>\n<p>Antes de come\u00e7ar, vale a pena fazer refer\u00eancia a duas coisas:<\/p>\n<ul>\n<li>Por que o Visual Studio Code?<\/li>\n<li>Introdu\u00e7\u00e3o ao c\u00f3digo do Visual Studio<\/li>\n<\/ul>\n<p>O \u00faltimo \u00e9 um t\u00f3pico um pouco grande porque inclui v\u00e1rias coisas para instalar, configurar e configurar, ent\u00e3o abordarei isso come\u00e7ando com este post e os novos, mas pelo menos vale a pena falar sobre por que o Visual O Studio Code \u00e9 um IDE s\u00f3lido para desenvolvimento WordPress.<\/p>\n<h3>1 Por que o Visual Studio Code?<\/h3>\n<p>Al\u00e9m de ser compat\u00edvel com todos os principais sistemas operacionais, uma das primeiras coisas a serem observadas sobre o Code \u00e9 que ele mant\u00e9m uma c\u00f3pia de suas configura\u00e7\u00f5es em seu pr\u00f3prio arquivo para que voc\u00ea possa sempre consult\u00e1-lo, mas pode personaliz\u00e1-lo com suas pr\u00f3prias configura\u00e7\u00f5es .<\/p>\n<p><a href=\"https:\/\/wordpress.mediadoma.com\/wp-content\/uploads\/2022\/01\/post-164596-61e768e50ca51.png\" data-rel=\"lightbox\"><img decoding=\"async\" class=\"SDStudio-light-box-enable SDStudio-editor-tools-md-imp\" src=\"https:\/\/wordpress.mediadoma.com\/wp-content\/uploads\/2022\/01\/post-164596-61e768e50ca51.png\" alt=\"Um IDE para desenvolvimento WordPress (independentemente da experi\u00eancia)\"><\/a><\/p>\n<p>Al\u00e9m disso, tudo \u00e9 mantido em um arquivo JSON que permite personaliz\u00e1-lo para se adequar ao ambiente em que voc\u00ea est\u00e1 trabalhando. Talvez seja PHP, talvez seja JavaScript, ou talvez seja algo completamente diferente.<\/p>\n<p>Al\u00e9m disso, manter as configura\u00e7\u00f5es port\u00e1teis facilita o compartilhamento entre seus computadores. Isso significa que voc\u00ea pode colocar o arquivo em, digamos, uma pasta do Dropbox e ter suas configura\u00e7\u00f5es referenciadas em todas as suas m\u00e1quinas.<\/p>\n<p><a href=\"https:\/\/wordpress.mediadoma.com\/wp-content\/uploads\/2022\/01\/post-164596-61e768e9bc315.png\" data-rel=\"lightbox\"><img decoding=\"async\" class=\"SDStudio-light-box-enable SDStudio-editor-tools-md-imp\" src=\"https:\/\/wordpress.mediadoma.com\/wp-content\/uploads\/2022\/01\/post-164596-61e768e9bc315.png\" alt=\"Um IDE para desenvolvimento WordPress (independentemente da experi\u00eancia)\"><\/a><\/p>\n<p>Isso \u00e9 \u00fatil, \u00e9 claro, se voc\u00ea tiver apenas v\u00e1rias m\u00e1quinas. E se voc\u00ea fizer isso, ent\u00e3o voc\u00ea pode gostar de ter os ambientes de desenvolvimento em sincronia para que seja f\u00e1cil inundar entre eles.<\/p>\n<h3>2 Introdu\u00e7\u00e3o ao c\u00f3digo do Visual Studio<\/h3>\n<p>Come\u00e7ar com o IDE \u00e9 simples. \u00c9 realmente uma quest\u00e3o de:<\/p>\n<ol>\n<li>Navegando para <strong><a href=\"https:\/\/code.visualstudio.com\/\" target=\"_blank\" rel=\"noopener nofollow\" class=\"external external_icon\">a p\u00e1gina inicial do software,<\/a><\/strong><\/li>\n<li>Baixando a vers\u00e3o apropriada para seu sistema operacional,<\/li>\n<li>Em seguida, instalando-o.<\/li>\n<\/ol>\n<p>Mas apenas instal\u00e1-lo n\u00e3o \u00e9 suficiente, n\u00e3o \u00e9?<\/p>\n<p>Quero dizer, ainda precisamos falar sobre adicionar espa\u00e7os de trabalho para cada um de nossos projetos, definir configura\u00e7\u00f5es e instalar extens\u00f5es que nos ajudar\u00e3o a ser mais produtivos no trabalho que fazemos.<\/p>\n<p>Ao longo dos pr\u00f3ximos posts, faremos exatamente isso. Afinal, se essas postagens ficarem muito longas, voc\u00ea n\u00e3o far\u00e1 nada com o resto do dia \ud83d\ude42.<\/p>\n<h3>E as Extens\u00f5es?<\/h3>\n<p>Lembre-se, no entanto, como estamos trabalhando principalmente com o WordPress e software relacionado nesta s\u00e9rie e no pr\u00f3ximo artigo, precisamos ter certeza de que temos algumas coisas instaladas para lidar adequadamente com o que faremos.<\/p>\n<p>Isso inclui coisas como suporte para:<\/p>\n<ul>\n<li><a href=\"https:\/\/marketplace.visualstudio.com\/items?itemName=wordpresstoolbox.wordpress-toolbox\" target=\"_blank\" rel=\"noopener nofollow\" class=\"external external_icon\">WordPress<\/a>. Uma das coisas boas de usar um IDE inteligente \u00e9 que ele pode oferecer conclus\u00e3o de c\u00f3digo. Usar uma linguagem como PHP geralmente \u00e9 oferecido pela maioria dos IDEs. Este plugin adiciona suporte para WordPress.<\/li>\n<li><a href=\"https:\/\/marketplace.visualstudio.com\/items?itemName=ikappas.phpcs\" target=\"_blank\" rel=\"noopener nofollow\" class=\"external external_icon\">Padr\u00f5es de Codifica\u00e7\u00e3o PSR2<\/a>. Embora eu j\u00e1 tenha sido f\u00e3 dos Padr\u00f5es de Codifica\u00e7\u00e3o do WordPress, desde ent\u00e3o mudei para os <strong><a href=\"https:\/\/www.php-fig.org\/psr\/psr-2\/\" target=\"_blank\" rel=\"noopener nofollow\" class=\"external external_icon\">Padr\u00f5es de Codifica\u00e7\u00e3o PSR<\/a><\/strong> (por v\u00e1rios motivos).<\/li>\n<li><a href=\"https:\/\/marketplace.visualstudio.com\/items?itemName=felixfbecker.php-debug\" target=\"_blank\" rel=\"noopener nofollow\" class=\"external external_icon\">Depura\u00e7\u00e3o<\/a>. Usar o <strong><a href=\"https:\/\/xdebug.org\/\" target=\"_blank\" rel=\"noopener nofollow\" class=\"external external_icon\">Xdebug<\/a><\/strong> \u00e9 essencial se voc\u00ea deseja ser aprovado usando as instru\u00e7\u00f5es <strong>echo<\/strong> e <strong>var_dump<\/strong> em seu c\u00f3digo. Al\u00e9m disso, ajuda a analisar mais profundamente o c\u00f3digo-fonte do WordPress ao analisar poss\u00edveis problemas.<\/li>\n<li><a href=\"https:\/\/marketplace.visualstudio.com\/items?itemName=wayou.vscode-todo-highlight\" target=\"_blank\" rel=\"noopener nofollow\" class=\"external external_icon\">Gerenciamento TODO<\/a>. Na maioria das vezes, ao escrever c\u00f3digo, haver\u00e1 lugares que voc\u00ea precisar\u00e1 voltar e revisar, corrigir ou simplesmente fazer antes de liberar algo para teste ou produ\u00e7\u00e3o. Usar uma ferramenta como essa ajudar\u00e1 voc\u00ea a encontr\u00e1-los facilmente antes de confirmar o c\u00f3digo no controle de origem ou implant\u00e1-lo.<\/li>\n<li>E mais.<\/li>\n<\/ul>\n<p>Obviamente, as coisas vinculadas acima levam voc\u00ea \u00e0 p\u00e1gina inicial de cada um dos plugins, mas \u00e9 poss\u00edvel \u2013 e provavelmente melhor \u2013 instal\u00e1-los de dentro do editor para que voc\u00ea possa gerenci\u00e1-los mais facilmente.<\/p>\n<p>Lembre-se, o objetivo do post anterior era ter uma maneira de gerenciar facilmente todos os softwares que estamos instalando. E instalar as extens\u00f5es por meio do IDE fornece exatamente a mesma experi\u00eancia para o IDE.<\/p>\n<p>Finalmente, estas s\u00e3o as extens\u00f5es que considero \u00fateis ao trabalhar com o WordPress.<\/p>\n<h2>A seguir<\/h2>\n<p>Embora eu tenha fornecido um resumo de muitas das coisas acima, n\u00e3o \u00e9 necess\u00e1rio aprofundar alguns deles ou o que esperar ao us\u00e1-los.<\/p>\n<p>Al\u00e9m disso, ele n\u00e3o fala sobre os habituais tabs-versus-spaces, fontes que acho que valem a pena usar, linting Sass, estilo e linting JavaScript e assim por diante.<\/p>\n<p>At\u00e9 l\u00e1, trabalhe para instalar o Visual Studio Code e configur\u00e1-lo usando as extens\u00f5es vinculadas acima. \u00c9 f\u00e1cil fazer isso de dentro do IDE. E se tiver alguma d\u00favida, fique \u00e0 vontade para deixar nos coment\u00e1rios.<\/p>\n<p><div id=\"PostUnique_PostSource\" style=\"padding-top: 50px\">Fonte de grava\u00e7\u00e3o:  <a target=\"_blank\" rel=\"noopener nofollow\" href=\"\/\/tommcfarlin.com\" class=\"external external_icon\">tommcfarlin.com<\/a><\/div><\/p>\n","protected":false},"excerpt":{"rendered":"<p>Um IDE gratuito para desenvolvimento do WordPress que \u00e9 extens\u00edvel, poderoso e continuamente aprimorado que nos atende bem.<\/p>\n","protected":false},"author":1,"featured_media":164597,"comment_status":"closed","ping_status":"closed","sticky":false,"template":"","format":"standard","meta":{"footnotes":"","_wp_rev_ctl_limit":""},"categories":[837,846,1069,867],"tags":[1170],"class_list":["post-230300","post","type-post","status-publish","format-standard","has-post-thumbnail","hentry","category-guia-para-iniciantes","category-tutoriais","category-um-computador","category-wordpress-8","tag-affiai-pt-pt"],"_links":{"self":[{"href":"https:\/\/wordpress.mediadoma.com\/pt-pt\/wp-json\/wp\/v2\/posts\/230300","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=230300"}],"version-history":[{"count":0,"href":"https:\/\/wordpress.mediadoma.com\/pt-pt\/wp-json\/wp\/v2\/posts\/230300\/revisions"}],"wp:featuredmedia":[{"embeddable":true,"href":"https:\/\/wordpress.mediadoma.com\/pt-pt\/wp-json\/wp\/v2\/media\/164597"}],"wp:attachment":[{"href":"https:\/\/wordpress.mediadoma.com\/pt-pt\/wp-json\/wp\/v2\/media?parent=230300"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/wordpress.mediadoma.com\/pt-pt\/wp-json\/wp\/v2\/categories?post=230300"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/wordpress.mediadoma.com\/pt-pt\/wp-json\/wp\/v2\/tags?post=230300"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}