Jak mogę upiększyć kod JavaScript za pomocą wiersza poleceń?

101

Piszę skrypt wsadowy, aby upiększyć kod JavaScript. Musi działać zarówno w systemie Windows, jak i Linux .

Jak mogę upiększyć kod JavaScript za pomocą narzędzi wiersza poleceń?

grom
źródło
Moje narzędzie Pretty Diff jest napisane w całości w języku JavaScript, więc działa równie dobrze we wszystkich systemach operacyjnych. Obsługuje upiększanie i minifikację JavaScript, CSS, dowolnego języka znaczników używającego ograniczników w stylu XML, w tym HTML. prettydiff.com/?m=beautify

Odpowiedzi:

64

Najpierw wybierz swój ulubiony Pretty Print / Beautifier oparty na JavaScript. Wolę ten ohttp://jsbeautifier.org/ , ponieważ to właśnie znalazłem jako pierwsze. Pobiera swój plik https://github.com/beautify-web/js-beautify/blob/master/js/lib/beautify.js

Po drugie, pobierz i zainstaluj oparty na Javie silnik Javascript grupy Mozilla, Rhino . „Instalacja” jest nieco myląca; Pobierz plik zip, rozpakuj wszystko, umieść js.jar w ścieżce klas Java (lub Library / Java / Extensions w systemie OS X). Następnie możesz uruchamiać skrypty z wywołaniem podobnym do tego

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

Użyj Pretty Print / Beautifier z kroku 1, aby napisać mały skrypt powłoki, który odczyta twój plik javascript i uruchomi go przez Pretty Print / Beautifier od kroku pierwszego. Na przykład

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

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

Rhino daje javascriptowi kilka dodatkowych przydatnych funkcji, które niekoniecznie mają sens w kontekście przeglądarki, ale w kontekście konsoli. Funkcja print robi to, czego można się spodziewać i wypisuje ciąg. Funkcja readFile akceptuje ciąg ścieżki pliku jako argument i zwraca zawartość tego pliku.

Możesz wywołać powyższe coś w stylu

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

Możesz mieszać i dopasowywać Javascript i Javascript w swoich skryptach uruchamiania Rhino, więc jeśli znasz trochę Javę, nie powinno być zbyt trudno uruchomić to również ze strumieniami tekstowymi.

Alan Storm
źródło
3
link, który podałeś jest uszkodzony, myślę, że powinien to być ten, jsbeautifier.org
Sinan
2
Jak to zrobiłem:: ~ $ sudo apt-get install libv8-dev libv8-2.2.18: ~ $ cd einars-js-beautify-f90ce72 / v8: ~ $ g ++ -o jsbeautify jsbeautify.cpp -lv8 -Llib -lpthread Po prostu działa. Podziękowania dla Einara Lielmanisa i wszystkich zaangażowanych!
Беров
1
To wydaje się być ruchomym celem. Teraz informacje na stronie jsbeautifier mówią, że jest napisane w Pythonie.
seth
aktualizacja dla użytkowników CmdLine następujące repo jest łatwy w instalacji samodzielnych narzędzi wiersza polecenia dla ładnych js drukowania: github.com/einars/js-beautify.git
drhodes
Użyj nowoczesnego podejścia JS, używając Grunt: stackoverflow.com/questions/18985/ ...
Tchakabam
33

UPDATE kwiecień 2014 :

Beautifier został przepisany od czasu, gdy odpowiedziałem na to w 2010 roku. Jest tam teraz moduł Pythona, pakiet npm dla nodejs, a plik jar zniknął. Przeczytaj stronę projektu na github.com .

Styl Pythona:

 $ pip install jsbeautifier

Styl NPM:

 $ npm -g install js-beautify

aby go użyć:

 $ js-beautify file.js

Oryginalna odpowiedź

Dodawanie do odpowiedzi @Alan Storm

narzędzie do upiększania wiersza poleceń oparte na http://jsbeautifier.org/ stało się trochę łatwiejsze w użyciu, ponieważ jest teraz (alternatywnie) oparte na silniku javascript V8 (kod c ++) zamiast rhino (silnik JS oparty na Javie, w pakiecie jako „js.jar”). Możesz więc użyć V8 zamiast nosorożca.

Jak używać:

pobierz plik zip jsbeautifier.org ze strony http://github.com/einars/js-beautify/zipball/master

