Introdução

Visual Studio Code é um editor de código-fonte desenvolvido pela Microsoft para Windows, Linux e macOS (incluindo Macs M1). Inclui suporte para depuração, controlo Git incorporado e GitHub, realce de sintaxe, conclusão inteligente de código, excertos de código (snippets) e refatoração de código.

A principal característica do editor é que é extensível e possui uma enorme coleção de extensões mantidas por utilizadores e pela própria Microsoft.

Como introdução geral, esta é uma apresentação sobre o tema Joomla Development with Visual Studio Code (PDF, 1Mb), de René Kreijveld, programador Joomla na Destiny B.V. Joomla User Group London, 16 de março de 2021.

Nesta página, detalhamos uma lista de extensões recomendadas para configurar o VSCode de modo a suportar PHP e Joomla.

Esta é uma lista de extensões para suportar PHP no VSCode:

O protocolo Git é suportado nativamente no VSCode. No entanto, existem extensões para melhorar a gestão de código e repositórios. Esta é uma lista de extensões em destaque para esta tarefa:

Esta é uma lista de extensões para dar suporte ao Joomla no VSCode:

Esta é uma lista de extensões para dar suporte ao desenvolvimento remoto SSH:

  • Remote - SSH ms-vscode-remote.remote-ssh: A extensão Remote - SSH permite-lhe utilizar qualquer máquina remota com um servidor SSH como o seu ambiente de desenvolvimento. Isto pode simplificar muito o desenvolvimento e a resolução de problemas numa grande variedade de situações. Para mais informações: Desenvolvimento remoto através de SSH
  • Live Share MS-vsliveshare.vsliveshare: O Visual Studio Live Share permite-lhe editar e depurar colaborativamente com outras pessoas em tempo real, independentemente das linguagens de programação que estiver a utilizar ou dos tipos de aplicações que estiver a criar. Permite-lhe partilhar instantaneamente (e de forma segura) o seu projeto atual e, conforme necessário, partilhar sessões de depuração, instâncias de terminal, aplicações web em localhost, chamadas de voz, entre outros!

Esta é uma lista de extensões úteis altamente recomendadas para facilitar o desenvolvimento:

  • EditorConfig for VS Code editorconfig.editorconfig Suporte EditorConfig para o Visual Studio Code
  • change-case wmaurer.change-case: Altere rapidamente a capitalização (camelCase, CONSTANT_CASE, snake_case, etc.) da seleção atual ou da palavra atual
  • Project Manager alefragnani.project-manager: Ajuda-o a aceder facilmente aos seus projetos, independentemente de onde estejam localizados. Não perca mais esses projetos importantes.

Configuração do PHP Debug

A extensão suporta as configurações mais comuns do PHP XDebug. Integra totalmente todas as funcionalidades do VSCode para depurar scripts PHP.

Para configurar a extensão, visite a documentação oficial

Como exemplo de configuração para depuração no VSCode, este é um launch.json comum:

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

Relacionado com a configuração do launch.json que o felixfbecker/vscode-php-debug requer, está a própria configuração do PHP XDebug.

Atualmente, o seu ambiente de desenvolvimento pode ter xdebug-2 ou xdebug-3. Eles diferem nos parâmetros necessários. Para configurar o PHP XDebug, estas são as configurações mais comuns para o php.ini.

Configuração do XDebug 2

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

Configuração do 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 mais sobre como o XDebug funciona internamente para se ligar ao Editor, consulte a [documentação](Xdebug 3 — Documentação).

Configuração do phpcs

Para configurar a extensão, visite a documentação oficial. A extensão suporta as configurações mais comuns do PHP_CodeSniffer.

Por predefinição, o PHP_CodeSniffer vem com vários padrões de codificação. Depois de instalar a extensão, esta funciona com PSR2.

    "phpcs.standard": "PSR2",

Para configurar a extensão de forma a aplicar as Normas de codificação Joomla!, instale as regras seguindo o guia oficial. Depois de instaladas as Normas de codificação Joomla!, configure as definições de utilizador seguindo este exemplo de configuração:

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

Configuração do PHP Intelephense

Para configurar a extensão, visite a documentação do intelephense. A extensão não requer configuração adicional.

O VSCode vem com suporte básico à linguagem PHP. Por isso, é provavelmente boa ideia desativar o suporte predefinido para evitar conflitos:

    // Desativar sugestões básicas
    "php.suggest.basic": false,

    // Para ativar sugestões de código em comentários
    "editor.quickSuggestions": { "comments": true },

Como alternativa, existe também uma extensão muito popular: PHP IntelliSense felixfbecker.php-intellisense suporte avançado de autocompletar e refactoring para PHP.

Configuração do PHPUnit

Para configurar a extensão, visite a documentação do vscode phpunit

A extensão integra o PHP Unit com o VSCode, pelo que todas as funcionalidades do PHP Unit estão integradas com o VSCode e também podem ser parametrizadas para maior integração com a interface do utilizador.

Este é um exemplo de configuração da extensão:

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

Configuração do php cs fixer (Apenas para PSR2)

Para configurar a extensão, visite a documentação do vscode php cs fixer. A extensão integra o PHP-CS-Fixer com o VSCode, pelo que todas as funcionalidades do PHP-CS-Fixer estão integradas com o VSCode e também podem ser parametrizadas para maior integração com a interface do utilizador.

Para aplicar automaticamente o PHP-CS-Fixer aos ficheiros PHP, configure as definições do utilizador desta forma:

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

Configuração do PHP Phan (Analyzer)

Para configurar a extensão, visite a documentação oficial. Este é um exemplo de configuração da extensão:

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

Configuração do phpmd

Para configurar a extensão, visite a documentação oficial. A extensão não requer configuração adicional.

Este é um exemplo de configuração da extensão:

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

Configurar o EditorConfig para o VS Code

EditorConfig é um formato de ficheiro e um conjunto de plugins de editor de texto para manter estilos de codificação consistentes entre diferentes editores e IDEs.

Para configurar o editor de acordo com as suas preferências, crie um ficheiro .editorconfig:

; EditorConfig ajuda os programadores a definir e manter estilos
; de codificação consistentes entre diferentes editores e IDEs.

; Para mais informações visite http://editorconfig.org.
root = true

; Escolha entre lf ou rf na propriedade "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 não consegue ignorar strings longas ou urls
max_line_length = null

[*.html]
indent_style = tab

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

# Normas de codificação Joomla!
[*.php]
indent_size = 4
indent_style = tab

[*.md]
trim_trailing_whitespace = false

[*.yml]
indent_style = space
indent_size = 2