js beautify
v1.15.1 ?
Ce petit embellisseur reformatera et ré-indentera les bookmarklets, le JavaScript laid, décompressera les scripts emballés par le packer populaire de Dean Edward, ainsi que désobscurcira partiellement les scripts traités par le package npm javascript-obfuscator.
Ouvrez beautifier.io pour l'essayer. Les options sont disponibles via l'interface utilisateur.
Je mets cela au premier plan car les propriétaires existants ont actuellement très peu de temps pour travailler sur ce projet. Il s'agit d'un projet populaire et largement utilisé, mais il a désespérément besoin de contributeurs qui ont le temps de s'engager à corriger à la fois les bogues rencontrés par les clients et les problèmes sous-jacents liés à la conception et à la mise en œuvre internes.
Si vous êtes intéressé, veuillez jeter un œil à CONTRIBUTING.md, puis corrigez un problème marqué du label « Bon premier numéro » et soumettez un PR. Répétez aussi souvent que possible. Merci!
Vous pouvez installer l'embellisseur pour Node.js ou Python.
Vous pouvez installer le package NPM js-beautify . Lorsqu'il est installé globalement, il fournit un script js-beautify exécutable. Comme pour le script Python, le résultat embelli est envoyé vers stdout sauf configuration contraire.
$ npm -g install js-beautify
$ js-beautify foo.js Vous pouvez également utiliser js-beautify comme bibliothèque node (installer localement, la valeur par défaut de npm ) :
$ npm install js-beautifyCe qui précède installe la dernière version stable. Pour installer les versions bêta ou RC :
$ npm install js-beautify@nextL'embellisseur peut être ajouté sur votre page en tant que bibliothèque web.
JS Beautifier est hébergé sur deux services CDN : cdnjs et rawgit.
Pour extraire la dernière version de l'un de ces services, incluez un ensemble de balises de script ci-dessous dans votre document :
< 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 >Exemple d'utilisation d'une balise 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 >Les anciennes versions sont disponibles en modifiant le numéro de version.
Avertissement : ce sont des services gratuits, il n'y a donc aucune garantie de disponibilité ou de support.
Pour installer la version Python de l'embellisseur :
$ pip install jsbeautifierContrairement à la version JavaScript, la version Python ne peut reformater que JavaScript. Cela ne fonctionne pas avec les fichiers HTML ou CSS, mais vous pouvez installer css-beautify pour CSS :
$ pip install cssbeautifierVous pouvez embellir JavaScript à l'aide de JS Beautifier dans votre navigateur Web ou sur la ligne de commande à l'aide de Node.js ou Python.
Ouvrez embellisseur.io. Les options sont disponibles via l'interface utilisateur.
Après avoir intégré les balises <script> dans votre fichier html , elles exposent trois fonctions : js_beautify , css_beautify et html_beautify
Exemple d'utilisation pour embellir une chaîne 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,
}
*/ Lorsqu'il est installé globalement, l'embellisseur fournit un script js-beautify exécutable. Le résultat embelli est envoyé à stdout sauf configuration contraire.
$ js-beautify foo.js Pour utiliser js-beautify comme bibliothèque node (après installation locale), importez et appelez la méthode embellisseur appropriée pour JavaScript (JS), CSS ou HTML. Les trois signatures de méthode sont beautify(code, options) . code est la chaîne de code à embellir. options est un objet avec les paramètres que vous souhaitez utiliser pour embellir le code.
Les noms des options de configuration sont les mêmes que les noms CLI mais avec des traits de soulignement au lieu de tirets. Par exemple, --indent-size 2 --space-in-empty-paren serait { 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 vous utilisez les importations ESM, vous pouvez importer js-beautify comme ceci :
// 'beautify' can be any name here.
import beautify from 'js-beautify' ;
beautify . js ( data , options ) ;
beautify . html ( data , options ) ;
beautify . css ( data , options ) ; Après l'installation, pour embellir avec Python :
$ js-beautify file.js La sortie embellie va vers stdout par défaut.
Utiliser jsbeautifier comme bibliothèque est simple :
import jsbeautifier
res = jsbeautifier . beautify ( 'your JavaScript string' )
res = jsbeautifier . beautify_file ( 'some_file.js' )...ou, pour spécifier certaines options :
opts = jsbeautifier . default_options ()
opts . indent_size = 2
opts . space_in_empty_paren = True
res = jsbeautifier . beautify ( 'some JavaScript' , opts ) Les noms des options de configuration sont les mêmes que les noms CLI mais avec des traits de soulignement au lieu de tirets. L'exemple ci-dessus serait défini sur la ligne de commande comme --indent-size 2 --space-in-empty-paren .
Voici les indicateurs de ligne de commande pour les scripts Python et 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
Qui correspondent aux touches d'option soulignées pour les deux interfaces de bibliothèque
valeurs par défaut selon les options 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 " ]
}les valeurs par défaut ne sont pas exposées dans le cli
{
"eval_code" : false ,
"space_before_conditional" : true
}Notez que toutes les valeurs par défaut ne sont pas exposées via la CLI. Historiquement, les API Python et JS ne sont pas identiques à 100 %. Il existe encore quelques autres cas supplémentaires qui nous empêchent d'atteindre une compatibilité API à 100 %.
En plus des arguments CLI, vous pouvez transmettre la configuration à l'exécutable JS via :
jsbeautify_JSON indiqué par le paramètre --config.jsbeautifyrc contenant des données JSON à n'importe quel niveau du système de fichiers au-dessus de $PWDLes sources de configuration fournies plus tôt dans cette pile remplaceront les sources ultérieures.
Les paramètres sont une arborescence superficielle dont les valeurs sont héritées pour toutes les langues, mais peuvent être remplacées. Cela fonctionne pour les paramètres transmis directement à l'API dans l'une ou l'autre implémentation. Dans l'implémentation JavaScript, les paramètres chargés à partir d'un fichier de configuration, tel que .jsbeautifyrc, peuvent également utiliser l'héritage/le remplacement.
Vous trouverez ci-dessous un exemple d'arborescence de configuration montrant tous les emplacements pris en charge pour les nœuds de remplacement de langue. Nous utiliserons indent_size pour discuter du comportement de cette configuration, mais n'importe quel nombre de paramètres peut être hérité ou remplacé :
{
"indent_size" : 4 ,
"html" : {
"end_with_newline" : true ,
"js" : {
"indent_size" : 2
},
"css" : {
"indent_size" : 2
}
},
"css" : {
"indent_size" : 1
},
"js" : {
"preserve-newlines" : true
}
}L'utilisation de l'exemple ci-dessus donnerait le résultat suivant :
indent_size de 4 espaces du paramètre de niveau supérieur.end_with_newline .indent_size de 1 espace.indent_size de 4 espaces du paramètre de niveau supérieur.preserve-newlines sur true . En plus de l'exécutable js-beautify , css-beautify et html-beautify sont également fournis comme interface simple dans ces scripts. Alternativement, js-beautify --css ou js-beautify --html accompliront respectivement la même chose.
// 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.Les embellisseurs CSS et HTML ont une portée beaucoup plus simple et possèdent beaucoup moins d'options.
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
Les directives vous permettent de contrôler le comportement de l'embellisseur depuis vos fichiers sources. Les directives sont placées dans les commentaires à l'intérieur du fichier. Les directives sont au format /* beautify {name}:{value} */ en CSS et JavaScript. En HTML, ils sont formatés comme <!-- beautify {name}:{value} --> .
La directive ignore fait que l'embellisseur ignore complètement une partie d'un fichier, le traitant comme un texte littéral qui n'est pas analysé. L'entrée ci-dessous restera inchangée après l'embellissement :
// 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 */REMARQUE : cette directive ne fonctionne qu'en HTML et JavaScript, pas en CSS.
La directive preserve permet au Beautifier d'analyser puis de conserver le formatage existant d'une section de code.
L'entrée ci-dessous restera inchangée après l'embellissement :
// 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 */Vous êtes libre de l'utiliser comme vous le souhaitez, au cas où vous trouveriez cela utile ou efficace pour vous, mais vous devez conserver l'avis de droit d'auteur et la licence. (MIT)
Merci également à Jason Diamond, Patrick Hof, Nochum Sossonko, Andreas Schneider, Dave Vasilevsky, Vital Batmanov, Ron Baldwin, Gabriel Harrison, Chris J. Shull, Mathias Bynens, Vittorio Gambaletta et autres.
(LISEZMOI.md : [email protected])
