User Documentation
Download
Avvia

Visual Studio Code Extras

Introduzione

Visual Studio Code è un editor di codice sorgente sviluppato da Microsoft per Windows, Linux e macOS (inclusi i Mac con chip M1). Include supporto per il debug, controllo Git integrato e GitHub, evidenziazione della sintassi, completamento intelligente del codice, snippet e refactoring del codice.

La caratteristica principale dell'editor è di essere estensibile e dispone di un'enorme collezione di estensioni mantenute dagli utenti e da Microsoft stessa.

Come introduzione generale, questa è una presentazione sull'argomento Joomla Development with Visual Studio Code (PDF, 1Mb), di René Kreijveld, sviluppatore Joomla presso Destiny B.V. Joomla User Group London, 16 marzo 2021.

In questa pagina, descriviamo in dettaglio una lista di estensioni consigliate per configurare VSCode per supportare PHP e Joomla.

Questa è una lista di estensioni per supportare PHP su VSCode:

Il protocollo Git è supportato nativamente su VSCode. Tuttavia, esistono estensioni per migliorare la gestione del codice e dei repository. Questa è una lista di estensioni in evidenza per questa attività:

Questa è una lista di estensioni per supportare Joomla su VSCode:

Questa è una lista di estensioni per supportare lo sviluppo remoto via SSH:

  • Remote - SSH ms-vscode-remote.remote-ssh: L'estensione Remote - SSH ti consente di utilizzare qualsiasi macchina remota con un server SSH come ambiente di sviluppo. Questo può semplificare notevolmente lo sviluppo e la risoluzione dei problemi in un'ampia varietà di situazioni. Per maggiori informazioni: Sviluppo remoto via SSH
  • Live Share MS-vsliveshare.vsliveshare: Visual Studio Live Share ti consente di modificare ed eseguire il debug in modo collaborativo con altri in tempo reale, indipendentemente dai linguaggi di programmazione che stai utilizzando o dai tipi di app che stai creando. Ti permette di condividere istantaneamente (e in modo sicuro) il tuo progetto corrente, e poi, se necessario, condividere sessioni di debug, istanze del terminale, applicazioni web in localhost, chiamate vocali e altro ancora!

Questa è una lista di utili estensioni fortemente consigliate per semplificare lo sviluppo:

  • EditorConfig for VS Code editorconfig.editorconfig Supporto EditorConfig per Visual Studio Code
  • change-case wmaurer.change-case: Cambia rapidamente il formato (camelCase, CONSTANT_CASE, snake_case, ecc.) della selezione corrente o della parola corrente
  • Project Manager alefragnani.project-manager: Ti aiuta ad accedere facilmente ai tuoi progetti, indipendentemente da dove si trovino. Non perdere più di vista quei progetti importanti.

Configurazione PHP Debug

L'estensione supporta le configurazioni più comuni di PHP XDebug. Integra completamente tutte le funzionalità di VSCode per il debug degli script PHP.

Per configurare l'estensione, visita la documentazione ufficiale

Come esempio di configurazione per il debug con VSCode, ecco un comune launch.json:

{
    // 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
        }
    ]
}

In relazione alla configurazione del launch.json richiesta da felixfbecker/vscode-php-debug, c'è la configurazione di PHP XDebug stesso.

Attualmente, il tuo ambiente di sviluppo potrebbe avere xdebug-2 o xdebug-3. Differiscono nei parametri richiesti. Per configurare PHP XDebug, queste sono le impostazioni più comuni per php.ini.

Configurazione XDebug 2

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

Configurazione 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

Per saperne di più su come XDebug funziona internamente per connettersi all'Editor, consulta la [documentazione](Xdebug 3 — Documentation).

Configurazione phpcs

Per configurare l'estensione, visita la documentazione ufficiale. L'estensione supporta le configurazioni più comuni di PHP_CodeSniffer.

Per impostazione predefinita, PHP_CodeSniffer viene fornito con diversi standard di codifica. Una volta installata l'estensione, funziona con PSR2.

    "phpcs.standard": "PSR2",

Per configurare l'estensione in modo da applicare gli standard di codifica di Joomla!, installa le regole seguendo la guida ufficiale. Una volta installati gli standard di codifica di Joomla!, configura le impostazioni utente seguendo questo esempio di configurazione:

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

Configurazione di PHP Intelephense

Per configurare l'estensione, visita la documentazione di intelephense. L'estensione non richiede configurazioni aggiuntive.

VSCode include un supporto di base per il linguaggio PHP. Pertanto, è probabilmente una buona idea disabilitare il supporto predefinito per evitare conflitti:

    // Disabilita i suggerimenti di base
    "php.suggest.basic": false,

    // Per attivare i suggerimenti di codice nei commenti
    "editor.quickSuggestions": { "comments": true },

Come alternativa, è disponibile anche un'estensione molto popolare: PHP IntelliSense felixfbecker.php-intellisense con supporto avanzato per l'autocompletamento e il refactoring per PHP.

Configurazione PHPUnit

Per configurare l'estensione, visita la documentazione di vscode phpunit

L'estensione integra PHP Unit con VSCode, in modo che tutte le funzionalità di PHP Unit siano integrate con VSCode e possano anche essere parametrizzate per un'ulteriore integrazione con l'interfaccia utente.

Questo è un esempio di configurazione dell'estensione:

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

Configurazione php cs fixer (solo per PSR2)

Per configurare l'estensione, visita la documentazione di vscode php cs fixer. L'estensione integra PHP-CS-Fixer con VSCode, in modo che tutte le funzionalità di PHP-CS-Fixer siano integrate con VSCode e possano anche essere parametrizzate per un'ulteriore integrazione con l'interfaccia utente.

Per applicare automaticamente PHP-CS-Fixer ai file PHP, configura le impostazioni utente in questo modo:

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

Configurazione PHP Phan (Analyzer)

Per configurare l'estensione, visita la documentazione ufficiale. Questo è un esempio di configurazione dell'estensione:

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

Configurazione phpmd

Per configurare l'estensione, visita la documentazione ufficiale. L'estensione non richiede configurazioni aggiuntive.

Questo è un esempio di configurazione dell'estensione:

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

Configurare EditorConfig per VS Code

EditorConfig è un formato di file e una raccolta di plugin per editor di testo per mantenere stili di codifica coerenti tra diversi editor e IDE.

Per configurare l'editor secondo le tue preferenze, crea un file .editorconfig:

; EditorConfig aiuta gli sviluppatori a definire e mantenere
; stili di codifica coerenti tra diversi editor e IDE.

; Per maggiori informazioni visita http://editorconfig.org.
root = true

; Scegli tra lf o rf nella proprietà "end_of_line"
[*]
charset = utf-8
end_of_line = lf
indent_size = 2
indent_style = space
insert_final_newline = true
trim_trailing_whitespace = true

# editorconfig-tools non è in grado di ignorare stringhe lunghe o url
max_line_length = null

[*.html]
indent_style = tab

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

# standard di codifica di Joomla!
[*.php]
indent_size = 4
indent_style = tab

[*.md]
trim_trailing_whitespace = false

[*.yml]
indent_style = space
indent_size = 2