Wenn Sie den Post der letzten Woche nicht gelesen haben (und Sie ein Mitglied der Seite sind), dann bitte ich Sie dringend, dies jetzt zu tun, da dieser genau dort weitermacht, wo der vorherige aufgehört hat.

Kurz gesagt, wir beginnen damit, über die Konfiguration von Visual Studio Code für die professionelle WordPress-Entwicklung zu sprechen. Das wirft natürlich eine Frage auf: Was ist professionelle WordPress-Entwicklung?

Wenn Sie zehn verschiedene Personen fragen, erhalten Sie wahrscheinlich 8-10 verschiedene Antworten; Ich würde es jedoch als die Verwendung professioneller Softwareentwicklungspraktiken im Kontext von WordPress definieren.

Natürlich, oder? Aber was hat es damit auf sich?

Spontan denke ich an:

• Verwendung geeigneter Abhängigkeitsverwaltungstools wie Composer, NPM oder Yarn,
• Debugging mit Breakpoints (über var_dump und echo),
• Zu wissen, wie man Code mit einem bestimmten Standard formatiert (PSR, falls ich ihn verwenden werde),
• Dateiorganisationsstruktur,
• Verwenden von Dingen wie Sass, JavaScript Linting und so weiter, um die Entwicklung zu vereinfachen

Aber bevor wir auf all das eingehen, denke ich, dass es wichtig ist, die IDE so einzurichten, dass sie gut aussieht, gut mit der Art und Weise spielt, wie wir es wollen, und dass wir verstehen, wie sie funktioniert, damit wir sie weiter optimieren können Bedarf entsteht.

Im heutigen Beitrag werden wir uns also genau damit befassen: Verstehen, wie Visual Studio Code Einstellungen verwaltet, und eine vorgeschlagene Liste von Konfigurationsoptionen, die dazu beitragen, Ihre Erfahrung so solide wie möglich zu machen.

Benutzereinstellungen in Visual Studio Code

Bevor Sie beginnen, empfehle ich, Fira Code herunterzuladen und die Schriftart auf dem Betriebssystem Ihrer Wahl zu installieren. Obwohl es viele andere Schriftarten (wie Source Code Pro) gibt, die auch nett sind, habe ich festgestellt, dass Fira Code einer meiner persönlichen Favoriten ist, insbesondere mit seinen Ligaturen (aber dazu gleich mehr).

Dies werden Sie im weiteren Verlauf dieser Serie in Screenshots sehen.

1 Einstellungen verstehen

Beachten Sie zunächst, dass Visual Studio Code über eine Standarddatei verfügt, die es für Einstellungen in seinen Projekten verwendet. Sie werden dies bemerken, wenn Sie zum  Menü Code > Einstellungen gehen (oder was auch immer Ihrem Betriebssystem ähnelt.

Kurz gesagt, alles wird in einer JSON-Datei festgelegt. Hier wird es lustig: Sie können diese Datei anpassen, indem Sie im Wesentlichen überschreiben, was sie bereitstellt, indem Sie eine von ihr bereitgestellte Benutzereinstellungsdatei verwenden.

Und das Schöne ist, dass die IDE, obwohl sie die Angebote von Visual Studio überschreibt, immer auf die Standardeinstellungen zurückgreift, die mit ihr geliefert werden.

In diesem speziellen Beitrag werde ich mich mit der einfachen Definition von Editoreinstellungen befassen. In zukünftigen Beiträgen werden wir uns jedoch mit der Arbeit mit PHP, Codierungsstandards und mehr befassen.

2 Konfigurieren Ihrer Einstellungen

Für diesen Beitrag gehe ich davon aus, dass Sie ein offenes Projekt haben. Dies kann ein neues Projekt oder ein bestehendes Projekt sein. Unabhängig davon, was ich anbieten werde, gilt immer noch.

Zweitens werde ich Vorschläge machen, die auf der Art der Arbeit basieren, die ich am häufigsten mache. Obwohl ich diese Einstellungen anderen empfehle und wir möglicherweise kleine Änderungen vornehmen (z. B. möchten einige Linters keinen Platz, um diese Serie in der IDE durchzugehen), sind dies die allgemeinsten Dinge, die verwendet werden, um den Anfang zu erleichtern).

Wenn Sie die Datei zum ersten Mal öffnen, ist sie leer. Denken Sie daran, dass es in richtigem JSON geschrieben werden muss, sonst wird es nicht funktionieren (geschweige denn jetzt durch einen Fehler).

Hier ist ein Beispiel dafür, was ich in meinen Editor-Einstellungen habe :

{
    // Editor Settings.
    "editor.fontFamily": "Fira Code",
    "editor.fontLigatures": true,
    "editor.fontSize": 13,
    "editor.renderWhitespace": "all",
    "editor.tabSize": 4,
    "editor.insertSpaces": true,
    "editor.detectIndentation": false,
    "editor.formatOnSave": false,

    "files.trimTrailingWhitespace": true,

    // ...
}

Jeder sollte selbsterklärend sein; Beachten Sie jedoch, dass ich „ editor.fontLigatures” auf „ true ” gesetzt habe, da ich Fira Code verwende. Dadurch werden bestimmte Dinge wie = in eine Ligatur umgewandelt.

Dies sorgt für eine viel angenehmere Erfahrung beim Schreiben von Code.

3 Projekte teilen

Schließlich finde ich es nützlich, Projekte an einem Ort zu haben, der von mehreren Computern gemeinsam genutzt werden kann. Dies kann über Google Drive, Dropbox oder iCloud Drive erfolgen.

In jedem Fall empfehle ich Folgendes:

1. Bewahren Sie Ihre Projekte auf, vorausgesetzt, sie sind nicht vertraulich, natürlich in einem Dateifreigabedienst,
2. Speichern Sie jede Arbeitsbereichsdatei zusammen mit den Projektdateien in diesem Dienst.

Wenn Sie sich für die Verwendung mehrerer Computer entscheiden, sollten Sie auf diese Weise über die Quelldateien verfügen, die Sie für die Arbeit an jedem Projekt benötigen. Aber ich werde hier nicht auf den Punkt eingehen. Ich habe dies in einem früheren Beitrag besprochen, und der Prozess klingt immer noch.

Ich hatte einfach das Gefühl, dass es ein guter Schritt wäre, darauf hinzuweisen, nur für den Fall, dass Sie es nicht in Betracht gezogen haben.

Coding-Standards betrachten

Natürlich ist dieser Beitrag nicht sehr technisch, aber wir werden im nächsten Beitrag mit der Implementierung von Codierungsstandards beginnen, und das erfordert ein wenig Arbeit mit Composer sowie mit der Arbeit mit Benutzereinstellungen.

Und um sicherzustellen, dass wir dazu in der Lage sind, ist es sinnvoll, die Grundlage zu schaffen, um zu verstehen, wie Einstellungen funktionieren, damit wir sie in Zukunft weiter bearbeiten können.