Embellisseur JS
Ce petit embellisseur reformatera et réindentera les bookmarklets, le vilain JavaScript, décompressera les scripts emballés par le populaire packer de Dean Edward, ainsi que les scripts désobfusqués traités par javascriptobfuscator.com .
Contributeurs nécessaires
Je mets ce point 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 les bogues des clients et les problèmes sous-jacents. avec la conception interne et la mise en œuvre.
Si vous êtes intéressé, jetez un œil à CONTRIBUTING.md puis corrigez un problème marqué avec le libellé "Bon premier numéro" et soumettez un PR. Répétez aussi souvent que possible. Merci!
Usage
Vous 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.
JS Beautifier est hébergé sur deux services CDN: cdnjs et rawgit.
Pour extraire de l'un de ces services, incluez un ensemble de balises de script ci-dessous dans votre document:
1
2
3
4
5
6
7
8
9
10
11<script src="https://cdnjs.cloudflare.com/ajax/libs/js-beautify/1.7.5/beautify.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/js-beautify/1.7.5/beautify-css.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/js-beautify/1.7.5/beautify-html.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/js-beautify/1.7.5/beautify.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/js-beautify/1.7.5/beautify-css.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/js-beautify/1.7.5/beautify-html.min.js"></script>
<script src="https://cdn.rawgit.com/beautify-web/js-beautify/v1.7.5/js/lib/beautify.js"></script>
<script src="https://cdn.rawgit.com/beautify-web/js-beautify/v1.7.5/js/lib/beautify-css.js"></script>
<script src="https://cdn.rawgit.com/beautify-web/js-beautify/v1.7.5/js/lib/beautify-html.js"></script>
Clause de non-responsabilité: il s'agit de services gratuits, il n'y a donc aucune garantie de disponibilité ou de support .
Navigateur Web
Ouvrez jsbeautifier.org . Les options sont disponibles via l'interface utilisateur.
Python
Pour embellir en utilisant python:
1
2$ pip install jsbeautifier
$ js-beautify file.js
La sortie embellie va à stdout
.
Pour utiliser jsbeautifier
comme bibliothèque, c'est simple:
1
2
3import jsbeautifier
res = jsbeautifier.beautify('your javascript string')
res = jsbeautifier.beautify_file('some_file.js')
... ou, pour spécifier certaines options:
1
2
3
4opts = 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 de la 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
.
JavaScript
Comme alternative au script Python, vous pouvez installer le package NPM js-beautify
. Lorsqu'il est installé globalement, il fournit un script exécutable js-beautify
. Comme pour le script Python, le résultat embelli est envoyé à stdout
sauf configuration contraire.
1
2$ npm -g install js-beautify
$ js-beautify foo.js
Vous pouvez également utiliser js-beautify
comme bibliothèque de node
(installer localement, la valeur par défaut de npm
):
1$ npm install js-beautify
Importez et appelez la méthode d'embellissement appropriée pour javascript (js), css ou html. Les trois signatures de méthode sont beautify(code, options)
. Le code
est la chaîne de code à embellir. Options est un objet avec les paramètres que vous souhaitez comme utilisé pour embellir le code.
Les noms des options de configuration sont les mêmes que les noms de l'interface de ligne de commande mais avec des tirets au lieu de tirets. Par exemple, --indent-size 2 --space-in-empty-paren
serait { indent_size: 2, space_in_empty_paren: true }
.
1
2
3
4
5
6
7
8
9var beautify = require('js-beautify').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 }));
});
Options
Voici les indicateurs de ligne de commande pour les scripts Python et JS:
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35CLI 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"]
-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 ()
-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 at next opportunity after 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]
Qui correspondent aux touches d'option soulignées pour les deux interfaces de bibliothèque
valeurs par défaut par options CLI
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23{
"indent_size": 4,
"indent_char": " ",
"indent_with_tabs": 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,
"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"
}
les valeurs par défaut ne sont pas exposées dans le cli
1
2
3
4{
"eval_code": false,
"space_before_conditional": true
}
Notez que toutes les valeurs par défaut ne sont pas exposées via l'interface de ligne de commande. Historiquement, les API Python et JS ne sont pas identiques à 100%. Par exemple, space_before_conditional
est actuellement uniquement JS et ne peut pas être adressé à partir du script CLI. Il existe encore quelques autres cas supplémentaires nous empêchant de 100% de compatibilité API.
Loading settings from environment or .jsbeautifyrc (JavaScript-Only)
En plus des arguments CLI, vous pouvez passer config à l'exécutable JS via:
- toutes les variables d'environnement
jsbeautify_
jsbeautify_ - un fichier au format
JSON
indiqué par le paramètre--config
- un fichier
.jsbeautifyrc
contenantJSON
donnéesJSON
à n'importe quel niveau du système de fichiers au-dessus de$PWD
Les sources de configuration fournies plus tôt dans cette pile remplaceront les plus récentes.
Setting inheritance and Language-specific overrides
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 utilisez également 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 expliquer le comportement de cette configuration, mais un certain nombre de paramètres peuvent être hérités ou remplacés:
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18{
"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 aurait le résultat suivant:
- Fichiers HTML
-
indent_size
de 4 espaces du paramètre de niveau supérieur. - Les fichiers se termineraient également par une nouvelle ligne.
- JavaScript et CSS dans HTML
- Hériter du paramètre HTML
end_with_newline
- Remplacer leur indentation à 2 espaces
- Hériter du paramètre HTML
-
- Fichiers CSS
- Remplacez le paramètre de niveau supérieur par
indent_size
de 1 espace.
- Remplacez le paramètre de niveau supérieur par
- Fichiers JavaScript
- Hériter
indent_size
de 4 espaces du paramètre de niveau supérieur - Définissez
preserve-newlines
surtrue
- Hériter
CSS & HTML
En plus de l'exécutable js-beautify
, css-beautify
et html-beautify
sont également fournis comme une interface simple dans ces scripts. Alternativement, js-beautify --css
ou js-beautify --html
accomplira la même chose, respectivement.
1
2
3
4
5
6// 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.
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27CSS 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
-L, --selector-separator-newline Add a newline between multiple selectors
-N, --newline-between-rules Add a newline between CSS rules
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] ["auto"]
-i, --wrap-attributes-indent-size Indent wrapped attributes to after N characters [indent-size] (ignored if wrap-attributes is "force-aligned")
-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
Directives pour ignorer ou conserver les sections (Javascript uniquement)
Beautifier pour prend en charge les directives dans les commentaires à l'intérieur du fichier. Cela vous permet d'indiquer à l'embellisseur de conserver la mise en forme ou d'ignorer complètement une partie d'un fichier. L'exemple d'entrée ci-dessous restera modifié après l'embellissement
1
2
3
4
5
6
7
8
9
10
11
12
13
14// Use preserve when the content is not javascript, but you don't want it reformatted.
/* beautify preserve:start */
{
browserName: 'internet explorer',
platform: 'Windows 7',
version: '8'
}
/* beautify preserve:end */
// Use ignore when the content is not parsable as javascript.
var a = 1;
/* beautify ignore:start */
{This is some strange{template language{using open-braces?
/* beautify ignore:end */
Licence
Vous êtes libre de l'utiliser comme vous le souhaitez, au cas où vous le trouveriez utile ou fonctionnant pour vous, mais vous devez conserver l'avis de droit d'auteur et la licence. (MIT)
Crédits
- Created by Einar Lielmanis , einar@jsbeautifier.org
- Version Python épanouie par Stefano Sanfilippo a.little.coder@gmail.com
- Ligne de commande pour node.js par Daniel Stockman daniel.stockman@gmail.com
- Maintenu et développé par Liam Newman bitwiseman@gmail.com
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: js-beautify@1.7.5 )