Come posso abbellire il codice JavaScript utilizzando la riga di comando?


101

Sto scrivendo uno script batch per abbellire il codice JavaScript. Deve funzionare sia su Windows che su Linux .

Come posso abbellire il codice JavaScript utilizzando gli strumenti della riga di comando?


Il mio strumento Pretty Diff è scritto interamente in JavaScript, quindi funziona altrettanto bene su tutti i sistemi operativi. Supporta l'abbellimento e la minimizzazione di JavaScript, CSS, qualsiasi linguaggio di markup che utilizza delimitatori di stile XML, incluso HTML. prettydiff.com/?m=beautify

Risposte:


64

Per prima cosa, scegli il tuo Pretty Print / Beautifier basato su Javascript preferito. Preferisco quello ahttp://jsbeautifier.org/ , perché è quello che ho trovato per primo. Scarica il suo file https://github.com/beautify-web/js-beautify/blob/master/js/lib/beautify.js

Secondo, scarica e installa Rhino , il motore Javascript basato su Java del gruppo Mozilla . "Installa" è un po 'fuorviante; Scarica il file zip, estrai tutto, metti js.jar nel tuo classpath Java (o Library / Java / Extensions su OS X). È quindi possibile eseguire script con una chiamata simile a questa

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

Usa Pretty Print / Beautifier dal passaggio 1 per scrivere un piccolo script di shell che leggerà nel tuo file javascript ed eseguirlo attraverso Pretty Print / Beautifier dal passaggio uno. Per esempio

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

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

Rhino fornisce a javascript alcune funzioni utili extra che non hanno necessariamente senso nel contesto di un browser, ma lo fanno in un contesto di console. La funzione print fa quello che ti aspetteresti e stampa una stringa. La funzione readFile accetta una stringa del percorso del file come argomento e restituisce il contenuto di quel file.

Dovresti invocare quanto sopra qualcosa di simile

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

Puoi mescolare e abbinare Java e Javascript negli script di esecuzione di Rhino, quindi se conosci un po 'di Java non dovrebbe essere troppo difficile farlo funzionare anche con flussi di testo.


3
il collegamento che hai fornito è interrotto, dovrebbe essere questo penso, jsbeautifier.org
Sinan,

2
Come l'ho fatto:: ~ $ sudo apt-get install libv8-dev libv8-2.2.18: ~ $ cd einars-js-beautify-f90ce72 / v8: ~ $ g ++ -o jsbeautify jsbeautify.cpp -lv8 -Llib -lpthread Funziona e basta. Grazie a Einar Lielmanis e a tutte le persone coinvolte!
Беров

1
Sembra essere un bersaglio mobile. Ora le informazioni sul sito jsbeautifier dicono che è scritto in python.
seth

aggiornamento per gli utenti di cmdline, il seguente repository ha strumenti da riga di comando stand-alone facili da installare per una stampa carina: github.com/einars/js-beautify.git
drhodes

Utilizzare un moderno approccio JS usando Grunt: stackoverflow.com/questions/18985/...
Tchakabam

33

AGGIORNAMENTO aprile 2014 :

L'abbellitore è stato riscritto da quando ho risposto a questa domanda nel 2010. Ora è presente un modulo python, un pacchetto npm per nodejs e il file jar è sparito. Si prega di leggere la pagina del progetto su github.com .

Stile Python:

 $ pip install jsbeautifier

Stile NPM:

 $ npm -g install js-beautify

per usarlo:

 $ js-beautify file.js

Risposta originale

Aggiunta alla risposta di @Alan Storm

l'abbellitore della riga di comando basato su http://jsbeautifier.org/ è diventato un po 'più facile da usare, perché ora (in alternativa) è basato sul motore javascript V8 (codice c ++) invece di rhino (motore JS basato su java, confezionato come "js.jar"). Quindi puoi usare V8 invece di Rhino.

Come usare:

scarica il file zip jsbeautifier.org da http://github.com/einars/js-beautify/zipball/master

