Visual Studio Code: Difference between revisions

From Joomla! Documentation

Marked this version for translation
list of featured extensions for repo management
Line 22: Line 22:
* '''PHP Phan (Analyzer)''' [https://marketplace.visualstudio.com/items?itemName=TysonAndre.php-phan tysonandre.php-phan]. Phan - static analyzer for PHP, minimizing false positives.
* '''PHP Phan (Analyzer)''' [https://marketplace.visualstudio.com/items?itemName=TysonAndre.php-phan tysonandre.php-phan]. Phan - static analyzer for PHP, minimizing false positives.
* '''phpmd''' [https://marketplace.visualstudio.com/items?itemName=linyang95.phpmd linyang95.phpmd]. VS Code extension for php, using phpmd.
* '''phpmd''' [https://marketplace.visualstudio.com/items?itemName=linyang95.phpmd linyang95.phpmd]. VS Code extension for php, using phpmd.
The Git protocol is natively supported on VSCode. However, there are extensions to improve code and repository management. This is a list of featured extensions for this task:
* '''Git History''' [https://marketplace.visualstudio.com/items?itemName=donjayamanne.githistory donjayamanne.githistory]: Git History, Search and More (including git log).
* '''GitHub''' [https://marketplace.visualstudio.com/items?itemName=KnisterPeter.vscode-github KnisterPeter.vscode-github]: This vscode extension integrates with GitHub.
* '''GitHub Pull Requests and Issues''' [https://marketplace.visualstudio.com/items?itemName=GitHub.vscode-pull-request-github GitHub.vscode-pull-request-github]: Review and manage your GitHub pull requests and issues directly in VS Code
* '''gitignore''' [https://marketplace.visualstudio.com/items?itemName=codezombiech.gitignore codezombiech.gitignore]: A extension for Visual Studio Code that assists you in working with .gitignore files.
* '''Visual Studio Code Commitizen Support''' [https://marketplace.visualstudio.com/items?itemName=KnisterPeter.vscode-commitizen KnisterPeter.vscode-commitizen]: This vscode extension adds commitizen support.


<!--T:7-->
<!--T:7-->

Revision as of 08:04, 6 March 2021

Visual Studio Code is a source code editor developed by Microsoft for Windows, Linux and macOS. It includes support for debugging, embedded Git control and GitHub, syntax highlighting, intelligent code completion, snippets, and code refactoring.

The main characteristic of the editor is that it is extensible and it has a huge collection of extensions maintained by users and by Microsoft itself. The Extensions for the Visual Studio family of products can be found here: https://marketplace.visualstudio.com/VSCode.

On this page, we detail a list of recommended extensions to configure VSCode to support PHP and Joomla.

This is a list of extensions to support PHP on VSCode:

The Git protocol is natively supported on VSCode. However, there are extensions to improve code and repository management. This is a list of featured extensions for this task:

This is a list of extensions to support Joomla on VSCode:

This is a list of extensions to support remote SSH development:

  • Remote - SSH ms-vscode-remote.remote-ssh: The Remote - SSH extension lets you use any remote machine with a SSH server as your development environment. This can greatly simplify development and troubleshooting in a wide variety of situations. For more information: Remote development over SSH
  • Live Share MS-vsliveshare.vsliveshare: Visual Studio Live Share enables you to collaboratively edit and debug with others in real time, regardless what programming languages you're using or app types you're building. It allows you to instantly (and securely) share your current project, and then as needed, share debugging sessions, terminal instances, localhost web apps, voice calls, and more!


This is a list of handy extensions highly recommended to ease the development:

  • EditorConfig for VS Code editorconfig.editorconfig EditorConfig Support for Visual Studio Code
  • change-case wmaurer.change-case: Quickly change the case (camelCase, CONSTANT_CASE, snake_case, etc) of the current selection or current word
  • Project Manager alefragnani.project-manager: It helps you to easily access your projects, no matter where they are located. Don't miss those important projects anymore.

PHP Debug Configuration

The extension supports the most common configurations of PHP XDebug. It fully integrates all VSCode features to debug PHP scripts.

To configure the extension, visit the official documentation here: https://github.com/felixfbecker/vscode-php-debug#installation

As a sample configuration for VSCode debugging, this is a common 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
            "port": 9099,

            // 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
            "port": 9099
        }
    ]
}

phpcs Configuration

To configure the extension, visit the official documentation here: https://marketplace.visualstudio.com/items?itemName=ikappas.phpcs

The extension supports the most common configurations of PHP_CodeSniffer.

By default, PHP_CodeSniffer comes with several coding standards. Once the extension is installed, it works with PSR2.

    "phpcs.standard": "PSR2",

To configure the extension to apply the Joomla! Coding Standards, install the rules following the official guide: https://developer.joomla.org/coding-standards/html.html

Once the Joomla! Coding Standards is installed, configure the User Settings following this sample configuration:

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

Configuration of PHP Intelephense

To configure the extension, visit the official documentation here: https://github.com/bmewburn/vscode-intelephense#quick-start

The extension does not require additional configuration.

VSCode comes with basic support of the PHP language. So, it is probably a good idea to disable the default support to avoid conflicts:

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

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

As an alternative, it is also a very popular extension: PHP IntelliSense felixfbecker.php-intellisense Advanced Autocompletion and Refactoring support for PHP.

PHPUnit Configuration

To configure the extension, visit the official documentation here: https://github.com/elonmallin/vscode-phpunit#setup

The extension integrates PHP Unit with VSCode, so all features of PHP Unit are integrated with VSCode and can also be parametrized for further integration with the user interface.

This is a sample configuration of the extension:

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

php cs fixer Configuration (Only for PSR2)

To configure the extension, visit the official documentation here: https://github.com/junstyle/vscode-php-cs-fixer#installation

The extension integrates PHP-CS-Fixer with VSCode, so all features of PHP-CS-Fixer are integrated with VSCode and can also be parametrized for further integration with the user interface.

To automatically, apply PHP-CS-Fixer to PHP files, configure the user settings in this way:

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

PHP Phan (Analyzer) Configuration

To configure the extension, visit the official documentation here: https://marketplace.visualstudio.com/items?itemName=TysonAndre.php-phan

This is a sample configuration of the extension:

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

phpmd Configuration

To configure the extension, visit the official documentation here: https://github.com/felixfbecker/vscode-php-debug#installation

The extension does not require additional configuration.

This is a sample configuration of the extension:

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

Configure EditorConfig for VS Code

EditorConfig is a file format and collection of text editor plugins for maintaining consistent coding styles between different editors and IDEs.

To configure the editor according to your preferences, create a file .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