HTML Tidy in den Atom-Editor integrieren

Das Ganze geschieht in zwei Schritten:

1. Zunächst installiert man das Binary auf den Rechner und fügt den Binary-Pfad in die $PATH Umgebungsvariable.

2. Danach installiert man das Atom Package linter-tidy als Plugin in den Atom-Editor.

1. HTML Tidy installieren

Die Tidy-Binarys gibt es für Windows, Mac und Linux zum runterladen.

http://binaries.html-tidy.org/

Weitere Infos zu tidy finden sich unter http://www.html-tidy.org/            Im Beispiel hier für einen Windows 10 Rechner.

http://binaries.html-tidy.org/binaries/tidy-5.2.0/tidy-5.2.0-win32.zip

Das tidy-5.2.0-win32.zip runterladen und auspacken (die 64Bit Variante hat anscheind einen Fehler) und den Pfad, in diesem Fall

C:\hptmp\programme\tidy-5.2.0-win32\bin

in die $PATH Umgebungsvariable hinzufügen. Systemsteuerung/Sytem/Erweiterte Systemeinstellungen/Umgebungsvariablen. Die Variable PATH im Fenster markieren und Bearbeiten klicken. Mit Neu den kompletten Pfad hinzufügen. Abschließend alle Fenster per OK schließen. Ein kurzer Test mit der Windows Kommandozeile cmd.

>which tidy
/c/hptmp/programme/tidy-5.2.0-win32/bin/tidy

tidy kann somit direkt auf eine bestehende *.html Datei, zur Analyse von der Kommandozeile aufgerufen werden.

>tidy index.html
line 1 column 1 - Warning: missing  declaration
line 1 column 1 - Warning: plain text isn't allowed in elements
line 1 column 1 - Info: previously mentioned
line 1 column 1 - Warning: inserting implicit
line 1 column 1 - Warning: inserting missing 'title' element
Info: Document content looks like HTML5
Tidy found 4 warnings and 0 errors!

<!DOCTYPE html>
<html>
<head>
<meta name="generator" content=
"HTML Tidy for HTML5 for Windows version 5.2.0">
<title></title>
</head>
<body>
localhorst tidy test
</body>
</html>
[...]

 

2. linter-tidy als Plugin bzw. Package in den Atom-Editor installieren.

https://atom.io/packages/linter-tidy

In Atom unter File-> Settings -> +Install und der Eingabe von „linter-tidy“ in das Suchfeld, anschließendem Klick auf Packages und wiederum Klick auf Install, wird das Plugin mit seinen Abhängigkeiten installiert.

screenshot atom settings
screenshot atom settings

Eventuell ist ein Neustart von Atom nötig. Siehe die beiden folgenden Screenshots mit und ohne angezeigtem Syntaxfehler im Atom-Editor.

screenshot atom mit syntaxfehler
screenshot atom mit syntaxfehler
screenshot atom ohne syntaxfehler
screenshot atom ohne syntaxfehler

In ähnlicher Weise sollte dies auch für Mac und Linux Syteme gelten.