Wie kann ich JavaScript-Code mithilfe der Befehlszeile verschönern?


100

Ich schreibe ein Batch-Skript, um JavaScript-Code zu verschönern. Es muss sowohl unter Windows als auch unter Linux funktionieren .

Wie kann ich JavaScript-Code mit den Befehlszeilentools verschönern?


Mein Pretty Diff-Tool ist vollständig in JavaScript geschrieben, sodass es auf allen Betriebssystemen gleich gut funktioniert. Es unterstützt die Verschönerung und Minimierung von JavaScript, CSS, jeder Markup-Sprache, die Trennzeichen im XML-Stil verwendet, einschließlich HTML. prettydiff.com/?m=beautify

Antworten:


64

Wählen Sie zunächst Ihren bevorzugten Javascript-basierten Pretty Print / Beautifier aus. Ich bevorzuge die beihttp://jsbeautifier.org/ , weil ich es zuerst gefunden habe. Lädt die Datei https://github.com/beautify-web/js-beautify/blob/master/js/lib/beautify.js herunter

Zweitens: Laden Sie die Java-basierte Javascript-Engine der Mozilla-Gruppe, Rhino , herunter und installieren Sie sie . "Installieren" ist etwas irreführend; Laden Sie die Zip-Datei herunter, extrahieren Sie alles, platzieren Sie js.jar in Ihrem Java-Klassenpfad (oder Library / Java / Extensions unter OS X). Sie können dann Skripte mit einem ähnlichen Aufruf ausführen

java -cp js.jar org.mozilla.javascript.tools.shell.Main name-of-script.js

Verwenden Sie den Pretty Print / Beautifier aus Schritt 1, um ein kleines Shell-Skript zu schreiben, das Ihre Javascript-Datei einliest und ab Schritt 1 durch den Pretty Print / Beautifier führt. Beispielsweise

//original code    
(function() { ... js_beautify code ... }());

//new code
print(global.js_beautify(readFile(arguments[0])));

Rhino bietet Javascript einige zusätzliche nützliche Funktionen, die in einem Browserkontext nicht unbedingt sinnvoll sind, aber in einem Konsolenkontext. Die Funktion print macht das, was Sie erwarten, und druckt eine Zeichenfolge aus. Die Funktion readFile akzeptiert eine Dateipfadzeichenfolge als Argument und gibt den Inhalt dieser Datei zurück.

Sie würden das oben genannte so etwas wie aufrufen

java -cp js.jar org.mozilla.javascript.tools.shell.Main beautify.js file-to-pp.js

Sie können Java und Javascript in Ihren Rhino-Skripten mischen und abgleichen. Wenn Sie also ein wenig Java kennen, sollte es nicht allzu schwierig sein, dies auch mit Text-Streams zum Laufen zu bringen.


3
Der Link, den Sie gegeben haben, ist defekt. Es sollte dieser sein, denke ich, jsbeautifier.org
Sinan

2
Wie ich es gemacht habe :: ~ $ sudo apt-get install libv8-dev libv8-2.2.18: ~ $ cd einars-js-beautify-f90ce72 / v8: ~ $ g ++ -o jsbeautify jsbeautify.cpp -lv8 -Llib -lpthread Es funktioniert einfach. Vielen Dank an Einar Lielmanis und alle Beteiligten!
6еров

1
Dies scheint ein bewegliches Ziel zu sein. Die Informationen auf der jsbeautifier-Site besagen, dass sie in Python geschrieben sind.
Seth

Update für cmdline-Benutzer, das folgende Repo hat einfach zu installierende eigenständige Befehlszeilen-Tools für hübsches Drucken von js: github.com/einars/js-beautify.git
drhodes

Verwenden Sie einen modernen JS-Ansatz mit Grunt: stackoverflow.com/questions/18985/…
Tchakabam

33

UPDATE April 2014 :

Der Verschönerer wurde neu geschrieben, seit ich 2010 darauf geantwortet habe. Es gibt jetzt ein Python-Modul, ein npm-Paket für nodejs, und die JAR-Datei ist verschwunden. Bitte lesen Sie die Projektseite auf github.com .

