JavaScript Code-Prüf-Programm gesucht

[cumulonimbus8]

Hallo!

Vielleicht hält mir gleich einer unter die Nase wie naiv ich wäre, aber ich suche ein Tool das ich mal als Gegenstück zum VBA-Editor in MS-Office verstände.

Ich habe einen Editor, werfe da Code rein und bekomme pure Syntaxfehler angezeigt (man vertippt sich in dem hochempfindlichen Spagetti nur zu gerne), ich kann den Code loslaufen lassen (zeilenweise) um Logikfehler zu finden.

Gibts so was? Dieses verfl. Trial-and-Error z.B. im PS-Pad mit dem aufrufenden HTML neben dem JS, das dauernde Wechseln zwischen beiden und nichts als geht oder geht nicht als ›Antwort‹, - das geht, und zwar mir schwerpunktmäßig auf den Keks.

Google verweist mich an Dinge wie FireBug u.a.m. aber nicht an solche der Marke Stand-Alone-Editor wie ich sie suche.

CN8

 

[black90]

Eclipse mit JSDT Plugin, IntelliJ idea, Visual Studio ?

Debug: http://www.youtube.com/watch?v=_uzSw_fb7NQ

 

[blackst0rm]

Lint is so ein Wekzeug.

 

[cumulonimbus8]

…geht noch ein wenig opulenter?

Ich suche einen stink-simplen Code-Tester, keine Entwicklungsumgebung für zig andere Sprachen.
PS-Pad kann ja auch mit der existenten Browser-Machine HTML parsen und anzeigen. Mehr will ich für ein Häufchen JS nicht haben.

CN8

PS: FreeWare wäre genehm.

 

[Backslash]

http://stackoverflow.com/questions/15679827/simple-way-to-check-validate-javascript-syntax

Jeder halbwegs vernünftige Editor sollte dir erlauben die genannten Tools zu integrieren.

 

[blackst0rm]

OWie gesagt Lint. Is nen Kommandozeilenwerkzeug. Wiemein Vorposter bereits sagte sollte jeder halbwegs anständige Editor das integrieren können. Gibt sicher auch ne Implementierung für JS. Einfach mal googlen. Ansonsten halt Eclipse bzw. Aptana. Basiert auf Eclipse is aber genau auf den ganzen Weblkrempel optimiert.

Tante Edith: ich hab das mal gegoogled

http://www.javascriptlint.com

Gibt da sogar nen webinterface in demdu das direktauf der seite machen kannst

 

[cumulonimbus8]

@Backslash

Jeder halbwegs vernünftige Editor sollte dir erlauben die genannten Tools zu integrieren.

Dann habe ich wohl relativ unvernünftige Editoren?
Welcher Editor, was für Ein-Zu-Integrierendes Etwas, wie zu integrieren?

@all:
Ich folge dem Vorschlag LINT (@blackst0rm: unsere Postings hatten sich überschnitten), stoße auf Meldungen wie veraltet, Kommandozeile… Zudem werde ich mit dem nicht warm was da im JS-Lint-Link zu finde ist. Ich will nichts irgendwie integrieren, ich brauch' ein Tool das mir bei der Fehlersuche hilft, optimal so oder besser wie ich das von VBA gewöhnt bin.


Also nochmals: wer Pahse5 kennt der könnte mir diesen auf die Frage: »Ich suche einen Editor mit dem ich HTML testen kann.« empfehlen. SyntayHighlighting genügt grobe Böcke zu sehen.
JS ist da komplexer, zickiger. Aber egal - ich suche ein mit Pahse5 (oder PS-Pad, oder…) vergleichbares komfortabeles, nicht irgendwie zu integrierendes, Tool für JS das mir möglichst grobe Syntaxböcke meldet.
alert("aaa="+a+"eded"); geht alert("aaa=" + a + "eded"); legt sich allein wegen der Leerzeichen locker auf den Bauch; var ottokar=5; und var ottokar = 5; sind aber beide erlaubt, und wer Leerzeichen zur Strukturierung für die Augen gewohnt ist kriegt den Pips wenn er sich da mal vertut!

