¿Cómo puedo embellecer el código JavaScript usando la línea de comandos?


101

Estoy escribiendo un script por lotes para embellecer el código JavaScript. Necesita funcionar tanto en Windows como en Linux .

¿Cómo puedo embellecer el código JavaScript usando las herramientas de línea de comandos?


Mi herramienta Pretty Diff está escrita completamente en JavaScript, por lo que funciona igualmente bien en todos los sistemas operativos. Admite el embellecimiento y la minificación de JavaScript, CSS y cualquier lenguaje de marcado que utilice delimitadores de estilo XML, incluido HTML. prettydiff.com/?m=beautify

Respuestas:


64

Primero, elija su Pretty Print / Beautifier basado en Javascript favorito. Yo prefiero el dehttp://jsbeautifier.org/ , porque es lo que encontré primero. Descarga su archivo https://github.com/beautify-web/js-beautify/blob/master/js/lib/beautify.js

En segundo lugar, descargue e instale Rhino , el motor de JavaScript basado en Java del grupo Mozilla . "Instalar" es un poco engañoso; Descargue el archivo zip, extraiga todo, coloque js.jar en su classpath de Java (o Library / Java / Extensions en OS X). Luego puede ejecutar scripts con una invocación similar a esta

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

Utilice Pretty Print / Beautifier del paso 1 para escribir un pequeño script de shell que se leerá en su archivo javascript y lo ejecutará a través de Pretty Print / Beautifier desde el paso uno. Por ejemplo

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

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

Rhino proporciona a JavaScript algunas funciones útiles adicionales que no necesariamente tienen sentido en el contexto del navegador, pero sí en el contexto de una consola. La función print hace lo que esperarías e imprime una cadena. La función readFile acepta una cadena de ruta de archivo como argumento y devuelve el contenido de ese archivo.

Invocarías lo anterior algo como

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

Puede mezclar y combinar Java y Javascript en sus scripts de ejecución de Rhino, por lo que si conoce un poco de Java, no debería ser demasiado difícil hacerlo funcionar también con flujos de texto.


3
el enlace que ha proporcionado está roto, debería ser este, creo, jsbeautifier.org
Sinan

2
Cómo lo hice: ~ $ sudo apt-get install libv8-dev libv8-2.2.18: ~ $ cd einars-js-beautify-f90ce72 / v8: ~ $ g ++ -o jsbeautify jsbeautify.cpp -lv8 -Llib -lpthread Simplemente funciona. ¡Gracias a Einar Lielmanis y a todos los involucrados!
Беров

1
Estos parecen ser un objetivo en movimiento. Ahora, la información en el sitio jsbeautifier dice que está escrito en Python.
set

actualización para usuarios de cmdline, el siguiente repositorio tiene herramientas de línea de comandos independientes fáciles de instalar para imprimir js bonitos
drhodes

Utilice un enfoque JS moderno con Grunt: stackoverflow.com/questions/18985/…
Tchakabam

33

ACTUALIZACIÓN Abril de 2014 :

El embellecedor se ha reescrito desde que respondí esto en 2010. Ahora hay un módulo de Python allí, un paquete npm para nodejs y el archivo jar se ha ido. Lea la página del proyecto en github.com .

Estilo Python:

 $ pip install jsbeautifier

Estilo NPM:

 $ npm -g install js-beautify

para usarlo:

 $ js-beautify file.js

Respuesta original

Agregando a la respuesta de @Alan Storm

el embellecedor de línea de comando basado en http://jsbeautifier.org/ se ha vuelto un poco más fácil de usar, porque ahora (alternativamente) está basado en el motor javascript V8 (código c ++) en lugar de rhino (motor JS basado en java, empaquetado como "js.jar"). Entonces puedes usar V8 en lugar de rhino.

Cómo utilizar:

descargue el archivo zip jsbeautifier.org de http://github.com/einars/js-beautify/zipball/master

