Benutzerhandbuch Abbrechen

Code-Linting

Suchen

Zuletzt aktualisiert am 1. Mai 2021

Hier erfahren Sie, wie Sie Linting mit HTML-, CSS-, DW-Vorlagen- und JS-Dateien in Adobe Dreamweaver verwenden. Fehler und Warnungen werden im Bedienfeld „Ausgabe“ angezeigt, Mit einem Mausklick können Sie dann zur Codezeile mit dem Fehler springen.

Sowohl Einsteigern wie auch erfahrenen Programmierern können beim Verfassen von Code immer einmal versehentlich oder aufgrund fehlender Informationen Fehler unterlaufen. Wenn die Darstellung der Webseite oder auch nur eines Teils nicht Ihren Erwartungen entspricht, müssen Sie den Code debuggen, um Syntax- oder Logikfehler zu finden. Das Debuggen kann äußerst mühsam und zeitaufwendig sein, insbesondere bei komplexen Implementierungen.

Dreamweaver vereinfacht und erleichtert durch Linting das Debuggen von Code, um häufige Fehler zu ermitteln. Als Linting wird das Analysieren von Code bezeichnet, um potenzielle Fehler und verdächtige Codeabschnitte zu kennzeichnen. Durch Linting werden in Dreamweaver beispielsweise HTML-Syntaxfehler, Analysefehler in CSS oder Warnungen in JavaScript-Dateien gekennzeichnet.

Die gefundenen Fehler und Warnungen werden in einem eigenen Bedienfeld – dem Ausgabe-Bedienfeld – aufgeführt, das am unteren Rand des Arbeitsbereichs angedockt ist. Sie können von jeder Zeile im Bedienfeld zu dem Codeabschnitt wechseln, in dem der Fehler aufgetreten ist, und so den Code einfach finden und korrigieren. Außerdem werden die Zeilennummern des fehlerhaften Codes markiert: Rot für Fehler und Gelb für Warnungen. Wenn Sie mit der Maus auf die hervorgehobenen Zeilennummern zeigen, wird eine Vorschau des Fehlers oder der Warnung in einem Popup-Fenster angezeigt.

Bei der Funktion „Linting bei Bearbeitung“ werden während der Bearbeitung des Codes gleichzeitig Fehler und Warnungen im Ausgabe-Bedienfeld angezeigt.

In Dreamweaver können Sie Linting bei HTML- (.htm und .html), CSS-, DW-Vorlagen- und JavaScript-Dateien verwenden.

Führen Sie die folgenden Schritte aus, um Linting des Codes in diesen Dateien auszuführen:

Legen Sie Linting-Regeln fest, indem Sie die HTML-, CSS-, DW-Vorlagen- und JS-Konfigurationsdateien bearbeiten. Weitere Informationen finden Sie unter Linting-Regeln festlegen.
Aktivieren oder deaktivieren Sie Linting. Das Linting der Dateien kann beim Bearbeiten, Laden oder Speichern erfolgen.
- Über die Option Voreinstellungen > Linting können Sie „Linting bei Bearbeitung“ aktivieren bzw. deaktivieren. Weitere Informationen finden Sie unter Linting und Linting bei Bearbeitung aktivieren und Linting-Regeln angeben.

In den Dateien gefundene Fehler und Warnungen werden im Ausgabe-Bedienfeld angezeigt. Weitere Informationen finden Sie unter Linting-Ergebnisse und das Ausgabe-Bedienfeld.

Linting und Linting bei Bearbeitung aktivieren und Linting-Regeln angeben

Klicken Sie auf Bearbeiten > Voreinstellungen (Windows) bzw. Dreamweaver > Voreinstellungen (Mac). Klicken Sie in der Liste „Kategorie“ auf Linting, wählen Sie Linting aktivieren und klicken Sie auf Übernehmen.

Linting bei Bearbeitung

In Dreamweaver ist die Funktion „Linting bei Bearbeitung“ standardmäßig aktiviert. Zum Deaktivieren klicken Sie auf Bearbeiten > Voreinstellungen (Windows) bzw. Dreamweaver > Voreinstellungen (Mac). Klicken Sie in der Liste „Kategorie“ auf Linting, wählen Sie Linting bei Bearbeitung und klicken Sie auf Übernehmen.

Linting-Regeln festlegen

Linting ist für HTML-, CSS- und JS-Dateien möglich, indem Sie die Linting-Regeln in den entsprechenden Konfigurationsdateien bearbeiten:

HTML: DW.htmlhintrc
CSS: DW.csslintrc
JS: .eslintrc

Führen Sie die folgenden Schritte aus, um auf diese Dateien zuzugreifen und sie zu bearbeiten:

Klicken Sie auf „Bearbeiten“ > „Voreinstellungen“ (Windows) bzw. „Dreamweaver“ > „Voreinstellungen“ (Mac).
Wählen Sie in der Liste „Kategorie“ den Eintrag Linting.
Klicken Sie im Abschnitt „Regelsatz bearbeiten“ auf den gewünschten Dateityp und klicken Sie auf „Bearbeiten und Änderungen anwenden“.

