JS Embellidor
Aquest petit embellidor tornarà a formatar i reincorporar els bookmarklets, el feix JavaScript, descomprimirà els scripts empaquetats pel popular empaquetador de Dean Edward, així com desobfuscarà els scripts processats per javascriptobfuscator.com .
Es necessiten col·laboradors
Estic posant aquest enfocament a la part superior perquè els propietaris existents tenen un temps molt limitat per treballar en aquest projecte actualment. Aquest és un projecte popular i molt utilitzat, però necessita desesperadament col·laboradors que tinguin temps de comprometre’s a solucionar tant els errors que s’enfronten als clients com els problemes subjacents. amb el disseny intern i la implementació.
Si esteu interessats, mireu el CONTRIBUTING.mda continuació, solucioneu un problema marcat amb l' etiqueta "Bon primer número" i envieu un PR. Repetiu-lo el més sovint possible. Gràcies!
Ús
Podeu embellir javascript mitjançant JS Beautifier al navegador web o a la línia d’ordres mitjançant node.js o python.
JS Beautifier està allotjat en dos serveis de CDN: cdnjs i rawgit.
Per extreure un d'aquests serveis, incloeu un conjunt d'etiquetes de seqüència següents al 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>
Exempció de responsabilitat: es tracta de serveis gratuïts, de manera que no hi ha cap temps d'activitat ni garanties d'assistència .
Navegador web
Obriu jsbeautifier.org . Les opcions estan disponibles a través de la IU.
Python
Per embellir amb Python:
1
2$ pip install jsbeautifier
$ js-beautify file.js
La sortida embellida va a stdout
.
Utilitzar jsbeautifier
com a biblioteca és senzill:
1
2
3import jsbeautifier
res = jsbeautifier.beautify('your javascript string')
res = jsbeautifier.beautify_file('some_file.js')
... o bé, per especificar algunes opcions:
1
2
3
4opts = jsbeautifier.default_options()
opts.indent_size = 2
opts.space_in_empty_paren = True
res = jsbeautifier.beautify('some javascript', opts)
Els noms de les opcions de configuració són els mateixos que els noms de la CLI, però amb guions baixos en comptes de guions. L'exemple anterior es definiria a la línia d'ordres com --indent-size 2 --space-in-empty-paren
.
JavaScript
Com a alternativa a l’escriptura Python, podeu instal·lar el paquet NPM js-beautify
. Quan s’instal·la globalment, proporciona un js-beautify
script executable . Igual que amb l’escriptura Python, el resultat embellit s’envia a stdout
menys que es configuri el contrari.
1
2$ npm -g install js-beautify
$ js-beautify foo.js
També podeu utilitzar-la js-beautify
com a node
biblioteca (instal·leu-la localment, npm
per defecte):
1$ npm install js-beautify
Importeu i truqueu el mètode d’embellidor adequat per a javascript (js), css o html. Les tres signatures del mètode són beautify(code, options)
. code
És una cadena de codi que s’ha d’embellir. Les opcions són un objecte amb la configuració que voleu que s’utilitzi per embellir el codi.
Els noms de les opcions de configuració són els mateixos que els noms de la CLI, però amb guions baixos en lloc de guions. Per exemple, --indent-size 2 --space-in-empty-paren
seria { 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 }));
});
Opcions
Aquests són els indicadors de línia d'ordres per als scripts Python i 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]
Que corresponen a les claus d'opció subratllades per a les dues interfícies de biblioteca
valors predeterminats per opcions de 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"
}
els valors per defecte no exposats al cli
1
2
3
4{
"eval_code": false,
"space_before_conditional": true
}
Tingueu en compte que no tots els valors predeterminats s’exposen mitjançant la CLI. Històricament, les API de Python i JS no eren 100% idèntiques. Per exemple, space_before_conditional
actualment només és JS i no es pot adreçar des de l’escriptura CLI. Encara hi ha alguns altres casos addicionals que mantenen compatibilitat amb l'API al 100%.
Loading settings from environment or .jsbeautifyrc (JavaScript-Only)
A més dels arguments CLI, podeu passar la configuració a l'executable JS mitjançant:
- qualsevol
jsbeautify_
variable d'entorn prefixada - un
JSON
fitxer amb format indicat pel--config
paràmetre - un
.jsbeautifyrc
fitxer que contéJSON
dades a qualsevol nivell del sistema de fitxers anterior$PWD
Les fonts de configuració proporcionades anteriorment en aquesta pila anul·laran les posteriors.
Setting inheritance and Language-specific overrides
Els paràmetres són un arbre poc profund els valors dels quals s'hereten per a tots els idiomes, però es poden anul·lar. Funciona per a paràmetres que es transmeten directament a l'API en qualsevol de les dues implementacions. A la implementació de Javascript, els paràmetres es carreguen des d'un fitxer de configuració, com ara .jsbeautifyrc , també pot utilitzar l'herència / substitució.
A continuació es mostra un exemple d'arbre de configuració que mostra totes les ubicacions admeses per als nodes de substitució d'idioma. L'utilitzarem indent_size
per analitzar el comportament d'aquesta configuració, però es pot heretar o anul·lar qualsevol configuració:
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
}
}
Si feu servir l’exemple anterior tindríeu el resultat següent:
- Fitxers HTML
- Hereta
indent_size
de 4 espais de la configuració de nivell superior. - Els fitxers també acabarien amb una nova línia.
- JavaScript i CSS dins de HTML
- Hereta la
end_with_newline
configuració HTML - Substitueix el seu sagnat a 2 espais
- Hereta la
- Hereta
- Fitxers CSS
- Substitueix la configuració de nivell superior a un
indent_size
espai d'1.
- Substitueix la configuració de nivell superior a un
- Fitxers JavaScript
- Hereta
indent_size
de 4 espais de la configuració de nivell superior - Estableix
preserve-newlines
atrue
- Hereta
CSS & HTML
A més de l' js-beautify
executable, css-beautify
i html-beautify
també es proporcionen com una interfície fàcil en aquests scripts. Alternativament,
js-beautify --css
o js-beautify --html
va a aconseguir el mateix, respectivament.
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.
Els embellidors CSS i HTML tenen un abast molt més senzill i tenen moltes menys opcions.
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
Directrius per ignorar o conservar seccions (només Javascript)
Embellidor per admet directrius als comentaris dins del fitxer. Això us permet indicar a l’embellidor que conservi el format o ignori completament una part d’un fitxer. L’exemple d’entrada següent es modificarà després de l’embelliment
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 */
Llicència
Podeu utilitzar-lo de la manera que vulgueu, en cas que us resulti útil o us funcioni, però heu de mantenir l'avís i la llicència de drets d'autor. (MIT)
Crèdits
- Creat per Einar Lielmanis, einar@jsbeautifier.org
- La versió de Python florida per Stefano Sanfilippo a.little.coder@gmail.com
- Línia d'ordres per a node.js de Daniel Stockman daniel.stockman@gmail.com
- Mantingut i ampliat per Liam Newman bitwiseman@gmail.com
Gràcies també a Jason Diamond, Patrick Hof, Nochum Sossonko, Andreas Schneider, Dave Vasilevsky, Vital Batmanov, Ron Baldwin, Gabriel Harrison, Chris J. Shull, Mathias Bynens, Vittorio Gambaletta i altres.
(README.md: js-beautify@1.7.5 )