(jest to adres URL pobierania powiązany z plikiem zip, takim jak http://download.github.com/einars-js-beautify-10384df.zip )

stary (już nie działa, plik jar zniknął)

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

nowy (alternatywny)

zainstaluj / skompiluj v8 lib Z svn, zobacz v8 / README.txt w wyżej wymienionym pliku zip

  ./jsbeautify somefile.js

-ma nieco inne opcje linii poleceń niż wersja rhino,

-i działa świetnie w Eclipse, gdy jest skonfigurowany jako „narzędzie zewnętrzne”

knb
źródło
3
Lub jeśli wolisz Pythona od v8, jest tam również moduł Pythona.
keturn
1
Pakiet npm nazywa się js-beautify
brafdlog
30

Jeśli używasz nodejs, spróbuj uglify-js

W systemie Linux lub Mac, zakładając, że masz już zainstalowany nodejs, możesz zainstalować uglify za pomocą:

sudo npm install -g uglify-js

A następnie uzyskaj opcje:

uglifyjs -h

Więc jeśli mam plik źródłowy, foo.jsktóry wygląda tak:

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

Mogę to upiększyć tak:

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

uglifydomyślnie używa spacji do wcięć, więc jeśli chcę przekonwertować wcięcie z 4 spacjami na zakładki, mogę je uruchomić, przez unexpandktóre Ubuntu 12.04 jest dostarczany:

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

Lub możesz to wszystko zrobić za jednym razem:

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

Możesz dowiedzieć się więcej o nierozszerzaniu tutaj

więc po tym wszystkim kończę z plikiem, który wygląda tak:

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

aktualizacja 2016-06-07

Wygląda na to, że opiekun uglify-js pracuje teraz nad wersją 2, chociaż instalacja przebiega tak samo.

erapert
źródło
4
To jest poprawna odpowiedź na beautifer kodu JavaScript wiersza poleceń.
bitek
uglifyjs -brobi o wiele więcej niż tylko naprawianie wcięć, przestawia i przepisuje kod, być może w celu zwiększenia wydajności. Nie tego chciałem. Używałem starszej wersji, w Ubuntu 14.04.
Sam Watkins
Czy mógłbyś wyjaśnić trochę więcej, w jaki sposób uglifyjs -bprzestawia i przepisuje kod?
erapert
11

W systemie Ubuntu LTS

$ sudo apt install jsbeautifier
$ js-beautify ugly.js > beautiful.js
Serge Stroobandt
źródło
1
Najlepsza odpowiedź w tej chwili. Do upiększania w miejscujs-beautify -o file.js file.js
Petr Javorik
3

W konsoli możesz używać stylu artystycznego (aka AStyle) z --mode=java.
Działa świetnie i jest darmowy, open source i wieloplatformowy (Linux, Mac OS X, Windows).

tmaric
źródło
2

Użyj nowoczesnego sposobu JavaScript:

Użyj Grunt w połączeniu z wtyczką jsbeautifier dla Grunt

Możesz łatwo zainstalować wszystko w swoim środowisku deweloperskim za pomocą npm .

Wszystko, czego będziesz potrzebować, to skonfigurowanie Gruntfile.js z odpowiednimi zadaniami, które mogą również obejmować konkatenację plików, lint, uglify, minify itp., I uruchomić polecenie grunt.

Tchakabam
źródło
2

Nie jestem w stanie dodać komentarza do zaakceptowanej odpowiedzi, dlatego widzisz post, który w ogóle nie powinien istnieć.

Zasadniczo potrzebowałem także upiększania javascript w kodzie java i ku mojemu zaskoczeniu żaden nie jest dostępny, o ile mogłem znaleźć. Więc zakodowałem jeden samodzielnie w oparciu o zaakceptowaną odpowiedź (otacza skrypt jsbeautifier.org beautifier .js, ale można go wywołać z javy lub wiersza poleceń).

Kod znajduje się pod adresem https://github.com/belgampaul/JsBeautifier

Użyłem rhino i beautifier.js

UŻYCIE z konsoli: java -jar wcięcie skryptu jsbeautifier.jar

przykład: java -jar jsbeautifier.jar "function ff () {return;}" 2

UŻYCIE z kodu java: public static String jsBeautify (String jsCode, int indentSize)

Zapraszamy do rozszerzenia kodu. W moim przypadku potrzebowałem tylko wcięcia, więc mogłem sprawdzić wygenerowany javascript podczas programowania.

Mam nadzieję, że zaoszczędzi Ci to trochę czasu w Twoim projekcie.

ioikka
źródło
1

Napisałem artykuł wyjaśniający, jak zbudować narzędzie do upiększania JavaScript z wiersza poleceń zaimplementowane w JavaScript w mniej niż 5 minut. YMMV.

  1. Pobierz najnowszą stabilną wersję Rhino i gdzieś ją rozpakuj, np. ~ / Dev / javascript / rhino
  2. Pobierz plik beautify.js, do którego odwołuje się wspomniany wcześniej jsbeautifier.org, a następnie skopiuj go gdzieś, np. ~ / Dev / javascript / bin / cli-beautifier.js
  3. Dodaj to na końcu beautify.js (używając dodatkowych właściwości najwyższego poziomu w JavaScript):

    // Run the beautifier on the file passed as the first argument.
    print( j23s_beautify( readFile( arguments[0] )));
  4. Skopiuj i wklej następujący kod do pliku wykonywalnego, np. ~ / Dev / javascript / bin / jsbeautifier.sh:

    #!/bin/sh
    java -cp ~/dev/javascript/rhino/js.jar org.mozilla.javascript.tools.shell.Main ~/dev/web/javascript/bin/cli-beautifier.js $*
  5. (opcjonalnie) Dodaj folder z jsbeautifier.js do PATH lub przejdź do folderu, który już tam jest.

Shonzilla
źródło
1

Wydaje mi się, że kiedy zapytałeś o narzędzie wiersza poleceń, chciałeś po prostu upiększyć wszystkie swoje pliki js zbiorczo.

W takim przypadku Intellij IDEA (testowany z 11.5) może to zrobić.

Wystarczy zaznaczyć dowolny plik projektu i wybrać „Kod” -> „Przeformatuj kod ..” w głównym menu IDE. Następnie w oknie dialogowym wybierz „wszystkie pliki w katalogu ...” i naciśnij „enter”. Upewnij się tylko, że przeznaczyłeś wystarczającą ilość pamięci dla maszyny JVM.

gumkins
źródło
0

Masz kilka możliwości wyboru jednej wkładki. Używaj z npm lub samodzielny z npx .

Semistandar

npx semistandard "js/**/*.js" --fix

Standard

npx standard "js/**/*.js" --fix

Ładniejsze

npx prettier --single-quote --write --trailing-comma all "js/**/*.js"
Alex Nolasco
źródło