Hier erfahren Sie, wie Sie Linting mit HTML-, CSS- 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 in Dreamweaver werden 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.

In Dreamweaver können Sie Linting bei HTML- (.htm und .html), CSS- und JavaScript-Dateien verwenden. Führen Sie die folgenden Schritte aus, um Linting des Codes in diesen Dateien auszuführen:

  1. Legen Sie Linting-Regeln fest, indem Sie die HTML-, CSS- und JS-Konfigurationsdateien bearbeiten. Weitere Informationen finden Sie unter Linting-Regeln festlegen.

  2. Aktivieren oder deaktivieren Sie Linting. Linting der Dateien kann beim Laden und Speichern erfolgen. Über die Option Voreinstellungen > Linting können Sie Linting aktivieren bzw. deaktivieren. Weitere Informationen finden Sie unter Linting 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 aktivieren und Linting-Regeln angeben

Klicken Sie auf Bearbeiten > Voreinstellungen (Windows) bzw. Dreamweaver > Voreinstellungen (Mac). Wählen Sie in der Liste „Kategorie“ den Eintrag Linting und dann Linting aktivieren.

Linting-Regeln festlegen

Das 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:

  1. Klicken Sie auf „Bearbeiten“ > „Voreinstellungen“ (Windows) bzw. „Dreamweaver“ > „Voreinstellungen“ (Mac). 

  2. Wählen Sie in der Liste „Kategorie“ den Eintrag „Linting“.

  3. 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.

  4. Bearbeiten Sie Linting-Regeln oder fügen Sie den Konfigurationsdateien Linting-Regeln hinzu. Weitere Informationen zu Linting-Regeln finden Sie in der folgenden Dokumentation:

    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 CC 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.

  1. Klicken Sie auf Site > Sites verwalten.

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

  3. 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
    ECMAScript-Version wählen
  4. Um den Regelsatz anzupassen, können Sie in der Dropdown-Liste Konfigurationsdatei wählen und auf Konfigurationsdatei bearbeiten klicken. 

    JS Lint-Konfigurationsdatei bearbeiten
    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“
    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 Sie die Datei „.eslintrc.js“ in den Site-Einstellungen gar nicht verwenden, sucht Dreamweaver die Datei „.eslintrc.js“ in allen Verzeichnissen, die zum Stammordner führen.

    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“
Ausgabe-Bedienfeld und Linting-Symbol
Ausgabe-Bedienfeld und Linting-Symbol

Das Linting-Symbol in 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:

Mit dem Linting-Symbol in 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.

Dieses Werk unterliegt den Bedingungen der Creative Commons Attribution-Noncommercial-Share Alike 3.0 Unported License.  Twitter™- und Facebook-Beiträge fallen nicht unter die Bedingungen der Creative Commons-Lizenz.

Rechtliche Hinweise   |   Online-Datenschutzrichtlinie