Artikel bearbeiten

Editor-Einstellungen Visual Studio Code (VSCode)

[ letztes update: 2022-07-04 ]

Visual Studio Code ist ein Quelltext-Editor von Microsoft. Er kann plattformübergreifend und kostenfrei genutzt werden (Windows, macOS, Linux).

Anfangs als schlanker Editor für die Quellcode-Entwicklung gedacht, hat sich VS Code durch seine vielen Erweiterungen zu einer vollständigen und modularen integrierten Entwicklungsumgebung (IDE) entwickelt. Durch den Verzicht auf Projektdateien kann VSCode wie ein einfacher Editor aufgerufen werden, bietet jedoch durch Quellcode-Analyse des aktuellen Ordners den Komfort großer Projektverwaltungen mit Code-Vervollständigung und Fehleranalyse.

Für die Software-Entwicklung im Kontext von REDAXO empfehlen wir:

PHP - REDAXO-Coding-Standards

Zusammenfassend werden 4 Schritte benötigt, diese werden nachfolgend genauer erläutert.

  1. Pfad zur PHP-Executable einstellen
  2. Erweiterung junstyle.php-cs-fixer installieren
  3. REDAXO-Coding-Standards lokal als Datei .php_cs.dist speichern
  4. Einstellungen der Erweiterungen wie gewünscht anpassen

Schritt 1: Pfad zur PHP-Executable einstellen

Falls noch nicht geschehen muss VSCode der Pfad zur PHP-Executable mitgeteilt werden.

Folgende Einstellung in die VSCode Konfigurationsdatei settings.json kopieren

"php.validate.executablePath": "C:\\xampp\\php\\php.exe",

Hinweis: Passe den Pfad an Deine eigene PHP-Umgebung an.

Schritt 2: Erweiterung PHP CS Fixer installieren

Die Erweiterung PHP CS Fixer von Junstyle für Visual Studio Code enthält den PHP Coding Standards Fixer.

Hinweis: Die richtige Erweiterung installieren! (Suche nach junstyle.php-cs-fixer)

Schritt 3: REDAXO-Coding-Standards lokal als Datei .php_cs.dist speichern

Aus der REDAXO .php_cs.dist den unteren Block ab return PhpCsFixer\Config::create() kopieren und lokal abspeichern.

// NOTIZ [madiko]: Bitte Link aktualisieren //

Hinweis: Am besten im Extension-Verzeichnis des VSCode, z.b. C:\Users\USERID\.vscode\extensions\.php_cs.dist

Die folgenden Zeilen oben am Code einfügen …

$finder = PhpCsFixer\Finder::create()
    ->in([__DIR__]);

Nachfolgenden Code in die .php_cs.dist zum kopieren;

<?php

// REDAXO-Coding-Standards
// kann z.B. mit PHPStorm, oder mit VS Code mit der Extension `php cs fixer` verwendet werden
// https://github.com/redaxo/redaxo/blob/master/.php_cs.dist

$finder = PhpCsFixer\Finder::create()
    ->in([__DIR__]);

