So richten Sie JavaScript-Linting in Visual Studio Code ein

Ich bin offensichtlich ein großer Fan der Verwendung von Codierungsstandards, wenn Sie serverseitigen Code schreiben (unabhängig davon, ob es sich um WordPress, PSR2 oder was auch immer handelt – solange Sie etwas verwenden, denke ich, dass es eine gute Sache ist).

Aber wenn es darum geht, clientseitigen Code zu schreiben, nämlich JavaScript für diesen Beitrag, sehen wir das nicht so oft diskutiert, obwohl ich es für genauso wichtig halte. Dasselbe gilt für CSS, Sass oder LESS, aber das ist Inhalt für einen anderen Beitrag.

Für aktuelle Projekte haben wir den JavaScript-Styleguide von Airbnb für unsere Projekte verwendet. Ich bin ein Fan und denke, es hilft, sauberes, lesbares JavaScript zu schreiben (das aussieht, als wäre es von derselben Person geschrieben worden – das ultimative Ziel von Codierungsstandards, oder?).

In diesem Beitrag werde ich durch den Prozess der Einrichtung in Visual Studio Code gehen.

JavaScript-Linting in Visual Studio Code

In diesem Beitrag wird davon ausgegangen, dass Sie mit der Einrichtung des Knotenpaket-Managers auf Ihrem lokalen Computer vertraut sind.

Wenn nicht, dann habe ich in diesem Beitrag eine Anleitung, wie das geht. Die Abkürzung? Es ist buchstäblich so einfach (sobald Homebrew installiert ist) :

Sobald Sie es eingerichtet haben (entweder mithilfe dieses Posts oder wenn es bereits eingerichtet ist), können Sie mit der tatsächlichen Installation der erforderlichen Tools zum Konfigurieren von JavaScript-Linting in Visual Studio Code fortfahren.

1 ESLint installieren

Angenommen, Sie führen ein Projekt aus einem Verzeichnis namens acme in Ihrem Projektverzeichnis in Dropbox aus. Wenn dies der Fall ist, navigieren Sie zum Plugins-Verzeichnis für dieses Projekt. Es wird wahrscheinlich ungefähr so ​​​​aussehen:

$ cd ~/Dropbox/Projects/acme/wp-content/plugins/acme-plugin

Dafür müssen Sie ESLint und die Airbnb-Konfigurationsdateien installieren. Glücklicherweise ist es wirklich einfach zu tun. Geben Sie im Terminal einfach den folgenden Befehl ein:

$ npm i -S eslint eslint-config-airbnb-base eslint-plugin-import

Ich gehe davon aus, dass keines der oben genannten Pakete bereits installiert ist. Wenn dies der Fall ist, z. B. eslint, können Sie dieses bestimmte Argument aus der obigen Zeile entfernen.

Darüber hinaus ist es wichtig zu verstehen, dass das Projekt eslint-plugin-import wichtig ist, um Unterstützung für das Importieren und Exportieren von JavaScript-Modulen hinzuzufügen.

2 Die ESLint-Konfiguration

Es ist ein weiterer Schritt erforderlich, bevor die Konfiguration in Visual Studio Code eingerichtet wird. Es geht nämlich darum, eine ESLint-Konfigurationsdatei zu erstellen. Geben Sie im oben gezeigten acme-plugin- Verzeichnis den folgenden Befehl ein:

$ touch .eslintrc.js

Dadurch wird eine leere Datei erstellt (oder eine leere Punktdatei, wie manche sich darauf beziehen) und hier wird unsere Konfiguration auf den Airbnb-Styleguide verweisen.

Fügen Sie in der Datei einfach die folgenden Zeilen Konfigurationscode hinzu:

module.exports = {
  "extends": "airbnb-base"
};

Nachdem Sie ESLint installiert haben, einen Verweis auf den Airbnb-Styleguide haben und einen Verweis auf die Unterstützung zusätzlicher Syntax haben, ist es an der Zeit, Visual Studio Code einzurichten.

3 Einrichten von Visual Studio-Code

Meiner Meinung nach ist dies der einfachste Teil. Öffnen Sie das Erweiterungsfenster auf die für Sie am besten geeignete Weise (durch Klicken auf das Symbol oder Verwenden der Verknüpfung) und führen Sie dann eine Suche nach ESLint durch. Sie können mehrere Ergebnisse sehen, aber das gewünschte Ergebnis sieht so aus:

Installieren Sie es und laden Sie dann den Visual Studio-Code neu. Es sollte in Ihren Standardeinstellungen festgelegt sein, die Sie bestätigen können, indem Sie die Einstellungen öffnen und nach diesem Codestück suchen:

// Controls whether eslint is enabled for JavaScript files or not.
"eslint.enable": true,

Wenn es nicht vorhanden ist, können Sie es zu den Benutzereinstellungen hinzufügen (ich bin kein Fan davon, mit den Standardeinstellungen herumzuspielen, nur für den Fall, dass Sie jemals von einer sauberen Grundlage aus zurücksetzen müssen).

Sobald dies definiert ist, können Sie loslegen, und Sie sollten Ihr JavaScript während der Arbeit an Ihrem Projekt lintieren lassen.

Andere Paketmanager?

Oben habe ich ein Beispiel gegeben, wie man das über Node macht; Es ist jedoch auch möglich, Garn zu verwenden. Dies ist etwas, worüber ich in Zukunft schweigen möchte, aber da ich Node in einem früheren Beitrag behandelt habe, schien es logisch und am einfachsten, diesem Beitrag diesen Inhalt als Referenz zu folgen.

Wenn es für mich an der Zeit ist, einen anderen Paketmanager zu verwenden, speziell Yarn, werde ich auch darauf eingehen.