Die entsprechende Konfigurationsdatei wird in Dreamweaver geöffnet.
Bearbeiten Sie Linting-Regeln oder fügen Sie den Konfigurationsdateien Linting-Regeln hinzu. Weitere Informationen zu Linting-Regeln finden Sie in der folgenden Dokumentation:
- HTML-Linter: https://github.com/yaniswang/HTMLHint/wiki/Rules
- CSS-Linter: https://github.com/CSSLint/csslint/wiki/Rules
- JS-Linter: https://eslint.org/docs/rules
In diesen Konfigurationsdateien können Sie auch die Typen von Fehlern oder Warnungen festlegen, die angezeigt werden sollen.

Hinweis:

Die Konfigurationsdatei für Linting-Regeln bei früheren Versionen von Dreamweaver 19.0 ist „JS: DW.jshintrc“. Weitere Informationen finden Sie unter http://jshint.com/docs/options/.

ECMAScript 6-Linting

Dreamweaver unterstützt die Syntax von ECMAScript 6. Darüber hinaus unterstützt Dreamweaver Linting von ECMAScript-Code, wobei ESLint standardmäßig als JavaScript-Linter verwendet wird.

Klicken Sie auf Site > Sites verwalten.

Im Dialogfeld „Sites verwalten“ die entsprechende Site wählen
Wählen Sie im linken Bereich des Dialogfensters „Site-Definition“ Erweiterte Einstellungen.
Wählen Sie JS Lint unter Erweiterte Einstellungen im linken Bereich.

Sie können neben ECMAScript-Version auf die Dropdown-Liste klicken und „3“, „5“ oder „6“ wählen. In Dreamweaver wird der Standardregelsatz der gewählten Version verwendet.

ECMAScript-Version wählen
Um den Regelsatz anzupassen, können Sie in der Dropdown-Liste Konfigurationsdatei wählen und auf Konfigurationsdatei bearbeiten klicken.

JS Lint-Konfigurationsdatei bearbeiten

Die unter „Site-Definition“ vorgenommenen Änderungen werden gespeichert und eine neue Datei mit dem Namen .eslintrc.js wird im Stammordner der Site erstellt, sofern sie nicht bereits vorhanden ist.

Die Datei eslintrc.js im Stammordner der Site wird zum Bearbeiten geöffnet. Weitere Informationen finden Sie unter ESLint Rules (in englischer Sprache).

Konfigurationsdatei „.eslintrc.js“
Hinweis:
Die im Dialogfeld „Site-Definition“ vorgenommene Einstellung der ECMAScript-Version steht in der Rangfolge über derjenigen in der Datei .eslintrc.js (im Stammordner der Site).

Wenn in Ihrer Site keine ESLint-Konfigurationsdateien vorhanden sind, sucht Dreamweaver in allen Verzeichnissen bis zum Stammordner nach den Konfigurationsdateien.

Weitere Informationen zu Konfigurationsdatei und Hierarchie finden Sie auf der ESLint-Website (in englischer Sprache).

Linting-Ergebnisse und das Ausgabe-Bedienfeld

Die Linting-Ergebnisse – Fehler und Warnungen – werden im Ausgabe-Bedienfeld aufgeführt. Das Ausgabe-Bedienfeld befindet sich im angedockten Modus am unteren Rand aller Standardarbeitsbereiche. Wenn das Ausgabe-Bedienfeld geschlossen ist, können Sie es mit einer der folgenden Aktionen öffnen:

Durch Klicken auf das Linting-Statussymbol auf der Statusleiste des Dokumentfensters
Mit dem Tastaturbefehl Umschalt+F6
Über „Fenster“ > „Ergebnisse“ > „Ausgabe“

Das Linting-Symbol auf der Statusleiste gibt die Linting-Ergebnisse an:

Rot: Das aktuelle Dokument enthält Fehler und Warnungen.
Gelb: Das aktuelle Dokument enthält lediglich Warnungen.
Grün: Das aktuelle Dokument enthält keine Fehler.

Hinweis:

Über das Linting-Symbol auf der Statusleiste können Sie auch das Ausgabe-Bedienfeld öffnen und schließen, wenn das Symbol rot oder gelb ist (aber nicht grün).

Die Zeilen, die Fehler oder Warnungen enthalten, sind rot bzw. gelb hervorgehoben. Sie können auf eine Meldung im Ausgabe-Bedienfeld doppelklicken, um zu der Zeile zu springen, in der der Fehler aufgetreten ist. In der Codeansicht können Sie auch mit der Maus auf die Zeilennummern der fehlerhaften Zeilen zeigen, um eine Vorschau des Fehlers oder der Warnung zu öffnen.

Im Ausgabe-Bedienfeld werden jeweils 50 Meldungen angezeigt, wobei Fehler vor Warnungen aufgeführt werden. Wenn Sie die Fehler beheben, wird in der Liste im Bedienfeld ein Bildlauf durchgeführt, um den nächsten Fehler anzuzeigen.

Schneller und einfacher Hilfe erhalten

Neuer Benutzer?