Das Wunder, etwas wie VBA zu bekommen, das einigermaßen brauchbar Code Zeilenweise zu verfolgen erlaubt, und beim Tippen auch ein bisschen mit Strukturiert (Variablennamen z.B. → Ottokar fällt auf wenn OttoKar definiert ist), darauf hoffe ich schon gar nicht mehr. Nur auf eine simple Unfallversicherung.

CN8

 

[blackst0rm]

Dann aptana Studio

 

[Backslash]

​http://www.jetbrains.com/webstorm/

 

[T0a5tbr0t]

Du suchst verschiedene Dinge:

Das anzeigen von groben Syntaxfehlern im Editor können viele Editoren / IDE's mit JavaScript Unterstützung. Das kommt aber schnell an seine grenzen, da Javascript eine sehr dynamische Scriptsprache ist.

Dann gibt es eben Lint-tools. Die bekanntesten sind da JSLint und JSHint. Das letztere würde ich empfehlen, da es sich aktuell schneller entwickelt bzw. ne größere Community dahinter steckt.
Diese Linter gucken recht tief in den Code und können auch vor bekannten Fehlern warnen und helfen bei Best Practices. Es gibt IDE's welche diese integriert haben, allerdings lassen viele Entwickler die Linter per Kommandozeile und Build / Testprozessen über den Code laufen, denn damit ist man einfach flexibler. Grunt ist da z.B. als Tool recht bekannt um Build-tasks zu schreiben (läuft mit Nodejs, ist also auch alles JS)

Und dann hast du im ersten Post auch noch nen Debugger beschrieben. Nimm da einfach den Browser. Es gibt IDE's, welche Browser remote debuggen können, allerdings fand ich das immer umständlich. Einfach ein "debugger;" in den Code stecken und Seite im Browser neu laden.
Guck dir mal Chromes Debugger und Entwicklertools genauer an. Ich kenne keine IDE, welche da irgendwie ran kommt. Man kann da Zeile für Zeile den Code auseinander nehmen und Werte beliebig auslesen und sogar Manipulieren. Man muss sich da einfach nen Vernünftigen Workflow bauen.

 

[cumulonimbus8]

bzgl. Aptana: ich brauche keinen 146MB-Brüller für ein bisschen Codeprüfung!!
Und das Bild bei WebStorm lässt mich alles sehen, nur nicht das was ich mir erhoffe…

Du suchst verschiedene Dinge:

Tue ich das? Wäre mir neu. In Word Alt+F11 und ich sehe das vor mir was ich will.
Eine JS-Datei in PS-Pad eingeworfen und ich bin fast so weit (Sysntay-Highlighting), nur kann ich die dort nicht direkt parsen…

Das anzeigen von groben Syntaxfehlern im Editor können viele Editoren / IDE's mit JavaScript Unterstützung. Das kommt aber schnell an seine grenzen, da Javascript eine sehr dynamische Scriptsprache ist.

So dynamisch kanns nicht sein, dass eine JS nun ausgeführt wird oder eben nicht, dass der Parser, wenn ich sie von HTML aus anwerfe - was einfach nur mechanisch bremst und was das ist was ich losbekommen will - merkt, das was faul ist. Ergo muss er das wissen. Ergo kann er es angeben. Mehr Wunder verlange ich nicht.

Und dann hast du im ersten Post auch noch nen Debugger beschrieben. Nimm da einfach den Browser.

Der liefert mir nur das was ich so auch mit weniger Klickerei im PS-Pad erlebe: geht oder geht nicht. Debuggen nenne ich das Prüfen auf logische und physische Fehler. Logische Dummheit ist meine Sache, die Phsysis aber, da soll mir die Maschine helfen.

VBA z.B. stoße ich als SUB an - und wenns knallt zeigt mir das Ding an wo es knallt. Im selben Fenster. Wo ich mich grob in der Syntax vertippt habe, wo eine Variable falsch getippt ist.
Und dafür sollte es nicht einen simplen StandAlone-Editor geben der das bisschen kann? Ich brauche keine IDE mit Unmengen für mich völlig nutzloser Dinge drin.