(questo è un URL di download collegato a un file zip come http://download.github.com/einars-js-beautify-10384df.zip )

vecchio (non funziona più, il file jar è sparito)

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

nuovo (alternativa)

installa / compila la lib v8 DA svn, vedi v8 / README.txt nel file zip sopra menzionato

  ./jsbeautify somefile.js

-ha opzioni della riga di comando leggermente diverse rispetto alla versione di rhino,

-e funziona alla grande in Eclipse se configurato come "strumento esterno"


3
O se preferisci python rispetto a v8, ora c'è anche un modulo python.
ritorno

1
Il pacchetto npm si chiama js-beautify
brafdlog

30

Se stai usando nodejs, prova uglify-js

Su Linux o Mac, supponendo che tu abbia già installato nodejs, puoi installare uglify con:

sudo npm install -g uglify-js

E poi ottieni le opzioni:

uglifyjs -h

Quindi, se ho un file sorgente foo.jsche assomiglia a questo:

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

Posso abbellirlo in questo modo:

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

uglifyutilizza gli spazi per il rientro per impostazione predefinita, quindi se voglio convertire il rientro di 4 spazi in tabulazioni posso eseguirlo attraverso il unexpandquale Ubuntu 12.04 viene fornito con:

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

Oppure puoi fare tutto in una volta:

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

Puoi trovare ulteriori informazioni su inspand qui

quindi dopo tutto questo mi ritrovo con un file che sembra così:

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

aggiornamento 2016-06-07

Sembra che il manutentore di uglify-js stia ora lavorando alla versione 2 sebbene l'installazione sia la stessa.


4
Questa è la risposta corretta per un abbellimento del codice JavaScript della riga di comando.
bitek

uglifyjs -bfa molto di più che correggere il rientro, riorganizza e riscrive il codice, forse per motivi di efficienza. Non è quello che volevo. Stavo usando una versione precedente, in Ubuntu 14.04.
Sam Watkins

Potresti spiegare un po 'di più come uglifyjs -briorganizza e riscrive il codice?
erapert

11

Su Ubuntu LTS

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

1
La migliore risposta al momento. Per abbellire sul posto utilizzarejs-beautify -o file.js file.js
Petr Javorik

3

Nella console, puoi usare Artistic Style (aka AStyle) con --mode=java.
Funziona benissimo ed è gratuito, open source e multipiattaforma (Linux, Mac OS X, Windows).


2

Usa il moderno metodo JavaScript:

Usa Grunt in combinazione con il plugin jsbeautifier per Grunt

Puoi installare tutto facilmente nel tuo ambiente di sviluppo usando npm .

Tutto ciò di cui avrai bisogno è configurare un Gruntfile.js con le attività appropriate, che possono anche coinvolgere la concatenazione di file, lint, uglify, minify ecc. Ed eseguire il comando grunt.


2

Non sono in grado di aggiungere un commento alla risposta accettata, quindi è per questo che vedi un post che non avrebbe dovuto esistere in primo luogo.

Fondamentalmente avevo anche bisogno di un abbellitore javascript in un codice java e con mia sorpresa nessuno è disponibile per quanto ho trovato. Quindi ne ho codificato uno io interamente in base alla risposta accettata (avvolge lo script beautifier .js di jsbeautifier.org ma è richiamabile da java o dalla riga di comando).

Il codice si trova in https://github.com/belgampaul/JsBeautifier

Ho usato rhino e beautifier.js

UTILIZZO dalla console: java -jar jsbeautifier.jar rientro dello script

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

USAGE dal codice java: stringa statica pubblica jsBeautify (String jsCode, int indentSize)

Sei libero di estendere il codice. Nel mio caso avevo solo bisogno del rientro in modo da poter controllare il javascript generato durante lo sviluppo.

Nella speranza che ti risparmi un po 'di tempo nel tuo progetto.


1

Ho scritto un articolo che spiega come creare un abbellitore JavaScript da riga di comando implementato in JavaScript in meno di 5 minuti. YMMV.

  1. Scarica l'ultima versione stabile di Rhino e scompattala da qualche parte, ad esempio ~ / dev / javascript / rhino
  2. Scarica beautify.js a cui fa riferimento il suddetto jsbeautifier.org, quindi copialo da qualche parte, ad esempio ~ / dev / javascript / bin / cli-beautifier.js
  3. Aggiungilo alla fine di beautify.js (utilizzando alcune proprietà aggiuntive di primo livello a JavaScript):

    // Run the beautifier on the file passed as the first argument.
    print( j23s_beautify( readFile( arguments[0] )));
  4. Copia e incolla il seguente codice in un file eseguibile, ad esempio ~ / 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. (opzionale) Aggiungi la cartella con jsbeautifier.js a PATH o spostati in una cartella già presente.


1

Credo che quando hai chiesto dello strumento da riga di comando volevi solo abbellire tutti i tuoi file js in batch.

In questo caso Intellij IDEA (testato con 11.5) può farlo.

Devi solo selezionare uno qualsiasi dei tuoi file di progetto e selezionare "Codice" -> "Riformatta codice .." nel menu IDE principale. Quindi nella finestra di dialogo selezionare "tutti i file nella directory ..." e premere "invio". Assicurati solo di aver dedicato abbastanza memoria per la JVM.


0

Hai poche scelte di linea. Utilizzare con npm o autonomo con npx .

Semistandar

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

Standard

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

Più carina

npx prettier --single-quote --write --trailing-comma all "js/**/*.js"
Utilizzando il nostro sito, riconosci di aver letto e compreso le nostre Informativa sui cookie e Informativa sulla privacy.
Licensed under cc by-sa 3.0 with attribution required.