User Documentation VS Code - Un IDE gratuito muy popular
De Wikipedia:
Visual Studio Code, también conocido comúnmente como VS Code, es un editor de código fuente creado por Microsoft para Windows, Linux y macOS. Entre sus características se incluyen el soporte para depuración, el resaltado de sintaxis, el completado inteligente de código, los fragmentos de código, la refactorización de código y Git integrado. Los usuarios pueden cambiar el tema, los atajos de teclado, las preferencias e instalar extensiones que añaden funcionalidades adicionales.
Instalación
La página predeterminada del sitio de VS Code tiene una lista desplegable para cada plataforma soportada. Es probable que su plataforma ya esté preseleccionada. Así que descargue e instale y estará listo para empezar.
Primeros pasos
La página Get Started de VS Code tiene algunos elementos de Start, una lista de elementos Recent, y una breve lista de Walkthroughs. Si es completamente nuevo en VS Code, se recomienda verlos. Solo toman unos minutos.
La documentación de VS Code está disponible desde el menú Help / Documentation. Vale la pena ver los Vídeos introductorios. Cada uno dura de 2 a 6 minutos y ofrece una excelente introducción a las características de VS Code.
La documentación oficial es el lugar al que acudir si desea consultar información específica.
Extensiones de VS Code
VS Code puede utilizarse para cualquier tipo de texto, incluyendo una amplia gama de lenguajes de programación. Funciona con JavaScript sin necesidad de añadir extensiones. Otros lenguajes se detectan por contexto, así que si empieza a crear y guardar código PHP, es probable que se le pida instalar un paquete de soporte para PHP.
Haga clic en el icono de Extensions en la Activity Bar izquierda para ver lo que tiene instalado y lo que se recomienda. ¡Necesitará la extensión PHP Debug!
La disposición de la pantalla de VS Code
Algunos términos utilizados en las instrucciones siguientes:
- Activity Bar la barra estrecha a la izquierda de la pantalla. Seleccione cualquier icono para abrir o cerrar la barra lateral principal.
- Primary Side Bar cuando está abierta, muestra los detalles de la actividad seleccionada.
- Status Bar en la parte inferior de la pantalla. Muestra lo que está ocurriendo.
- Panel un área debajo de los editores de texto para mostrar otra información.
Seleccione un icono de disposición en la parte superior derecha para abrir o cerrar cualquiera de estos elementos.
Programar una extensión de Joomla
Para crear una extensión, su objetivo es generar un archivo zip que pueda instalar en un sitio Joomla en funcionamiento. Por lo tanto, necesita una carpeta para contener su código. Esta debe estar dentro de su espacio personal de archivos en el portátil o equipo de escritorio utilizado para el desarrollo local. No debe estar en el árbol de su sitio web. Por ejemplo, podría usar ~/jextensions para contener subcarpetas para diferentes extensiones. Yo uso ~/git porque es corto y fácil de escribir, aunque puede resultar confuso porque cada subcarpeta utiliza un repositorio git independiente.
Código de ejemplo
Si desea algo de código de ejemplo para trabajar, hay una extensión disponible en GitHub llamada mod_debugme. Como su nombre indica, es un módulo con algunos errores. Además del código del módulo, hay un archivo build.xml que ilustra una forma de automatizar la compilación para pruebas y la creación de un archivo zip.
El módulo está diseñado para mostrar los próximos eventos (cumpleaños, 3 por defecto) de una lista almacenada en una tabla de base de datos. Puede imaginarse esto utilizado en una oficina o en un sitio familiar con la expectativa de tarta.
Puede que sea mejor empezar utilizando comandos de git desde la línea de comandos. Primero cree una carpeta para su código y luego clone el repositorio remoto:
mkdir ~/git
cd ~/git
git clone https://github.com/ceford/j4xdemos-mod-debugme
La respuesta debería tardar solo unos segundos:
Cloning into 'j4xdemos-mod-debugme'...
remote: Enumerating objects: 23, done.
remote: Counting objects: 100% (23/23), done.
remote: Compressing objects: 100% (16/16), done.
remote: Total 23 (delta 3), reused 23 (delta 3), pack-reused 0
Unpacking objects: 100% (23/23), done.
Debería tomarse un momento para mirar el contenido del directorio:
cd j4xdemos-mod-debugme
ls -al
total 16
drwxr-xr-x 6 ceford staff 192 2 Sep 17:48 .
drwxr-xr-x 3 ceford staff 96 2 Sep 17:48 ..
drwxr-xr-x 12 ceford staff 384 2 Sep 17:48 .git
-rw-r--r-- 1 ceford staff 1402 2 Sep 17:48 README.md
-rw-r--r-- 1 ceford staff 927 2 Sep 17:48 build.xml
drwxr-xr-x 8 ceford staff 256 2 Sep 17:48 mod_debugme
El directorio .git contiene información sobre el repositorio. El archivo README.md es un documento markdown que describe este repositorio. El archivo build.xml es un archivo utilizado para compilar la extensión con una herramienta externa, Phing, descrita más adelante. El directorio mod_debugme contiene el código de la extensión.
Instalar en Joomla
Comprima el directorio de la extensión para crear un archivo zip instalable:
zip -r mod_debugme.zip mod_debugme
Ahora puede instalar el archivo zip en el sitio de Joomla que utiliza para realizar pruebas. Después de la instalación necesita crear un módulo de sitio y asignarlo a una posición de módulo. Como es un módulo defectuoso, podría asignarlo a una posición en Todas las páginas mientras trabaja en él; o podría asignarlo a una posición en una sola página; o podría colocarlo en un artículo que tenga su propio elemento del menú.
Después de la instalación, borre el archivo zip.
Activar el modo de depuración
En la Configuración global de Joomla, establezca Depurador del sistema en Sí y Informe de errores en Máximo.
Cuando abra una página que contenga el módulo defectuoso, verá un rastro de pila que le indicará dónde se desencadenó un error.
A veces el error de codificación está en la primera línea del rastro de pila. De lo contrario, si el error se desencadena en el código de una librería, por ejemplo al pasar datos inválidos a una función de base de datos, el error de codificación puede estar más abajo en la lista de llamadas a funciones.
Abrir el directorio de la extensión en VS Code
En VS Code, utilice el elemento del menú Archivo / Abrir carpeta para localizar y abrir el directorio que contiene su copia local del código de la extensión mod_debugme. Debería ver algo similar a lo siguiente:
Puede que sea capaz de diagnosticar el problema simplemente leyendo el código. En el caso del error Class "DebugHelper" not found verá que una instrucción use ha sido comentada unas líneas antes. ¡Olvidar insertar una instrucción use es un error común durante el desarrollo inicial!
Solucione ese problema y luego comprima e instale el módulo de nuevo. Ese paso se vuelve algo tedioso cuando tiene múltiples problemas. Es ahí donde las herramientas de compilación resultan útiles.
Phing
Phing es una herramienta de línea de comandos, disponible para todas las plataformas, utilizada para compilar paquetes de software usando instrucciones almacenadas en un archivo xml, llamado build.xml de forma predeterminada. Para trabajar con código de extensiones se puede usar para hacer dos cosas:
- copiar archivos modificados desde la carpeta fuente de su extensión a los lugares correctos en la carpeta de su sitio web.
- generar un nuevo archivo zip para nuevas instalaciones.
Descargue e instale Phing. ¡Hay otras herramientas de compilación disponibles! Podría instalar Phing en su propia carpeta bin o en una carpeta bin del sistema. Necesita anotar la ruta a su código de Phing. En este ejemplo es ~/bin/phing-latest.phar. Puede probarlo desde la línea de comandos después de cambiar a la carpeta que contiene el código de su extensión:
cd ~/git/j4xdemos-mod-debugme
php ~/bin/phing-latest.phar
Respuesta:
Buildfile: /Users/ceford/git/j4xdemos-mod-debugme/build.xml
mod_debugme > main:
... Any copied files will be mentioned here
[zip] Building zip: /Users/ceford/zips/mod_debugme.zip
BUILD FINISHED
Total time: 0.0863 seconds
Tareas de VS Code
Para ejecutar Phing desde dentro de VS Code necesita crear un archivo tasks.json en la carpeta .vscode en la raíz de la carpeta j4xdemos-mod-debugme. Si esta última no existe, primero créela. Luego cree el archivo tasks.json y escriba el siguiente código:
{
// See https://go.microsoft.com/fwlink/?LinkId=733558
// for the documentation about the tasks.json format
"version": "2.0.0",
"tasks": [
{
"label": "Build mod_debugme",
"type": "shell",
"command": "php ~/bin/phing-latest.phar",
"windows": {
"command": "php ~/bin/phing-latest.phar"
},
"group": "build",
"presentation": {
"reveal": "always",
"panel": "shared"
}
}
]
}
Los usuarios de Windows necesitan corregir el comando específico de Windows. Ahora puede compilar la extensión usando el menú Terminal / Run Build Task. El resultado del comando debería aparecer en el Panel de Terminal debajo del área de edición.
* Executing task: php ~/bin/phing-latest.phar
Buildfile: /Users/ceford/git/gitdemo/j4xdemos-mod-debugme/build.xml
mod_debugme > main:
[zip] Nothing to do: /Users/ceford/zips/mod_debugme.zip is up to date.
BUILD FINISHED
Total time: 0.1031 seconds
* Terminal will be reused by tasks, press any key to close it.
Puede haber mensajes de error incomprensibles. La causa más probable es tener rutas inválidas a carpetas en el archivo build.xml o que una carpeta no haya sido creada. ¡Solo otro tipo de problema que depurar!
Depuración
Debería poder corregir el primer error mediante la inspección del código. Problemas más complicados requieren recorrer el código con el depurador. Eso le permite inspeccionar variables para ver si contienen los valores que espera, por ejemplo al pasar argumentos a funciones de biblioteca.
php.ini: configuración
Para configurar la depuración con Xdebug necesita añadir algunas entradas al principio de su archivo php.ini.
zend_extension="xdebug.so"
xdebug.mode="debug"
xdebug.client_port=9003
xdebug.start_with_request = yes
Después de guardar los cambios, reinicie su servidor Apache.
Ventana para agregar sitio web
Su carpeta de la extensión contiene solo unos pocos archivos, las fuentes de los archivos instalados en su sitio web. La depuración en tiempo de ejecución implica establecer puntos de interrupción en los archivos de su sitio, por lo que necesita acceso a esos archivos. Podría usar el menú Archivo / Agregar carpeta al espacio de trabajo... para añadir la carpeta del sitio a su espacio de trabajo. Sin embargo, hay muchas posibilidades de que termine haciendo cambios en los archivos del sitio en lugar de en los archivos fuente. Por lo tanto, probablemente sea mejor abrir una ventana separada de VS Code para la depuración.
- Abrir una ventana nueva: Desde el menú de VS Code, seleccione Archivo / Nueva ventana y seleccione la carpeta que contiene su sitio web Joomla.
- Abrir carpeta: En la ventana recién abierta, seleccione Archivo / Abrir carpeta... desde el menú de VS Code. Busque la carpeta de su sitio web y selecciónela. Debería ver una lista de todos los archivos de su sitio web Joomla en la barra lateral principal.
Configuración de lanzamiento
Para que la depuración funcione realmente en VS Code necesita una configuración de lanzamiento. En la raíz de su sitio web cree una carpeta llamada .vscode (observe el punto inicial) que contenga un archivo llamado launch.json con el siguiente contenido:
{
"configurations": [
{
"name": "Listen for XDebug",
"type": "php",
"request": "launch",
"hostname": "0.0.0.0",
"port": 9003,
"stopOnEntry": true,
"pathMappings": {
"/Users/ceford/Sites/j421rc2": "${workspaceFolder}"
}
}
]
}
Recuerde reemplazar el elemento pathMappings de este ejemplo por el pathMappings real de su propio sitio. El elemento stopOnEntry pausará la ejecución en la primerísima línea de código PHP ejecutado.
Depurar mod_debugme
Ahora está listo para encontrar y corregir los errores en el módulo instalado.
- Encontrar el código del módulo: Encuentre el primer error en la línea 16 de JROOT/modules/mod_debugme/mod_debugme.php.
- Establecer un punto de interrupción: Haga clic en el espacio a la izquierda del número 16. Aparecerá una mancha rojo pálido al pasar el cursor por encima y se volverá rojo completo después de hacer clic, para indicar que se ha establecido un punto de interrupción.
- Iniciar depuración: Desde el menú de VS Code seleccione Ejecutar / Iniciar depuración. En su navegador, recargue su sitio. Su ventana de VS Code debería reaparecer con el código detenido en la primera línea del archivo index.php del sitio. En la parte superior de la pantalla hay algunos iconos para controlar el proceso de depuración. Deberían ser auto explicativos. Si no, búsquelos en la Ayuda / Documentación de VS Code.
- Continuar: Seleccione el botón continuar; el código continuará ejecutándose hasta su primer punto de interrupción. Examine el código para ver cuál es el problema.
- Pasar el cursor: Si pasa el cursor sobre una variable a la que se le ha asignado un valor, aparecerá un pequeño Tooltip que resume los atributos de esa variable. No hay Tooltip para las variables a las que no se les ha asignado ningún valor.
- Variables: La columna izquierda contiene más información sobre el estado del código en el punto de interrupción. Hay demasiadas para cubrir aquí. ¡Explórelas según sea necesario!
- Detener la depuración: Probablemente sea mejor seleccionar el icono Continuar, de lo contrario la página web se entrega en blanco. También podría usar el botón Detener o el menú Ejecutar / Detener depuración.
Corregir un error
Recuerde: ¡No corrija el error en el código del sitio web! ¡Corríjalo en el código fuente!
Corrija el código fuente y luego use Terminal / Run Build Task....
Reinicie la depuración.
Consejos
Algunos problemas no tan obvios:
- Corrige el primer error pero sigue fallando en esa línea. Mire en mod_debugme.xml para ver dónde se define el src de las clases con espacio de nombres. Cuando se corrige en el código fuente, necesita reinstalar el archivo zip o borrar administrator/cache/autoload_psr4.php. Cuando está ausente, Joomla reconstruye ese archivo a partir de los archivos de manifiesto. Pero si tiene una entrada incorrecta o faltante, no se corrige hasta que se reinstale la extensión.
- A veces es necesario establecer un punto de interrupción unas líneas antes de la línea donde ocurre el error, especialmente si desea comprobar los valores pasados a las llamadas de función.
- La tabla xxx.yyy\debugme no existe. Ah sí, el código para crear una tabla en la instalación y eliminarla en la desinstalación nunca se creó. Necesitará ejecutar una consulta sql en phpMyAdmin usando el contenido del archivo mod\debugme.sql. Recuerde cambiar #\ en los nombres de las tablas por el prefijo de su base de datos. Y cuando aún así falle, compruebe el nombre de la tabla en el código.
Captura de pantalla
Cuando todo esté corregido, esto es lo que podría ver:
¿Días de pastel?
Referencias
De la documentación de Joomla!: Visual Studio Code también cubre la configuración de otras herramientas, por ejemplo CodeSniffer y PHPUnit.