Programm öffnen, JS-File reinwerfen, klarsehen, starten, noch klarer sehen. Das wäre alles was das HErz begehrt. Keien Dateibäume links, keine Browserintegrationen, kein direkts Aufrufen des Browsers.
Und eben mechanisch einfacher. als PS-Pad: HTML-File. F10 zum loslaufen lassen. JS bockt. F10 um das Fenster wegzubekommen [alert() erst zuklicken…]. Rüber nach JS-File. Raten wo es klemmt, ein alert() mag helfen. Speichern (!). Rüber zu HTLM, F10… Das bremst tierisch! Diese Zeit und Umstände will ich vereinfacht wissen.

CN8

 

[Daaron]

bzgl. Aptana: ich brauche keinen 146MB-Brüller für ein bisschen Codeprüfung!!

Programmierst du auf einer Raspberry Pi oder einem PC aus den späten 90ern? Ein einzelner Browsertab belegt im Zweifel mehr RAM, und dein Browsercache mehr Festplatte...
Eclipse mit Aptana-Plugin ist toll und super-mächtig. Dass es dabei etwas größer ist... na und? Das mag vor 10-15 Jahren mal ein Problem gewesen sein.

So dynamisch kanns nicht sein, dass eine JS nun ausgeführt wird oder eben nicht, dass der Parser, wenn ich sie von HTML aus anwerfe - was einfach nur mechanisch bremst und was das ist was ich losbekommen will - merkt, das was faul ist. Ergo muss er das wissen. Ergo kann er es angeben. Mehr Wunder verlange ich nicht.

Doch, JS ist absolut dynamisch. Du hast z.B. keine starke Typisierung. Dieselbe Variable kann erst ein Boolean sein, im nächsten Moment referenziert sie ein DOM-Element und im dritten Fall ist sie plötzlich z.B. ein Mootools-Objekt. Eine Funktion, die du in Dokument A verwendest, kann vorher erst zur Laufzeit (z.B. über Lazy Loading) via die Dokumente B & C überhaupt erst erstellt worden sein.

VBA z.B. stoße ich als SUB an - und wenns knallt zeigt mir das Ding an wo es knallt. Im selben Fenster. Wo ich mich grob in der Syntax vertippt habe, wo eine Variable falsch getippt ist.

Jede bessere IDE bietet dir Autocompleter für JS... aber durch die schwache Typisierung kann man hier eh nie sicher sein, dass die Schreibweise nicht beabsichtigt ist.

Programm öffnen, JS-File reinwerfen, klarsehen, starten, noch klarer sehen. Das wäre alles was das HErz begehrt. Keien Dateibäume links, keine Browserintegrationen, kein direkts Aufrufen des Browsers.

Der häufigste Anwendungsfall für JS ist nun einmal DOM-Manipulation. Dafür muss erst einmal der DOM existieren -> du brauchst irgend eine Form von HTML-Verarbeitung.
Dann muss diese Verarbeitung auch noch Ladegeschwindigkeiten und absichtliches Deferred Loading in Betracht ziehen können.
-> du brauchst einen Browser

Nun... außer natürlich, du schreibst für Node.JS, dann gelten andere Regeln.

 

[blackst0rm]

Google doch einfach mal nach JSLint+PSPad. Ich werd hoer jetzt keine Link posten um deine Suchkompetenz zu fördern.

 

[T0a5tbr0t]

Für Webtechnologien gibt es eben keine "fertige" Entwicklungsumgebung... das hat eben seine Vor und Nachteile. Und man muss letztendlich im Browser entwickeln, denn da soll der Kram am Ende laufen.
Bei größeren Javascript / Web Anwendungen hat man immer einen Test / Build-prozess der einem diese Kleinigkeiten abnimmt, aber es gibt da eben keinen "fertigen" oder einzig richtigen Weg. Und das geht auch nicht, da die Bandbreite von Technologien und Möglichkeiten zu groß ist.
Ich hatte im letzten Post schon mal Grunt erwähnt. Hier ist ne (sehr kleine) Liste von "Build Tasks", welche man damit nutzen kann. Da sind Linter, Cross-Compiler, Minifier, Unit-Tester, kleine Web Server usw. dabei. Man muss davon nichts nutzen, kann es aber
Wenn du keine Lust auf hin-und-her klicken hast, dann setzt nen kleinen Webserver mit Livereload auf. Schreibt Testbaren Code, bewerfe den Tests und du siehst die kleinsten Fehler sofort. Das geht alles extrem automatisiert, hängt aber auch von der Disziplin vom Entwickler ab. Und man sollte keine Angst vor der Kommandozeile haben. Dagegen ist man mit IDE's immer eingeschränkt.

 

