Codequalität pro Spracheinstellungen in Visual Studio Code

In früheren Beiträgen habe ich ein wenig über Visual Studio Code gesprochen, und obwohl ich eine Vielzahl anderer Editoren ausprobiert habe, komme ich immer wieder auf diese spezielle IDE zurück.

Im Laufe der Zeit ist es ziemlich ausgereift, tut dies auch weiterhin und ermöglicht viele Anpassungen, insbesondere für diejenigen von uns, die mit PHP, Sass, JavaScript und ganz allgemein mit WordPress arbeiten .

Wenn Sie jedoch Linters verwenden, werden Sie feststellen, dass eines der Dinge, über die jeder sprechen wird, die Menge an Leerzeichen ist, die vor einer bestimmten Codezeile vorhanden sein sollte.

Wenn Sie also Visual Studio Code verwenden, sind dies die Erweiterungen und Einstellungen, die ich empfehle, um sicherzustellen, dass Ihr Code den von Ihnen verwendeten Codequalitätstools entspricht.

Codequalität pro Sprache

Zu den Erweiterungen, die ich jeder Person zur Installation empfehle – zumindest wenn Sie mit den oben genannten Sprachen arbeiten – gehören die folgenden:

• ESLint. Integriert ESLint in VS Code. (Wenn Sie neu bei ESLint sind, lesen Sie die Dokumentation .)
• PHPCS, das die PHP-Codierungsstandards (in den Einstellungen festgelegt) in die IDE integriert.
• Die WordPress Toolbox bietet Snippets für jede WordPress-Funktion, -Klasse und -Konstante, mit Hinweisen zu Argumenttypen und kurzen Beschreibungen bis zu WordPress 4.9.4 (zum Zeitpunkt dieses Beitrags).

Sobald diese installiert sind, können Sie Ihre IDE neu starten oder den folgenden Code zur Einstellungsdatei hinzufügen, bevor Sie dies tun. Sie können dies global oder pro Projekt tun. Beides ist in Ordnung. Ich habe den Code kommentiert, um es so einfach wie möglich zu machen, ihm zu folgen.

Ich werde auch ein paar Notizen darunter hinzufügen.

{
    // Tab Spacing per language.
    "[php]": {
      "editor.tabSize": 4,
      "editor.autoIndent": true
    },

    "[scss]": {
      "editor.tabSize": 2,
      "editor.autoIndent": true
    },

    "[javascript]": {
      "editor.tabSize": 2,
      "editor.autoIndent": true
    },

    // General Editor Settings
    "files.trimTrailingWhitespace": true,
    "php.suggest.basic": true,
    "php.validate.executablePath": "/usr/local/bin/php",
    "php.validate.run": "onType",
    "phpcs.enable": true,
    "phpcs.executablePath": "/usr/local/bin/phpcs",
    "phpcs.standard": "PSR2"
}

So funktioniert es:

• Für jeden Sprachtyp können Sie bestimmte Einstellungen definieren, z. B. tabSize und ob AutoIndent durchgeführt werden soll oder nicht, indem Sie eine Definition in der JSON-Datei erstellen.
• Stellen Sie dazu der Definition die Dateiendung der Sprache oder in einigen Fällen (wie JavaScript) den Namen der Sprache voran.

Der Code am Ende der Datei, die allgemeinen Editoreinstellungen, werden als einige Extras bereitgestellt, die Sie möglicherweise einbeziehen möchten. Zum Beispiel kürze ich gerne alle nachgestellten Leerzeichen, schlage grundlegende PHP-Definitionen und eine Reihe von Codierungsstandards vor, wenn ich an einem Projekt arbeite.

Dies sind Dinge, die im Allgemeinen außerhalb des Rahmens dieses Projekts liegen (aber ich habe sie in anderen Beiträgen besprochen ). Aber es reicht immer noch aus, um mit einer höheren Codequalität pro Sprache zu beginnen, als das, was standardmäßig angeboten wird.