js beautify
v1.15.1 ?
Este pequeño embellecedor reformateará y volverá a sangrar los marcadores, el feo JavaScript, descomprimirá los scripts empaquetados por el popular empaquetador de Dean Edward, así como también desofuscará parcialmente los scripts procesados por el paquete npm javascript-ofuscator.
Abre beautifier.io para probarlo. Las opciones están disponibles a través de la interfaz de usuario.
Estoy poniendo esto al frente y al centro porque los propietarios existentes actualmente tienen un tiempo muy limitado para trabajar en este proyecto. Este es un proyecto popular y ampliamente utilizado, pero necesita desesperadamente colaboradores que tengan tiempo para comprometerse a solucionar tanto los errores que enfrentan los clientes como los problemas subyacentes con el diseño y la implementación internos.
Si está interesado, eche un vistazo a CONTRIBUTING.md, luego solucione un problema marcado con la etiqueta "Buen primer problema" y envíe un PR. Repita con la mayor frecuencia posible. ¡Gracias!
Puede instalar el embellecedor para Node.js o Python.
Puede instalar el paquete NPM js-beautify . Cuando se instala globalmente, proporciona un script js-beautify ejecutable. Al igual que con el script de Python, el resultado embellecido se envía a stdout a menos que se configure lo contrario.
$ npm -g install js-beautify
$ js-beautify foo.js También puede usar js-beautify como biblioteca node (instalar localmente, el valor predeterminado de npm ):
$ npm install js-beautifyLo anterior instala la última versión estable. Para instalar versiones beta o RC:
$ npm install js-beautify@nextEl embellecedor se puede agregar a su página como biblioteca web.
JS Beautifier está alojado en dos servicios CDN: cdnjs y rawgit.
Para obtener la última versión de uno de estos servicios, incluya un conjunto de etiquetas de script a continuación en su documento:
< script src =" https://cdnjs.cloudflare.com/ajax/libs/js-beautify/1.15.1/beautify.js " > </ script >
< script src =" https://cdnjs.cloudflare.com/ajax/libs/js-beautify/1.15.1/beautify-css.js " > </ script >
< script src =" https://cdnjs.cloudflare.com/ajax/libs/js-beautify/1.15.1/beautify-html.js " > </ script >
< script src =" https://cdnjs.cloudflare.com/ajax/libs/js-beautify/1.15.1/beautify.min.js " > </ script >
< script src =" https://cdnjs.cloudflare.com/ajax/libs/js-beautify/1.15.1/beautify-css.min.js " > </ script >
< script src =" https://cdnjs.cloudflare.com/ajax/libs/js-beautify/1.15.1/beautify-html.min.js " > </ script >Ejemplo de uso de una etiqueta JS en html:
<!DOCTYPE html >
< html lang =" en " >
< body >
. . .
< script src =" https://cdnjs.cloudflare.com/ajax/libs/js-beautify/1.15.1/beautify.min.js " > </ script >
< script src =" script.js " > </ script >
</ body >
</ html >Las versiones anteriores están disponibles cambiando el número de versión.
Descargo de responsabilidad: estos son servicios gratuitos, por lo que no hay garantías de tiempo de actividad ni soporte.
Para instalar la versión Python del embellecedor:
$ pip install jsbeautifierA diferencia de la versión de JavaScript, la versión de Python sólo puede reformatear JavaScript. No funciona con archivos HTML o CSS, pero puedes instalar css-beautify para CSS:
$ pip install cssbeautifierPuede embellecer JavaScript usando JS Beautifier en su navegador web o en la línea de comandos usando Node.js o Python.
Abra beautifier.io. Las opciones están disponibles a través de la interfaz de usuario.
Después de incrustar las etiquetas <script> en su archivo html , exponen tres funciones: js_beautify , css_beautify y html_beautify
Ejemplo de uso para embellecer una cadena json:
const options = { indent_size : 2 , space_in_empty_paren : true }
const dataObj = { completed : false , id : 1 , title : "delectus aut autem" , userId : 1 , }
const dataJson = JSON . stringify ( dataObj )
js_beautify ( dataJson , options )
/* OUTPUT
{
"completed": false,
"id": 1,
"title": "delectus aut autem",
"userId": 1,
}
*/ Cuando se instala globalmente, el embellecedor proporciona un script js-beautify ejecutable. El resultado embellecido se envía a stdout a menos que se configure lo contrario.
$ js-beautify foo.js Para usar js-beautify como biblioteca node (después de la instalación local), importe y llame al método embellecedor apropiado para JavaScript (JS), CSS o HTML. Las tres firmas de métodos son beautify(code, options) . code es la cadena de código que se va a embellecer. opciones es un objeto con la configuración que le gustaría usar para embellecer el código.
Los nombres de las opciones de configuración son los mismos que los nombres de la CLI pero con guiones bajos en lugar de guiones. Por ejemplo, --indent-size 2 --space-in-empty-paren sería { indent_size: 2, space_in_empty_paren: true } .
var beautify = require ( 'js-beautify/js' ) . js ,
fs = require ( 'fs' ) ;
fs . readFile ( 'foo.js' , 'utf8' , function ( err , data ) {
if ( err ) {
throw err ;
}
console . log ( beautify ( data , { indent_size : 2 , space_in_empty_paren : true } ) ) ;
} ) ; Si está utilizando ESM Imports, puede importar js-beautify de esta manera:
// 'beautify' can be any name here.
import beautify from 'js-beautify' ;
beautify . js ( data , options ) ;
beautify . html ( data , options ) ;
beautify . css ( data , options ) ; Después de la instalación, para embellecer usando Python:
$ js-beautify file.js La salida embellecida pasa a stdout de forma predeterminada.
Usar jsbeautifier como biblioteca es simple:
import jsbeautifier
res = jsbeautifier . beautify ( 'your JavaScript string' )
res = jsbeautifier . beautify_file ( 'some_file.js' )...o, para especificar algunas opciones:
opts = jsbeautifier . default_options ()
opts . indent_size = 2
opts . space_in_empty_paren = True
res = jsbeautifier . beautify ( 'some JavaScript' , opts ) Los nombres de las opciones de configuración son los mismos que los nombres de la CLI pero con guiones bajos en lugar de guiones. El ejemplo anterior se configuraría en la línea de comandos como --indent-size 2 --space-in-empty-paren .
Estas son las opciones de línea de comandos para los scripts Python y JS:
CLI Options:
-f, --file Input file(s) (Pass '-' for stdin)
-r, --replace Write output in-place, replacing input
-o, --outfile Write output to file (default stdout)
--config Path to config file
--type [js|css|html] ["js"] Select beautifier type (NOTE: Does *not* filter files, only defines which beautifier type to run)
-q, --quiet Suppress logging to stdout
-h, --help Show this help
-v, --version Show the version
Beautifier Options:
-s, --indent-size Indentation size [4]
-c, --indent-char Indentation character [" "]
-t, --indent-with-tabs Indent with tabs, overrides -s and -c
-e, --eol Character(s) to use as line terminators.
[first newline in file, otherwise "n]
-n, --end-with-newline End output with newline
--editorconfig Use EditorConfig to set up the options
-l, --indent-level Initial indentation level [0]
-p, --preserve-newlines Preserve line-breaks (--no-preserve-newlines disables)
-m, --max-preserve-newlines Number of line-breaks to be preserved in one chunk [10]
-P, --space-in-paren Add padding spaces within paren, ie. f( a, b )
-E, --space-in-empty-paren Add a single space inside empty paren, ie. f( )
-j, --jslint-happy Enable jslint-stricter mode
-a, --space-after-anon-function Add a space before an anonymous function's parens, ie. function ()
--space-after-named-function Add a space before a named function's parens, i.e. function example ()
-b, --brace-style [collapse|expand|end-expand|none][,preserve-inline] [collapse,preserve-inline]
-u, --unindent-chained-methods Don't indent chained method calls
-B, --break-chained-methods Break chained method calls across subsequent lines
-k, --keep-array-indentation Preserve array indentation
-x, --unescape-strings Decode printable characters encoded in xNN notation
-w, --wrap-line-length Wrap lines that exceed N characters [0]
-X, --e4x Pass E4X xml literals through untouched
--good-stuff Warm the cockles of Crockford's heart
-C, --comma-first Put commas at the beginning of new line instead of end
-O, --operator-position Set operator position (before-newline|after-newline|preserve-newline) [before-newline]
--indent-empty-lines Keep indentation on empty lines
--templating List of templating languages (auto,django,erb,handlebars,php,smarty,angular) ["auto"] auto = none in JavaScript, all in HTML
Que corresponden a las claves de opción subrayadas para ambas interfaces de biblioteca
valores predeterminados por opciones CLI
{
"indent_size" : 4 ,
"indent_char" : " " ,
"indent_with_tabs" : false ,
"editorconfig" : false ,
"eol" : " n " ,
"end_with_newline" : false ,
"indent_level" : 0 ,
"preserve_newlines" : true ,
"max_preserve_newlines" : 10 ,
"space_in_paren" : false ,
"space_in_empty_paren" : false ,
"jslint_happy" : false ,
"space_after_anon_function" : false ,
"space_after_named_function" : false ,
"brace_style" : " collapse " ,
"unindent_chained_methods" : false ,
"break_chained_methods" : false ,
"keep_array_indentation" : false ,
"unescape_strings" : false ,
"wrap_line_length" : 0 ,
"e4x" : false ,
"comma_first" : false ,
"operator_position" : " before-newline " ,
"indent_empty_lines" : false ,
"templating" : [ " auto " ]
}valores predeterminados no expuestos en el cli
{
"eval_code" : false ,
"space_before_conditional" : true
}Tenga en cuenta que no todos los valores predeterminados se exponen a través de la CLI. Históricamente, las API de Python y JS no han sido 100% idénticas. Todavía hay algunos otros casos adicionales que nos impiden tener una compatibilidad API del 100%.
Además de los argumentos de la CLI, puede pasar la configuración al ejecutable JS mediante:
jsbeautify_ con prefijoJSON indicado por el parámetro --config.jsbeautifyrc que contiene datos JSON en cualquier nivel del sistema de archivos por encima de $PWDLas fuentes de configuración proporcionadas anteriormente en esta pila anularán las posteriores.
Las configuraciones son un árbol poco profundo cuyos valores se heredan para todos los idiomas, pero se pueden anular. Esto funciona para configuraciones pasadas directamente a la API en cualquier implementación. En la implementación de JavaScript, las configuraciones cargadas desde un archivo de configuración, como .jsbeautifyrc, también pueden usar herencia/anulación.
A continuación se muestra un árbol de configuración de ejemplo que muestra todas las ubicaciones admitidas para los nodos de anulación de idioma. Usaremos indent_size para analizar cómo se comportaría esta configuración, pero se puede heredar o anular cualquier cantidad de configuraciones:
{
"indent_size" : 4 ,
"html" : {
"end_with_newline" : true ,
"js" : {
"indent_size" : 2
},
"css" : {
"indent_size" : 2
}
},
"css" : {
"indent_size" : 1
},
"js" : {
"preserve-newlines" : true
}
}Usando el ejemplo anterior se obtendría el siguiente resultado:
indent_size de 4 espacios de la configuración de nivel superior.end_with_newline .indent_size de 1 espacio.indent_size de 4 espacios de la configuración de nivel superior.preserve-newlines en true . Además del ejecutable js-beautify , css-beautify y html-beautify también se proporcionan como una interfaz sencilla para esos scripts. Alternativamente, js-beautify --css o js-beautify --html lograrán lo mismo, respectivamente.
// Programmatic access
var beautify_js = require ( 'js-beautify' ) ; // also available under "js" export
var beautify_css = require ( 'js-beautify' ) . css ;
var beautify_html = require ( 'js-beautify' ) . html ;
// All methods accept two arguments, the string to be beautified, and an options object.Los embellecedores CSS y HTML tienen un alcance mucho más simple y poseen muchas menos opciones.
CSS Beautifier Options:
-s, --indent-size Indentation size [4]
-c, --indent-char Indentation character [" "]
-t, --indent-with-tabs Indent with tabs, overrides -s and -c
-e, --eol Character(s) to use as line terminators. (default newline - "\n")
-n, --end-with-newline End output with newline
-b, --brace-style [collapse|expand] ["collapse"]
-L, --selector-separator-newline Add a newline between multiple selectors
-N, --newline-between-rules Add a newline between CSS rules
--indent-empty-lines Keep indentation on empty lines
HTML Beautifier Options:
-s, --indent-size Indentation size [4]
-c, --indent-char Indentation character [" "]
-t, --indent-with-tabs Indent with tabs, overrides -s and -c
-e, --eol Character(s) to use as line terminators. (default newline - "\n")
-n, --end-with-newline End output with newline
-p, --preserve-newlines Preserve existing line-breaks (--no-preserve-newlines disables)
-m, --max-preserve-newlines Maximum number of line-breaks to be preserved in one chunk [10]
-I, --indent-inner-html Indent <head> and <body> sections. Default is false.
-b, --brace-style [collapse-preserve-inline|collapse|expand|end-expand|none] ["collapse"]
-S, --indent-scripts [keep|separate|normal] ["normal"]
-w, --wrap-line-length Maximum characters per line (0 disables) [250]
-A, --wrap-attributes Wrap attributes to new lines [auto|force|force-aligned|force-expand-multiline|aligned-multiple|preserve|preserve-aligned] ["auto"]
-M, --wrap-attributes-min-attrs Minimum number of html tag attributes for force wrap attribute options [2]
-i, --wrap-attributes-indent-size Indent wrapped attributes to after N characters [indent-size] (ignored if wrap-attributes is "aligned")
-d, --inline List of tags to be considered inline tags
--inline_custom_elements Inline custom elements [true]
-U, --unformatted List of tags (defaults to inline) that should not be reformatted
-T, --content_unformatted List of tags (defaults to pre) whose content should not be reformatted
-E, --extra_liners List of tags (defaults to [head,body,/html] that should have an extra newline before them.
--editorconfig Use EditorConfig to set up the options
--indent_scripts Sets indent level inside script tags ("normal", "keep", "separate")
--unformatted_content_delimiter Keep text content together between this string [""]
--indent-empty-lines Keep indentation on empty lines
--templating List of templating languages (auto,none,django,erb,handlebars,php,smarty,angular) ["auto"] auto = none in JavaScript, all in html
Las directivas le permiten controlar el comportamiento del Beautifier desde sus archivos fuente. Las directivas se colocan en comentarios dentro del archivo. Las directivas tienen el formato /* beautify {name}:{value} */ en CSS y JavaScript. En HTML tienen el formato <!-- beautify {name}:{value} --> .
La directiva ignore hace que el embellecedor ignore por completo parte de un archivo, tratándolo como texto literal que no se analiza. La siguiente entrada permanecerá sin cambios después del embellecimiento:
// Use ignore when the content is not parsable in the current language, JavaScript in this case.
var a = 1 ;
/* beautify ignore:start */
{ This is some strange { template language { using open - braces ?
/* beautify ignore:end */NOTA: esta directiva solo funciona en HTML y JavaScript, no en CSS.
La directiva preserve hace que Beautifier analice y luego mantenga el formato existente de una sección de código.
La siguiente entrada permanecerá sin cambios después del embellecimiento:
// Use preserve when the content is valid syntax in the current language, JavaScript in this case.
// This will parse the code and preserve the existing formatting.
/* beautify preserve:start */
{
browserName : 'internet explorer' ,
platform : 'Windows 7' ,
version : '8'
}
/* beautify preserve:end */Eres libre de utilizarlo de la forma que desees, en caso de que lo encuentres útil o funcione para ti, pero debes conservar el aviso de derechos de autor y la licencia. (MIT)
Gracias también a Jason Diamond, Patrick Hof, Nochum Sossonko, Andreas Schneider, Dave Vasilevsky, Vital Batmanov, Ron Baldwin, Gabriel Harrison, Chris J. Shull, Mathias Bynens, Vittorio Gambaletta y otros.
(README.md: [email protected])