[DasBoeseLebt]

Ach, eigentlich wurde schon alles gesagt

 

[cumulonimbus8]

@Daaron
Du musst schon mir überlassen ob mir 4,5MB gezipter PS-Pad mit ein paar Zusätzen dabei genügen oder ich mir ein über 140MB großes Tool anlache. Nur als Syntaxfehlermelder ist mir das einfach eine Nummer zu überzogen. →

@blackst0rm
Dumme Sache, aber in dem oben genannten ZIP-fil für PS-Pad fand ich, ohne mich an den Namen zu erinnern einen «PsPad JS Lint-3.6.1 Verifyer» Aktuell scheint ja der 3.7.1 zu sein - ich gelobe mal nach der Anleitung zu sehen inwiefern ich diese Zugabe vielleicht falsch oder gar nicht benutzt habe.

@T0a5tbr0t
Ich habe genau genommen nichts von dem verstanden was du mir sagen wolltest.
Das kann daran liegen, dass ich mal Programmieren gelernt habe. PAPL oder Struktogramm, dann kommt das Umsetzen in die Syntax. Stelle dir also vor, da sitzt eine Dumme Nuss wie ich vor einem Klartexteditor in dem eine hübsche Codewüste offen ist. Nein, ich muss mich korrigieren - deren zwei. Die HTML-Seite die das in Betrieb setzt und die JS-Datei mit der Arbeitsmechanik. Das Jonglieren um zu Editieren und zu testen hatte ich oben beschrieben; völlig unkomfortabel, aus meiner Sicht.
SyntaxHighLighter führen das Auge, aber PS-Pad ist unfähig grobe Böcke in der Syntax bzw. im Codeablauf zu melden. Wo wurde nur das schließende </td> verschlampt, wo wurde auch diesem </td> ungewollt ein <td>, wo ging ein " verloren oder ist zu viel, wo eine < oder >? Das müsste mir ein Prüftool sagen.
Und JS scheint mir da dank bestimmter Zwänge noch einfacher zu handhaben. Eine Variable Message die zu Messsage wurde, eine nicht deklarierte Meldung an ihrer Stelle - das sind Dinge die massiv bremsen weil mans nicht sofort sieht. Dabei brauche ich Hilfe, nicht beim Pläne schmieden. Das habe ich längst. Was nicht läuft muss erkennen, dass und eben auch wo es scheitert. Kann so schwer sien ein Tool zu empfehlen das diese Auskunft gibt?

@DasBoeseLebt
Nichts wurde gesagt das meine Frage beantwortet. Wenn die Antwort hieße, dass es so eine kleine Lösung nicht gibt ist auch das eine Antwort. Falls diese es ist steht sie noch aus.

CN8


PS:
Kein Tool kann mir helfen wenn ich beim Kopieren alten Codes eine Zeile verschlampe. Kein Tool mir erklären warum Werte plötzlich verrückt spielen. Allein bescheidenes zeilenweises Ablaufen hätte direkt aufgezeigt wo da was falsch berechnet wird, wo eine Bedingung ›platzt‹. In VBA ein Klacks, mich hat das anderthalb Stunden und Flüche über JS gekostet.
Welches Tool explizit kann genau das so einfach wie VBA vormacht - Aufrufen, Code rein, starten & verfolgen?

 

[Daaron]

KEINES... weil JS eben nicht VBA ist.

Und du wirst nicht drum herum kommen, HTML eben erst einmal komplett durch den W3C-Validator laufen zu lassen.... wobei selbst Notepad++ einen vernünftigen HTML Highlighter hat... und natürlich ein fehlender schließender </td> eh kein Problem darstellt.

 

[T0a5tbr0t]

