{"id":229957,"date":"2022-11-24T11:02:00","date_gmt":"2022-11-24T08:02:00","guid":{"rendered":"https:\/\/wordpress.mediadoma.com\/?p=229957"},"modified":"2022-11-24T11:04:03","modified_gmt":"2022-11-24T08:04:03","slug":"un-ide-para-el-desarrollo-de-wordpress-independientemente-de-la-experiencia","status":"publish","type":"post","link":"https:\/\/wordpress.mediadoma.com\/es\/un-ide-para-el-desarrollo-de-wordpress-independientemente-de-la-experiencia\/","title":{"rendered":"Un IDE para el desarrollo de WordPress (independientemente de la experiencia)"},"content":{"rendered":"\n<p>En <strong><a href=\"https:\/\/wordpress.mediadoma.com\/es\/un-entorno-de-desarrollo-de-wordpress-usando-un-administrador-de-paquetes\/\" title=\"el art\u00edculo anterior\">el art\u00edculo anterior<\/a><\/strong>, analic\u00e9 el proceso de configuraci\u00f3n de un entorno de desarrollo local mediante un administrador de paquetes. Espec\u00edficamente, habl\u00e9 sobre el uso de <strong><a href=\"https:\/\/brew.sh\/\" target=\"_blank\" rel=\"noopener nofollow\" class=\"external external_icon\">Homebrew<\/a><\/strong> para instalar <strong><a href=\"https:\/\/laravel.com\/docs\/5.5\/valet\" target=\"_blank\" rel=\"noopener nofollow\" class=\"external external_icon\">Valet<\/a><\/strong> y <strong><a href=\"https:\/\/getcomposer.org\/\" target=\"_blank\" rel=\"noopener nofollow\" class=\"external external_icon\">Composer<\/a><\/strong>.<\/p>\n<p>El primero ofrece el servidor web Nginx, un servidor de base de datos MySQL, mientras que Homebrew te permite instalar PHP. Composer le brinda la capacidad de lidiar con las dependencias de PHP. Si no ha le\u00eddo la publicaci\u00f3n, se la recomiendo encarecidamente, ya que esta publicaci\u00f3n se basa en todo ese entorno.<\/p>\n<\/p>\n<p>Espec\u00edficamente, voy a estar hablando de IDE. Es un tema candente, supongo, pero si no tiene una preferencia, lo guiar\u00e9 a trav\u00e9s del proceso de elegir uno que creo que es mejor (al menos para empezar), configurarlo y usarlo. en el contexto del <strong><a href=\"https:\/\/wordpress.mediadoma.com\/es\/un-entorno-de-desarrollo-de-wordpress-usando-un-administrador-de-paquetes\/\" title=\"entorno establecido la semana pasada\">entorno establecido la semana pasada<\/a><\/strong>.<\/p>\n<h2>Un IDE para el desarrollo de WordPress<\/h2>\n<p>Para muchos desarrolladores profesionales de WordPress, es probable que los escuche hablar sobre <strong><a href=\"https:\/\/www.jetbrains.com\/phpstorm\/\" target=\"_blank\" rel=\"noopener nofollow\" class=\"external external_icon\">PhpStorm<\/a><\/strong>. Y con buena raz\u00f3n. He usado este IDE en particular durante m\u00e1s de un a\u00f1o y es 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=\"Un IDE para el desarrollo de WordPress (independientemente de la experiencia)\"><\/a><\/p>\n<p>Tiene un excelente soporte para una serie de funciones avanzadas, es extensible y tiene muchas funciones integradas que lo convierten en un excelente entorno para trabajar; sin embargo, descubr\u00ed que, de todos los IDE que prob\u00e9, tambi\u00e9n viene con la curva de aprendizaje m\u00e1s pronunciada. Tambi\u00e9n es un IDE de pago que tal vez desanime a algunos. Pero eso est\u00e1 bien. Abordaremos eso a lo largo de esta publicaci\u00f3n.<\/p>\n<p>Esto no es necesariamente algo malo: a veces, las cosas que m\u00e1s vale la pena aprender son las m\u00e1s dif\u00edciles de usar. Pero existen alternativas y estoy tratando de asegurarme de que todos los que lean esto est\u00e9n en la misma p\u00e1gina.<\/p>\n<p><strong><a href=\"https:\/\/wordpress.mediadoma.com\/es\/un-entorno-de-desarrollo-de-wordpress-usando-un-administrador-de-paquetes\/\" title=\"Como dije\">Como dije<\/a><\/strong> en el post anterior:<\/p>\n<blockquote>\n<p>Si voy a escribir extensamente sobre este material, \u00bfdebo suponer que todos estamos usando el mismo entorno?<\/p>\n<\/blockquote>\n<p>Dado que me estoy equivocando por el lado de s\u00ed, entonces creo que es apropiado seleccionar un IDE que creo que funcionar\u00e1 bien con cualquier persona, desde aquellos que reci\u00e9n est\u00e1n aprendiendo hasta aquellos que son un poco m\u00e1s avanzados. Ingrese <strong><a href=\"https:\/\/code.visualstudio.com\/\" target=\"_blank\" rel=\"noopener nofollow\" class=\"external external_icon\">el c\u00f3digo de Visual Studio<\/a><\/strong>.<\/p>\n<h3>Una nota sobre este IDE<\/h3>\n<p>Si ha le\u00eddo este blog durante alg\u00fan tiempo (o reci\u00e9n est\u00e1 comenzando), encontrar\u00e1 que tengo un archivo de publicaciones en este IDE en particular. Algunas de las publicaciones que he escrito incluyen:<\/p>\n<ul>\n<li><a href=\"https:\/\/tommcfarlin.com\/vs-code-wordpress\/\" target=\"_blank\" rel=\"noopener nofollow\" class=\"external external_icon\">C\u00f3digo de Visual Studio para el desarrollo de 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\">Configuraci\u00f3n de PHP CodeSniffer en 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\">TODO, REVIEWS y FIXME<\/a><\/strong> ,<\/li>\n<li>y as\u00ed.<\/li>\n<\/ul>\n<p>De hecho, tengo todo un trabajo <strong><a href=\"https:\/\/tommcfarlin.com\/tag\/visual-studio-code\/\" target=\"_blank\" rel=\"noopener nofollow\" class=\"external external_icon\">atrasado<\/a><\/strong> que puedes revisar. El problema: est\u00e1 un poco anticuado. Al usar PhpStorm, Visual Studio Code (o Code, para abreviar) ha realizado mejoras significativas desde la \u00faltima vez que lo us\u00e9.<\/p>\n<p>Dicho esto, parte de este material puede sonar redundante, pero finalmente nos pondr\u00e1 a todos en la misma p\u00e1gina.<\/p>\n<h3>c\u00f3digo de estudio visual<\/h3>\n<p>Antes de comenzar, vale la pena hacer referencia a dos cosas:<\/p>\n<ul>\n<li>\u00bfPor qu\u00e9 c\u00f3digo de Visual Studio?<\/li>\n<li>Primeros pasos con el c\u00f3digo de Visual Studio<\/li>\n<\/ul>\n<p>Este \u00faltimo es un tema un poco grande porque incluye una serie de cosas para instalar, configurar y configurar, por lo que cubrir\u00e9 eso a partir de esta publicaci\u00f3n y las nuevas, pero al menos vale la pena hablar de por qu\u00e9 Visual Studio Code es un IDE s\u00f3lido para el desarrollo de WordPress.<\/p>\n<h3>1 \u00bfPor qu\u00e9 c\u00f3digo de Visual Studio?<\/h3>\n<p>Adem\u00e1s de ser compatible con todos los principales sistemas operativos, una de las primeras cosas a tener en cuenta sobre Code es que guarda una copia de su configuraci\u00f3n en su propio archivo para que siempre pueda volver a consultarlo, pero puede personalizarlo seg\u00fan su propia configuraci\u00f3n. .<\/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=\"Un IDE para el desarrollo de WordPress (independientemente de la experiencia)\"><\/a><\/p>\n<p>Adem\u00e1s, todo se mantiene dentro de un archivo JSON que le permite personalizarlo para que se ajuste al entorno en el que est\u00e1 trabajando. Quiz\u00e1s sea PHP, quiz\u00e1s sea JavaScript, o quiz\u00e1s sea algo completamente diferente.<\/p>\n<p>Adem\u00e1s de eso, mantener la configuraci\u00f3n port\u00e1til facilita el intercambio entre sus computadoras. Esto significa que puede colocar el archivo, por ejemplo, en una carpeta de Dropbox y hacer referencia a su configuraci\u00f3n a trav\u00e9s de todas sus 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=\"Un IDE para el desarrollo de WordPress (independientemente de la experiencia)\"><\/a><\/p>\n<p>Esto es \u00fatil, por supuesto, si solo tiene varias m\u00e1quinas. Y si lo hace, es posible que desee sincronizar los entornos de desarrollo para que sea f\u00e1cil moverse entre ellos.<\/p>\n<h3>2 Primeros pasos con el c\u00f3digo de Visual Studio<\/h3>\n<p>Comenzar con el IDE es simple. Es realmente una cuesti\u00f3n de:<\/p>\n<ol>\n<li>Navegando a <strong><a href=\"https:\/\/code.visualstudio.com\/\" target=\"_blank\" rel=\"noopener nofollow\" class=\"external external_icon\">la p\u00e1gina de inicio del software,<\/a><\/strong><\/li>\n<li>Descargando la versi\u00f3n apropiada para su sistema operativo,<\/li>\n<li>Luego instalarlo.<\/li>\n<\/ol>\n<p>Pero simplemente instalarlo no es suficiente, \u00bfverdad?<\/p>\n<p>Quiero decir, todav\u00eda tenemos que hablar sobre agregar espacios de trabajo para cada uno de nuestros proyectos, configurar ajustes e instalar extensiones que nos ayudar\u00e1n a ser m\u00e1s productivos en el trabajo que hacemos.<\/p>\n<p>A lo largo de las pr\u00f3ximas publicaciones, haremos exactamente eso. Despu\u00e9s de todo, si estas publicaciones se alargan demasiado, en realidad no har\u00e1s nada durante el resto del d\u00eda \ud83d\ude42.<\/p>\n<h3>\u00bfQu\u00e9 pasa con las extensiones?<\/h3>\n<p>Recuerde, sin embargo, dado que estamos trabajando principalmente con WordPress y el software relacionado en esta serie y en el pr\u00f3ximo art\u00edculo, entonces debemos asegurarnos de tener algunas cosas instaladas para manejar correctamente lo que vamos a hacer.<\/p>\n<p>Esto incluye cosas como soporte 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> _ Una de las cosas buenas de usar un IDE inteligente es que puede ofrecer finalizaci\u00f3n de c\u00f3digo. La mayor\u00eda de los IDE suelen ofrecer el uso de un lenguaje como PHP. Este complemento agrega soporte para WordPress.<\/li>\n<li><a href=\"https:\/\/marketplace.visualstudio.com\/items?itemName=ikappas.phpcs\" target=\"_blank\" rel=\"noopener nofollow\" class=\"external external_icon\">Est\u00e1ndares de codificaci\u00f3n PSR2<\/a>. Aunque una vez fui fan\u00e1tico de los Est\u00e1ndares de codificaci\u00f3n de WordPress, desde entonces me cambi\u00e9 a los <strong><a href=\"https:\/\/www.php-fig.org\/psr\/psr-2\/\" target=\"_blank\" rel=\"noopener nofollow\" class=\"external external_icon\">Est\u00e1ndares de codificaci\u00f3n de PSR<\/a><\/strong> (por una variedad de razones).<\/li>\n<li><a href=\"https:\/\/marketplace.visualstudio.com\/items?itemName=felixfbecker.php-debug\" target=\"_blank\" rel=\"noopener nofollow\" class=\"external external_icon\">Depuraci\u00f3n<\/a>. El uso <strong><a href=\"https:\/\/xdebug.org\/\" target=\"_blank\" rel=\"noopener nofollow\" class=\"external external_icon\">de Xdebug<\/a><\/strong> es esencial si est\u00e1 buscando aprobar el uso de declaraciones <strong>echo<\/strong> y <strong>var_dump<\/strong> en su c\u00f3digo. Adem\u00e1s, ayuda a profundizar en el c\u00f3digo fuente de WordPress cuando se analizan posibles 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\">Gesti\u00f3n de TODO<\/a>. La mayor\u00eda de las veces, al escribir c\u00f3digo, habr\u00e1 lugares a los que tendr\u00e1 que regresar y revisar, corregir o simplemente hacer antes de lanzar algo para la puesta en escena o la producci\u00f3n. El uso de una herramienta como esta lo ayudar\u00e1 a encontrarlos f\u00e1cilmente antes de enviar el c\u00f3digo al control de c\u00f3digo fuente o implementarlo.<\/li>\n<li>Y m\u00e1s.<\/li>\n<\/ul>\n<p>Obviamente, los elementos vinculados anteriormente lo llevan a la p\u00e1gina de inicio de cada uno de los complementos, pero es posible, y probablemente mejor, instalarlos desde el editor para que pueda administrarlos m\u00e1s f\u00e1cilmente.<\/p>\n<p>Recuerde, el prop\u00f3sito de la publicaci\u00f3n anterior era tener una forma de administrar f\u00e1cilmente todo el software que estamos instalando. Y la instalaci\u00f3n de las extensiones a trav\u00e9s del IDE brinda exactamente la misma experiencia para el IDE.<\/p>\n<p>Finalmente, estas son las extensiones que he encontrado \u00fatiles cuando se trabaja con WordPress.<\/p>\n<h2>Hasta la pr\u00f3xima<\/h2>\n<p>Aunque proporcion\u00e9 informaci\u00f3n resumida de muchas de las cosas anteriores, no se profundiza en algunas de ellas o qu\u00e9 esperar al usarlas.<\/p>\n<p>Adem\u00e1s, no habla de las tabulaciones versus espacios habituales, las fuentes que creo que vale la pena usar, Sass linting, JavaScript style and linting, etc.<\/p>\n<p>Hasta entonces, trabaje para instalar Visual Studio Code y configurarlo con las extensiones vinculadas anteriormente. Es f\u00e1cil hacerlo desde el IDE. Y si tienes alguna pregunta, no dudes en dejarla en los comentarios.<\/p>\n<p><div id=\"PostUnique_PostSource\" style=\"padding-top: 50px\">Fuente de grabaci\u00f3n:  <a target=\"_blank\" rel=\"noopener nofollow\" href=\"\/\/tommcfarlin.com\" class=\"external external_icon\">tommcfarlin.com<\/a><\/div><\/p>\n","protected":false},"excerpt":{"rendered":"<p>Un IDE gratuito para el desarrollo de WordPress que es extensible, potente y se mejora continuamente que nos sirve bien.<\/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":[831,840,1063,861],"tags":[1172],"class_list":["post-229957","post","type-post","status-publish","format-standard","has-post-thumbnail","hentry","category-guia-para-principiantes","category-tutoriales","category-un-ordenador","category-wordpress-2","tag-affiai-es"],"_links":{"self":[{"href":"https:\/\/wordpress.mediadoma.com\/es\/wp-json\/wp\/v2\/posts\/229957","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/wordpress.mediadoma.com\/es\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/wordpress.mediadoma.com\/es\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/wordpress.mediadoma.com\/es\/wp-json\/wp\/v2\/users\/1"}],"replies":[{"embeddable":true,"href":"https:\/\/wordpress.mediadoma.com\/es\/wp-json\/wp\/v2\/comments?post=229957"}],"version-history":[{"count":0,"href":"https:\/\/wordpress.mediadoma.com\/es\/wp-json\/wp\/v2\/posts\/229957\/revisions"}],"wp:featuredmedia":[{"embeddable":true,"href":"https:\/\/wordpress.mediadoma.com\/es\/wp-json\/wp\/v2\/media\/164597"}],"wp:attachment":[{"href":"https:\/\/wordpress.mediadoma.com\/es\/wp-json\/wp\/v2\/media?parent=229957"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/wordpress.mediadoma.com\/es\/wp-json\/wp\/v2\/categories?post=229957"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/wordpress.mediadoma.com\/es\/wp-json\/wp\/v2\/tags?post=229957"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}