User Documentation
Descargar
Launch

Extras de Visual Studio Code

Introducción

Visual Studio Code es un editor de código fuente desarrollado por Microsoft para Windows, Linux y macOS (incluyendo Mac M1). Incluye soporte para depuración, control de Git integrado y GitHub, resaltado de sintaxis, autocompletado inteligente de código, fragmentos de código y refactorización de código.

La característica principal del editor es que es extensible y cuenta con una enorme colección de extensiones mantenidas por los usuarios y por el propio Microsoft.

Como introducción general, esta es una presentación sobre el tema Joomla Development with Visual Studio Code (PDF, 1Mb), por René Kreijveld, desarrollador de Joomla, Destiny B.V. Joomla User Group London, 16 de marzo de 2021.

En esta página, detallamos una lista de extensiones recomendadas para configurar VSCode y así dar soporte a PHP y Joomla.

Esta es una lista de extensiones para dar soporte a PHP en VSCode:

El protocolo Git es compatible de forma nativa con VSCode. Sin embargo, existen extensiones para mejorar la gestión del código y de los repositorios. Esta es una lista de extensiones destacadas para esta tarea:

Esta es una lista de extensiones para dar soporte a Joomla en VSCode:

Esta es una lista de extensiones para dar soporte al desarrollo remoto por SSH:

  • Remote - SSH ms-vscode-remote.remote-ssh: La extensión Remote - SSH le permite usar cualquier máquina remota con un servidor SSH como su entorno de desarrollo. Esto puede simplificar enormemente el desarrollo y la resolución de problemas en una amplia variedad de situaciones. Para más información: Desarrollo remoto a través de SSH
  • Live Share MS-vsliveshare.vsliveshare: Visual Studio Live Share le permite editar y depurar de forma colaborativa con otras personas en tiempo real, sin importar los lenguajes de programación que esté usando o el tipo de aplicaciones que esté creando. Le permite compartir al instante (y de forma segura) su proyecto actual, y luego, según sea necesario, compartir sesiones de depuración, instancias de terminal, aplicaciones web en localhost, llamadas de voz, ¡y mucho más!

Esta es una lista de extensiones útiles altamente recomendadas para facilitar el desarrollo:

  • EditorConfig for VS Code editorconfig.editorconfig Soporte de EditorConfig para Visual Studio Code
  • change-case wmaurer.change-case: Cambia rápidamente el formato (camelCase, CONSTANT_CASE, snake_case, etc) de la selección actual o de la palabra actual
  • Project Manager alefragnani.project-manager: Le ayuda a acceder fácilmente a sus proyectos, sin importar dónde se encuentren. No vuelva a perder de vista esos proyectos importantes.

Configuración de PHP Debug

La extensión soporta las configuraciones más comunes de PHP XDebug. Integra completamente todas las características de VSCode para depurar scripts PHP.

Para configurar la extensión, visite la documentación oficial

Como configuración de ejemplo para la depuración en VSCode, este es un launch.json común:

{
    // Use IntelliSense to learn about possible attributes.
    // Hover to view descriptions of existing attributes.
    // For more information, visit: https://go.microsoft.com/fwlink/?linkid=830387
    "version": "0.2.0",
    "configurations": [

        {
            "name": "Listen for XDebug",
            "type": "php",
            "request": "launch",

            // Server Remote XDebug Port - 9000 is the default XDebug port
            "port": 9000,

            // Server Remote Path -> Local Project Path
            "pathMappings": {
                "/app/www": "${workspaceRoot}/www"
            }
        },
        {
            "name": "Launch currently open script",
            "type": "php",
            "request": "launch",
            "program": "${file}",
            "cwd": "${fileDirname}",

            // Local XDebug Port - 9000 is the default XDebug port
            "port": 9000
        }
    ]
}

En relación con la configuración de launch.json que requiere felixfbecker/vscode-php-debug, está la configuración del propio PHP XDebug.

En este momento, su entorno de desarrollo podría tener xdebug-2 o xdebug-3. Difieren en los parámetros requeridos. Para configurar PHP XDebug, estos son los ajustes más comunes para php.ini.

Configuración de XDebug 2

[XDebug]
;;;;;;;;;;;;;;;;;;;
; xdebug-2.9.8
;;;;;;;;;;;;;;;;;;;
xdebug.remote_enable = 1
xdebug.remote_autostart = 1
; xdebug.remote_port = 9000

Configuración de XDebug 3