Python-Stil:

 $ pip install jsbeautifier

NPM-Stil:

 $ npm -g install js-beautify

um es zu benutzen:

 $ js-beautify file.js

Ursprüngliche Antwort

Hinzufügen zur Antwort von @Alan Storm

Der auf http://jsbeautifier.org/ basierende Befehlszeilen-Verschönerer ist etwas einfacher zu verwenden, da er jetzt (alternativ) auf der V8-Javascript-Engine (C ++ - Code) anstelle von Rhino (Java-basierte JS-Engine, verpackt) basiert als "js.jar"). Sie können also V8 anstelle von Nashorn verwenden.

Wie benutzt man:

Laden Sie die Zip-Datei jsbeautifier.org von http://github.com/einars/js-beautify/zipball/master herunter

(Dies ist eine Download-URL, die mit einer Zip-Datei wie http://download.github.com/einars-js-beautify-10384df.zip verknüpft ist. )

alt (funktioniert nicht mehr, JAR-Datei ist weg)

  java -jar js.jar  name-of-script.js

neu (alternativ)

Installieren / Kompilieren von v8 lib FROM svn, siehe v8 / README.txt in der oben genannten Zip-Datei

  ./jsbeautify somefile.js

-hat etwas andere Befehlszeilenoptionen als die Rhino-Version,

-und funktioniert hervorragend in Eclipse, wenn es als "externes Tool" konfiguriert ist.


3
Oder wenn Sie Python gegenüber Version 8 bevorzugen, gibt es jetzt auch ein Python-Modul.
Keturn

1
Das npm-Paket heißt js-
beautify

30

Wenn Sie nodejs verwenden, versuchen Sie es mit uglify-js

Unter Linux oder Mac können Sie uglify installieren, vorausgesetzt, Sie haben bereits nodejs installiert mit:

sudo npm install -g uglify-js

Und dann erhalten Sie die Optionen:

uglifyjs -h

Wenn ich also eine Quelldatei habe, foo.jsdie so aussieht:

// foo.js -- minified
function foo(bar,baz){console.log("something something");return true;}

Ich kann es so verschönern:

uglifyjs foo.js --beautify --output cutefoo.js

uglifyVerwendet standardmäßig Leerzeichen für Einrückungen. Wenn ich also die Einrückung mit 4 Leerzeichen in Tabulatoren konvertieren möchte, kann ich sie ausführen, mit unexpandder Ubuntu 12.04 geliefert wird:

unexpand --tabs=4 cutefoo.js > cuterfoo.js

Oder Sie können alles auf einmal erledigen:

uglifyjs foo.js --beautify | unexpand --tabs=4 > cutestfoo.js

Mehr über nicht expandieren erfahren Sie hier

Nach all dem habe ich eine Datei, die so aussieht:

function foo(bar, baz) {
    console.log("something something");
    return true;
}

Update 2016-06-07

Es scheint, dass der Betreuer von uglify-js jetzt an Version 2 arbeitet, obwohl die Installation dieselbe ist.


4
Dies ist die richtige Antwort für einen Befehlszeilen-JavaScript-Code verschönern.
Bitek

uglifyjs -bbewirkt viel mehr als nur das Einrücken von Einrückungen, es ordnet den Code neu und schreibt ihn neu, möglicherweise aus Gründen der Effizienz. Das wollte ich nicht. Ich habe eine ältere Version in Ubuntu 14.04 verwendet.
Sam Watkins

Könnten Sie bitte etwas näher erläutern, wie uglifyjs -bCode neu angeordnet und neu geschrieben wird?
Erapert

11

Auf Ubuntu LTS

$ sudo apt install jsbeautifier
$ js-beautify ugly.js > beautiful.js

1
Die beste Antwort im Moment. Für Inplace verschönern verwendenjs-beautify -o file.js file.js
Petr Javorik

3

In der Konsole können Sie Artistic Style (auch bekannt als AStyle) mit verwenden --mode=java.
Es funktioniert hervorragend und ist kostenlos, Open Source und plattformübergreifend (Linux, Mac OS X, Windows).


2

Verwenden Sie die moderne JavaScript-Methode:

Verwenden Sie Grunt in Kombination mit dem jsbeautifier-Plugin für Grunt

Mit npm können Sie alles einfach in Ihre Entwicklungsumgebung installieren .

Alles, was Sie benötigen, ist die Einrichtung einer Gruntfile.js mit den entsprechenden Aufgaben, die auch die Verkettung von Dateien, Flusen, Hässlichen, Minimieren usw. umfassen und den Befehl grunt ausführen kann.


2

Ich kann der akzeptierten Antwort keinen Kommentar hinzufügen, daher wird ein Beitrag angezeigt, der eigentlich gar nicht hätte existieren dürfen.

Grundsätzlich brauchte ich auch einen Javascript-Verschönerer in einem Java-Code und zu meiner Überraschung ist keiner verfügbar, soweit ich ihn finden konnte. Also habe ich selbst eine codiert, die vollständig auf der akzeptierten Antwort basiert (sie umschließt das Skript jsbeautifier.org beautifier .js, kann aber über Java oder die Befehlszeile aufgerufen werden).

Der Code befindet sich unter https://github.com/belgampaul/JsBeautifier

Ich habe Nashorn und Beautifier.js verwendet

VERWENDUNG von der Konsole: Java -jar jsbeautifier.jar Skripteinzug

Beispiel: java -jar jsbeautifier.jar "Funktion ff () {return;}" 2

VERWENDUNG von Java-Code: public static String jsBeautify (String jsCode, int indentSize)

Sie können den Code gerne erweitern. In meinem Fall brauchte ich nur den Einzug, damit ich das generierte Javascript während der Entwicklung überprüfen konnte.

In der Hoffnung, dass Sie dadurch Zeit in Ihrem Projekt sparen.


1

Ich habe einen Artikel geschrieben, in dem erklärt wird, wie ein in JavaScript implementierter Befehlszeilen-JavaScript-Verschönerer in weniger als 5 Minuten erstellt wird. YMMV.

  1. Laden Sie das neueste stabile Rhino herunter und packen Sie es irgendwo aus, z. B. ~ / dev / javascript / rhino
  2. Laden Sie beamenify.js herunter, auf das von jsbeautifier.org verwiesen wird, und kopieren Sie es dann irgendwohin, z. B. ~ / dev / javascript / bin / cli-beautifier.js
  3. Fügen Sie dies am Ende von beautify.js hinzu (unter Verwendung einiger zusätzlicher Eigenschaften der obersten Ebene für JavaScript):

    // Run the beautifier on the file passed as the first argument.
    print( j23s_beautify( readFile( arguments[0] )));
  4. Kopieren Sie den folgenden Code in eine ausführbare Datei, z. B. ~ / dev / javascript / bin / jsbeautifier.sh, und fügen Sie ihn ein:

    #!/bin/sh
    java -cp ~/dev/javascript/rhino/js.jar org.mozilla.javascript.tools.shell.Main ~/dev/web/javascript/bin/cli-beautifier.js $*
  5. (optional) Fügen Sie den Ordner mit jsbeautifier.js zu PATH hinzu oder verschieben Sie ihn in einen bereits vorhandenen Ordner.


1

Ich glaube, als Sie nach dem Kommandozeilen-Tool gefragt haben, wollten Sie einfach alle Ihre JS-Dateien im Batch verschönern.

In diesem Fall kann Intellij IDEA (getestet mit 11.5) dies tun.

Sie müssen nur eine Ihrer Projektdateien auswählen und im Hauptmenü der IDE "Code" -> "Code neu formatieren" auswählen. Wählen Sie dann im Dialogfeld "Alle Dateien im Verzeichnis ..." und drücken Sie die Eingabetaste. Stellen Sie einfach sicher, dass Sie genügend Speicher für die JVM reserviert haben.

Durch die Nutzung unserer Website bestätigen Sie, dass Sie unsere Cookie-Richtlinie und Datenschutzrichtlinie gelesen und verstanden haben.
Licensed under cc by-sa 3.0 with attribution required.