return PhpCsFixer\Config::create()
    ->setUsingCache(true)
    ->setRiskyAllowed(true)
    ->setRules([
        '@Symfony' => true,
        '@Symfony:risky' => true,
        '@PHP71Migration' => true,
        '@PHP71Migration:risky' => true,
        '@PHPUnit75Migration:risky' => true,
        'array_indentation' => true,
        'blank_line_before_statement' => false,
        'braces' => ['allow_single_line_closure' => false],
        'comment_to_phpdoc' => true,
        'concat_space' => false,
        'declare_strict_types' => false,
        'function_to_constant' => ['functions' => ['get_class', 'get_called_class', 'php_sapi_name', 'phpversion', 'pi']],
        'heredoc_to_nowdoc' => true,
        'list_syntax' => ['syntax' => 'short'],
        'logical_operators' => true,
        'native_constant_invocation' => false,
        'no_blank_lines_after_phpdoc' => false,
        'no_null_property_initialization' => true,
        'no_php4_constructor' => true,
        'no_superfluous_elseif' => true,
        'no_unreachable_default_argument_value' => true,
        'no_useless_else' => true,
        'no_useless_return' => true,
        'ordered_class_elements' => ['order' => [
            'use_trait',
            'constant_public',
            'constant_protected',
            'constant_private',
            'property',
            'construct',
            'phpunit',
            'method',
        ]],
        'php_unit_internal_class' => true,
        'php_unit_method_casing' => true,
        'php_unit_set_up_tear_down_visibility' => true,
        'php_unit_test_case_static_method_calls' => true,
        'phpdoc_no_package' => false,
        'phpdoc_order' => true,
        'phpdoc_types_order' => false,
        'phpdoc_var_annotation_correct_order' => true,
        'phpdoc_var_without_name' => false,
        'psr4' => false,
        'semicolon_after_instruction' => false,
        'static_lambda' => true,
        'string_line_ending' => true,
        'void_return' => false,
        'yoda_style' => true,
    ])
    ->setFinder($finder)
;

Die lokal abgespeicherte Datei wird im folgenden Schritt für die Einstellungen der Erweiterung verwendet.
Eine Kopie der Datei kann aber auch z.B. direkt im eigenen Addon-Verzeichnis gespeichert werden.

Schritt 4: Settings für die Erweiterung anpassen

Folgende Einstellung in die VSCode Konfigurationsdatei settings.json kopieren

    "php-cs-fixer.config": ".php_cs;.php_cs.dist;C:\\Users\\USERID\\.vscode\\extensions\\.php_cs.dist",

Hinweis: hier wird die Suchreihenfolge für die Config-Datei festgelegt, als letzter Datei-Name inkl. Pfad der oben bereits genannte.

Die Erweiterung arbeitet wie gewünscht, wenn z.B. aus

if ($file->getExtension()==='php') {
echo "blafasel";
}

folgendes ersetzt wird

if ('php' === $file->getExtension()) {
    echo 'blafasel';
}

Tipp: Es gibt noch einige weitere Einstellungen für die Erweiterung - diese einfach nach den eigenen Wünschen konfigurieren :)

YAML - Schema für config.yml und package.yml

Zusammenfassend werden 2 Schritte benötigt, diese werden nachfolgend genauer erläutert.

  1. Erweiterung redhat.vscode-yaml installieren
  2. Einstellungen für die Erweiterung anpassen

Schritt 1: Erweiterung redhat.vscode-yaml installieren

Im Marketplace nach redhat.vscode-yaml suchen und installieren.

YAML Language Support by Red Hat

Schritt 2: Settings für die Erweiterung anpassen

    "yaml.schemas": {
        "https://raw.githubusercontent.com/redaxo/redaxo/master/redaxo/src/core/schemas/config.json": [
            "/redaxo/data/core/config.yml"
        ],
        "https://raw.githubusercontent.com/redaxo/redaxo/master/redaxo/src/core/schemas/package.json": [
            "package.yml"
        ],
    },

Hinweis: Die Schema-Dateien können auch lokal gespeichert werden und müssen dann mit "file://C:\\Ordner\\package.json" angegeben werden.

Nützliche Erweiterungen für VSCode

Die im Folgenden genannten PlugIns von VSCode dienen Anfänger:innen als Einstiegshilfe — ohne Anspruch auf Vollständigkeit.
Letztes Update: 2022-07-04

Bedien-Oberfläche

Rechtschreib-/Grammatik-Korrekturen für Texte

Programmiersprachen übergreifend

  • Prettier - Code formatter von Prettier (JavaScript, TypeScript, Flow, JSX, JSON, CSS, SCSS, Less, HTML, Vue, Angular HANDLEBARS, Ember, Glimmer, GraphQL, Markdown, YAML)

HTML und CSS

JavaScript

PHP

MySQL

Dokumentation

Datentransfer

  • sFTP von Natizyskunk

Git und GitHub

Artikel bearbeiten