[XDebug]
;;;;;;;;;;;;;;;;;;;
; xdebug-3.0.0
; https://xdebug.org/docs/upgrade_guide
;;;;;;;;;;;;;;;;;;;
xdebug.mode = debug
xdebug.start_with_request = yes
xdebug.discover_client_host = true
; xdebug.client_port = 9000

Para saber más sobre cómo funciona XDebug internamente para conectarse al Editor, consulte la [documentación](Xdebug 3 — Documentation).

Configuración de phpcs

Para configurar la extensión, visite la documentación oficial. La extensión soporta las configuraciones más comunes de PHP_CodeSniffer.

Por defecto, PHP_CodeSniffer viene con varios estándares de codificación. Una vez instalada la extensión, funciona con PSR2.

    "phpcs.standard": "PSR2",

Para configurar la extensión y aplicar los Estándares de codificación de Joomla!, instale las reglas siguiendo la guía oficial. Una vez instalados los Estándares de codificación de Joomla!, configure las opciones de usuario siguiendo esta configuración de ejemplo:

    "phpcs.standard": "/home/YOUR-USER/.../Joomla",

Configuración de PHP Intelephense

Para configurar la extensión, visite la documentación de intelephense. La extensión no requiere configuración adicional.

VSCode viene con soporte básico para el lenguaje PHP. Por lo tanto, probablemente sea una buena idea deshabilitar el soporte predeterminado para evitar conflictos:

    // Disable basic suggestions
    "php.suggest.basic": false,

    // To activate code suggestions in comments
    "editor.quickSuggestions": { "comments": true },

Como alternativa, también existe una extensión muy popular: PHP IntelliSense felixfbecker.php-intellisense, que ofrece autocompletado avanzado y soporte de refactorización para PHP.

Configuración de PHPUnit

Para configurar la extensión, visite la documentación de vscode phpunit

La extensión integra PHP Unit con VSCode, de modo que todas las características de PHP Unit están integradas con VSCode y también se pueden parametrizar para una mayor integración con la interfaz de usuario.

Este es un ejemplo de configuración de la extensión:

    "phpunit.preferRunClassTestOverQuickPickWindow": true,
    "phpunit.driverPriority": [
        "Path",
        "Command",
        "Composer",
        "Phar",
        "Ssh",
        "GlobalPhpUnit"
    ],

Configuración de php cs fixer (Solo para PSR2)

Para configurar la extensión, visite la documentación de vscode php cs fixer. La extensión integra PHP-CS-Fixer con VSCode, de modo que todas las características de PHP-CS-Fixer están integradas con VSCode y también se pueden parametrizar para una mayor integración con la interfaz de usuario.

Para aplicar automáticamente PHP-CS-Fixer a los archivos PHP, configure las opciones de usuario de esta manera:

    "[php]": {
        "editor.defaultFormatter": "junstyle.php-cs-fixer",
    },
    "php-cs-fixer.onsave": true,

Configuración de PHP Phan (Analyzer)

Para configurar la extensión, visite la documentación oficial. Este es un ejemplo de configuración de la extensión:

    "phan.phpExecutablePath": "/usr/bin/php",
    "phan.analyzedFileExtensions": [
        "php"
    ],

Configuración de phpmd

Para configurar la extensión, visite la documentación oficial. La extensión no requiere configuración adicional.

Este es un ejemplo de configuración de la extensión:

    "phpmd.command": "php /home/YOUR-USER/.../phpmd/phpmd.phar",
    "phpmd.rules": "/home/YOUR-USER/.../phpmd-rulesets/phpmd_config.xml",

Configurar EditorConfig for VS Code

EditorConfig es un formato de archivo y una colección de plugins para editores de texto que permite mantener estilos de codificación consistentes entre diferentes editores e IDEs.

Para configurar el editor según sus preferencias, cree un archivo .editorconfig:

; EditorConfig helps developers define and maintain consistent
; coding styles between different editors and IDEs.

; For more visit http://editorconfig.org.
root = true

; Choose between lf or rf on "end_of_line" property
[*]
charset = utf-8
end_of_line = lf
indent_size = 2
indent_style = space
insert_final_newline = true
trim_trailing_whitespace = true

# editorconfig-tools is unable to ignore longs strings or urls
max_line_length = null

[*.html]
indent_style = tab

# PSR-2
# [*.php]
# indent_size = 4
# indent_style = space

# Joomla! Coding Standards
[*.php]
indent_size = 4
indent_style = tab

[*.md]
trim_trailing_whitespace = false

[*.yml]
indent_style = space
indent_size = 2