Módulo comunitario incrible

JS Beautifier

Estado de compilación Estado de compilación

Versión PyPI Versión CDNJS Versión NPM Descargar estatísticas

Únete ao chat en https://gitter.im/beautify-web/js-beautify Twitter Follow

Estatísticas de NPM

Este pequeno embelecedor reformatará e reincorporará os marcadores, o feo JavaScript, descomprimirá os scripts empaquetados polo popular empaquetador de Dean Edward, así como os desobfuscará os scripts procesados ​​por javascriptobfuscator.com .

Necesítanse colaboradores

Estou poñendo este eixo central porque os propietarios actuais teñen un tempo moi limitado para traballar neste proxecto. Este é un proxecto popular e moi utilizado, pero necesita desesperadamente colaboradores que teñan tempo para comprometerse a solucionar os erros que enfrontan os clientes e os problemas subxacentes. co deseño e implementación interna.

Se estás interesado, bótalle un ollo ao CONTRIBUTING.mddespois soluciona un problema marcado coa etiqueta "Bo primeiro número" e envía un PR. Repite o máis axiña posible. Grazas!

Uso

Podes embelecer JavaScript usando JS Beautifier no teu navegador web ou na liña de comandos usando node.js ou python.

JS Beautifier está aloxado en dous servizos CDN: cdnjs e rawgit.

Para extraer dun destes servizos inclúe un conxunto de etiquetas de script a continuación no documento:

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>

Exención de responsabilidade: son servizos gratuítos, polo que non hai tempo de actividade nin garantías de asistencia .

Navegador web

Abre jsbeautifier.org . As opcións están dispoñibles a través da interface de usuario.

Python

Para embelecer usando python:

1 2
$ pip install jsbeautifier $ js-beautify file.js

A saída embelecida vai a stdout.

Usalo jsbeautifiercomo biblioteca é sinxelo:

1 2 3
import jsbeautifier res = jsbeautifier.beautify('your javascript string') res = jsbeautifier.beautify_file('some_file.js')

... ou, para especificar algunhas opcións:

1 2 3 4
opts = jsbeautifier.default_options() opts.indent_size = 2 opts.space_in_empty_paren = True res = jsbeautifier.beautify('some javascript', opts)

Os nomes das opcións de configuración son os mesmos que os nomes CLI pero con guións baixos no canto de guións. O exemplo anterior estableceríase na liña de comandos como --indent-size 2 --space-in-empty-paren.

JavaScript

Como alternativa ao script Python, pode instalar o paquete NPM js-beautify. Cando se instala globalmente, proporciona un js-beautifyscript executable . Como ocorre co script Python, o resultado embelecido envíase a stdoutmenos que se configure outra cousa.

1 2
$ npm -g install js-beautify $ js-beautify foo.js

Tamén podes usar js-beautifycomo nodebiblioteca (instalar localmente, npmpor defecto):

1
$ npm install js-beautify

Importe e chame ao método de embelecemento apropiado para javascript (js), css ou html. As tres sinaturas do método son beautify(code, options). codeÉ unha cadea de código que se vai embelecer. As opcións son un obxecto coa configuración que desexa que se use para embelecer o código.

Os nomes das opcións de configuración son os mesmos que os nomes CLI pero con guións baixos no canto de guións. Por exemplo, --indent-size 2 --space-in-empty-parenserían { indent_size: 2, space_in_empty_paren: true }.

1 2 3 4 5 6 7 8 9
var 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 })); });

Opcións

Estes son os indicadores de liña de comandos para os scripts Python e 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 35
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"] -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 se corresponden coas teclas de opción subliñadas para ambas as interfaces de biblioteca

valores predeterminados por opcións 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" }

valores predeterminados non expostos no cli

1 2 3 4
{ "eval_code": false, "space_before_conditional": true }

Teña en conta que non todos os valores predeterminados están expostos a través da CLI. Historicamente, as API de Python e JS non eran 100% idénticas. Por exemplo, space_before_conditionalactualmente só son JS e non se poden dirixir desde o script CLI. Aínda hai algúns outros casos adicionais que se manteñen. compatibilidade co 100% das API.

Loading settings from environment or .jsbeautifyrc (JavaScript-Only)

Ademais dos argumentos CLI, pode pasar a configuración ao executable de JS a través de:

  • calquera jsbeautify_variable de entorno prefixada
  • un JSONficheiro con formato indicado polo --configparámetro
  • un .jsbeautifyrcficheiro que contén JSONdatos a calquera nivel do sistema de ficheiros anterior$PWD

As fontes de configuración proporcionadas anteriormente nesta pila anularán as posteriores.

Setting inheritance and Language-specific overrides

A configuración é unha árbore superficial cuxos valores se herdan para todos os idiomas, pero poden ser anulados. Isto funciona para a configuración que se pasa directamente á API en calquera das dúas implementacións. Na implementación de Javascript, as opcións cargadas desde un ficheiro de configuración, como .jsbeautifyrc , tamén pode usar herdanza / anulación.

A continuación móstrase un exemplo de árbore de configuración que mostra todas as localizacións admitidas para os nodos de anulación de idioma. Usarémolo indent_sizepara comentar como se comportaría esta configuración, pero pódese herdar ou anular calquera número de axustes:

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 } }

Usar o exemplo anterior tería o seguinte resultado:

  • Arquivos HTML
    • Herda indent_sizede 4 espazos do axuste de nivel superior.
    • Os ficheiros tamén rematarían cunha nova liña.
    • JavaScript e CSS dentro de HTML
      • Herda a end_with_newlineconfiguración HTML
      • Anula a súa sangría a 2 espazos
  • Arquivos CSS
    • Anula a configuración de nivel superior a un indent_sizeespazo.
  • Ficheiros JavaScript
    • Herda indent_sizede 4 espazos do axuste de nivel superior
    • Definido preserve-newlinescomotrue

CSS & HTML

Ademais do js-beautifyexecutable, css-beautifye html-beautify tamén son proporcionados como unha interface fácil para estes scripts. Alternativamente, js-beautify --cssou js-beautify --htmlvai facer o mesmo, respectivamente.

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.

Os embelecedores CSS e HTML teñen un alcance moito máis sinxelo e posúen moitas menos opcións.

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
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 -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

Directivas para ignorar ou conservar as seccións (só Javascript)

O embelecedor admite directivas nos comentarios dentro do ficheiro. Isto permítelle indicarlle ao embelecedor que conserve o formato ou que ignore completamente unha parte dun ficheiro. O exemplo de entrada seguinte cambiarase despois do embelecemento

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 */

Licenza

Vostede é libre de empregalo do xeito que queira, no caso de que lle resulte útil ou funcione para vostede pero debe manter o aviso de copyright e a licenza. (MIT)

Créditos

Grazas tamé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 e outros.

(README.md: js-beautify@1.7.5 )