Schau dich doch einfach nach ein paar guten Editoren um. Hier wurden schon viele genannt und Google wird den Rest für dich auflisten. HTML lässt sich einfach Validieren und gute IDE's können da schon helfen, allerdings ist HTML meistens das Endprodukt und nicht irgendwo statisch vorhanden. Und die JS Editoren werden auch immer schlauer, man muss nur den passenden finden.
Was ich bei JS rüberbringen wollte: Man muss man in den Browser und testen. Wenn man mit den Entwicklertools der Browser umgehen kann ist das Fehler finden nicht schwer. Aber ohne geht es nicht, denn die Javascript Implementationen sitzen in den Browsern.
Und ein sauber strukturierter und testbarer Code wird nicht durch Statische Code-Analysen ersetzt. Bei JS ist Test-driven development bei komplexeren Programmen z.B. Pflicht. Es gibt keine größere JS Bibliothek ohne haufenweise Unit-Tests im Repository. Dadurch fallen grobe Fehler automatisch auf. Aber das kann eben kein Programm von alleine alles wissen. Ist bei allen Skript-artigen-sprachen immer das "Problem".

 

[cumulonimbus8]

@Daaron: der HTML-Code ist einwandfrei. Es geht um JS…

@T0a5tbr0t

Schau dich doch einfach nach ein paar guten Editoren um. Hier wurden schon viele genannt und Google wird den Rest für dich auflisten.

Wenn ich mich durch Google-Suchen hangeln wollte würde ich nicht im Forum fragen.
Und ich sehe hier leidlich wenige bis gar keine Editoren genannt die ich unter Editoren verstände. IDEs sind so wenig Editoren wie eine Office-Suite gegenüber NotePad, so wenig wie PS-Pad gegenüber FlashCS6 (wenn ich nur ActionScript sichten wollte).

«KEINES... weil JS eben nicht VBA ist.»
Ach nein… Programmcode ist Programmcode, Ausführungsregeln desselben sind Ausführungsregeln desselben. Ob das ActionScript ist, VBA, WSH, JS, HTML. Es braucht nur die nötige Engine die es parst und die Fehler meldet. Mehr Wunder nicht!


Das angesprochen JSLint ist der größte {zensiert} den ich je erlebt habe!
Da passt es ihm nicht, dass ich eine var-Zuweisung in Spalte 2 statt Spalte 1 stehen habe, da will es Variablenzuweisung in Spalte 3 statt 2 eingerückt haben, da passen ihm Einrückung in einem for-Rahmen nicht - um nach 26% bei 258 Codezeilen mit reichlich strukturellen Leerzeilen und Kommentaren den Bettel hinzuwerfen. Dass ihm Code wie «··Otto=1;» nicht passt sondern es bitte «···Otto·=·1;» heißen muss lässt das Fass überlaufen. Ich sehe keine Knöpfchen dem Dings zu sagen einfach mal auf die Optik zu pfeifen und die richtigen Brüller zu liefern. (Es ist so dumm eine Variable, mehr Array, anzumeckern wenn ich dies nur lokal in eine function brauche als nicht-global anzupfeifen…)
Kurz - das Ding hilft mir nicht die Bohne innerhalb 200 Codezeilen!!!

Übrigens - «WebStorm» → ›Free 30-day trial for Windows‹ = ungewünscht.


CN8

 

[carom]

Welches Tool explizit kann genau das so einfach wie VBA vormacht - Aufrufen, Code rein, starten & verfolgen?

Wie Daaron schon sagte, gängige Browser können das ausgezeichnet.

Du solltest zunächst mal deine eigenen Anforderungen verstehen. Du sträubst dich gegen alles, was nicht nach "simplem Editor" riecht, willst aber dynamische Codeanalyse haben. Das bietet dir kein Editor, denn ohne Javascript-Runtime im Hintergrund wird das nichts. Was dir ein Editor mit der ein oder anderen Erweiterung hingegen geben kann sind Syntax-Checks und oben drauf von mir aus auch das Erkennen undefinierter Bezeichner im selben Dokument. Hin- und her wechseln wirst du folglich so oder müssen. Dein Verweis auf den simplen Workflow in Word/VBA ändert an der Sache auch nichts, das ist eher IDE als Editor. Also offensichtlich etwas, was du bei Javascript nicht haben möchtest.

edit: ich bin kein Frontend-Webentwickler, für Ausflüge dorthin habe ich jedoch immer Sublime Text 3 + SublimeLinter benutzt. Aber wenn du schon keine Lust darauf hast, wenigstens etwas Zeit zu investieren (JSLint oben....), dann wird dir dieser Tipp auch nichts nützen.