(esta es una URL de descarga vinculada a un archivo zip como http://download.github.com/einars-js-beautify-10384df.zip )

antiguo (ya no funciona, el archivo jar se ha ido)

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

nuevo (alternativo)

instalar / compilar v8 lib DESDE svn, ver v8 / README.txt en el archivo zip mencionado anteriormente

  ./jsbeautify somefile.js

-tiene opciones de línea de comando ligeramente diferentes a las de la versión de rhino,

-y funciona muy bien en Eclipse cuando se configura como una "herramienta externa"


3
O si prefiere Python sobre v8, ahora también hay un módulo de Python.
2011

1
El paquete npm se llama js-beautify
brafdlog

30

Si está usando nodejs, intente uglify-js

En Linux o Mac, asumiendo que ya tiene nodejs instalado, puede instalar uglify con:

sudo npm install -g uglify-js

Y luego obtén las opciones:

uglifyjs -h

Entonces, si tengo un archivo fuente foo.jsque se parece a esto:

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

Puedo embellecerlo así:

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

uglifyusa espacios para la sangría de forma predeterminada, por lo que si quiero convertir la sangría de 4 espacios en pestañas, puedo ejecutarla a través de la unexpandcual viene Ubuntu 12.04:

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

O puede hacerlo todo de una vez:

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

Puede encontrar más información sobre inexpand aquí

así que después de todo esto termino con un archivo que se ve así:

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

actualización 2016-06-07

Parece que el responsable de mantenimiento de uglify-js ahora está trabajando en la versión 2, aunque la instalación es la misma.


4
Esta es la respuesta correcta para un código JavaScript de línea de comandos beautifer.
bitek

uglifyjs -bHace mucho más que corregir la sangría, reorganiza y reescribe el código, quizás por eficiencia. Eso no es lo que quería. Estaba usando una versión anterior, en Ubuntu 14.04.
Sam Watkins

¿Podría explicar un poco más cómo uglifyjs -breorganiza y reescribe el código?
erapert

11

En Ubuntu LTS

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

1
La mejor respuesta del momento. Para uso de embellecimiento en el lugarjs-beautify -o file.js file.js
Petr Javorik

3

En la consola, puede usar Artistic Style (también conocido como AStyle) con --mode=java.
Funciona muy bien y es gratuito, de código abierto y multiplataforma (Linux, Mac OS X, Windows).


2

Utilice la forma moderna de JavaScript:

Use Grunt en combinación con el complemento jsbeautifier para Grunt

Puede instalar todo fácilmente en su entorno de desarrollo usando npm .

Todo lo que necesitará es configurar un Gruntfile.js con las tareas apropiadas, que también pueden involucrar la concatenación de archivos, lint, uglify, minify, etc., y ejecutar el comando grunt.


2

No puedo agregar un comentario a la respuesta aceptada, por eso ves una publicación que no debería haber existido en primer lugar.

Básicamente, también necesitaba un embellecedor de javascript en un código de Java y, para mi sorpresa, ninguno está disponible hasta donde pude encontrar. Así que codifiqué uno yo mismo en función de la respuesta aceptada (envuelve el script jsbeautifier.org beautifier .js pero se puede llamar desde java o la línea de comandos).

El código se encuentra en https://github.com/belgampaul/JsBeautifier

Usé rhino y beautifier.js

USO desde la consola: sangría de script java -jar jsbeautifier.jar

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

USO del código java: público estático String jsBeautify (String jsCode, int indentSize)

Le invitamos a ampliar el código. En mi caso, solo necesitaba la sangría para poder verificar el javascript generado mientras desarrollaba.

Con la esperanza de que le ahorre algo de tiempo en su proyecto.


1

Escribí un artículo que explica cómo crear un embellecedor de JavaScript de línea de comandos implementado en JavaScript en menos de 5 minutos. YMMV.

  1. Descargue el Rhino estable más reciente y descomprímalo en algún lugar, por ejemplo, ~ / dev / javascript / rhino
  2. Descargue beautify.js al que se hace referencia en jsbeautifier.org antes mencionado y luego cópielo en algún lugar, por ejemplo, ~ / dev / javascript / bin / cli-beautifier.js
  3. Agregue esto al final de beautify.js (usando algunas propiedades adicionales de nivel superior para JavaScript):

    // Run the beautifier on the file passed as the first argument.
    print( j23s_beautify( readFile( arguments[0] )));
  4. Copie y pegue el siguiente código en un archivo ejecutable, por ejemplo, ~ / 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. (opcional) Agregue la carpeta con jsbeautifier.js a PATH o muévala a alguna carpeta que ya esté allí.


1

Creo que cuando preguntaste sobre la herramienta de línea de comandos, solo querías embellecer todos tus archivos js por lotes.

En este caso, Intellij IDEA (probado con 11.5) puede hacer esto.

Solo necesita seleccionar cualquiera de los archivos de su proyecto y seleccionar "Código" -> "Reformatear código ..." en el menú principal del IDE. Luego, en el cuadro de diálogo, seleccione "todos los archivos del directorio ..." y presione "enter". Solo asegúrese de dedicar suficiente memoria para la JVM.


0

Tiene algunas opciones de un forro. Úselo con npm o de forma independiente con npx .

Semistandar

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

Estándar

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

Más bonita

npx prettier --single-quote --write --trailing-comma all "js/**/*.js"
Al usar nuestro sitio, usted reconoce que ha leído y comprende nuestra Política de Cookies y Política de Privacidad.
Licensed under cc by-sa 3.0 with attribution required.