Impresionante módulo comunitario
  1. paxina principal
  2. módulo comunitario
  3. JS Embellecedor

JS Embellecedor

Estado de construción Estado de construción

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

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

estatísticas do NPM

Este pequeno embellecedor reformateará e reintegrará marcadores, JavaScript feo, desempaquetará scripts empaquetados polo popular empacador de Dean Edward, así como desofuscará scripts procesados ​​por javascriptobfuscator.com .

Necesítanse colaboradores

Poño isto en primeiro lugar porque os propietarios existentes teñen un tempo moi limitado para traballar neste proxecto actualmente. Este é un proxecto popular e moi utilizado, pero necesita desesperadamente colaboradores que teñan tempo para comprometerse a solucionar os erros que se enfrontan aos clientes e os problemas subxacentes. co deseño e implantación interna.

Se estás interesado, bótalle un ollo aoCONTRIBUTING.mda continuación, solucione un problema marcado coa etiqueta "Bo primeiro problema" e envíe un PR. Repíteo o maior número 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 un destes servizos, inclúa no teu documento un conxunto das etiquetas de guión que aparecen a continuación:

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>

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

Navegador web

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

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 da CLI pero con guións baixos en lugar 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 de Python, pode instalar o paquete NPM js-beautify. Cando se instala globalmente, proporciona un js-beautifyscript executable. Do mesmo xeito que co script de Python, o resultado embelecido envíase a stdouta menos que se configure o contrario.

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

Tamén podes usar js-beautifycomo nodebiblioteca (instalar localmente, o npmpredeterminado):

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é a cadea de código que se quere embelecer. Options é un obxecto coa configuración que desexa utilizar para embelecer o código.

Os nomes das opcións de configuración son os mesmos que os da CLI pero con guións baixos en lugar de guións. Por exemplo, --indent-size 2 --space-in-empty-parensería { 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

Estas son as marcas de liña de comandos para os scripts de 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 corresponden ás teclas de opción subliñadas para ambas as interfaces da biblioteca

valores predeterminados por opcións da 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 se expoñen a través da CLI. Históricamente, as API de Python e JS non foron 100 % idénticas. Por exemplo, space_before_conditionalactualmente só son JS e non se poden dirixir desde o script da CLI. Aínda quedan outros casos adicionais que se conservan. nós desde o 100% de compatibilidade con API.

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

Ademais dos argumentos da CLI, pode pasar a configuración ao executable JS mediante:

  • calquera jsbeautify_variable de ambiente con prefixo
  • 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 pouco profunda cuxos valores herdanse para todos os idiomas, pero pódense substituír. Isto funciona para as configuracións que se pasan directamente á API en calquera das implementacións. Na implementación de Javascript, a configuración cargada desde un ficheiro de configuración, como .jsbeautifyrc. , tamén pode usar a herdanza/anulación.

A continuación móstrase unha árbore de configuración de exemplo que mostra todas as localizacións admitidas para os nós de substitución de idiomas. Usarémola indent_sizepara discutir como se comportaría esta configuración, pero pódese herdar ou anular calquera número de opcións de configuración:

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

Usando o exemplo anterior tería o seguinte resultado:

  • Arquivos HTML
    • Herda indent_sizede 4 espazos da configuración 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
      • Anular a súa sangría a 2 espazos
  • ficheiros CSS
    • Anular a configuración de nivel superior a un indent_sizeespazo de 1.
  • Ficheiros JavaScript
    • Herda indent_sizede 4 espazos da configuración de nivel superior
    • Establecer preserve-newlinesentrue

CSS & HTML

Ademais do js-beautifyexecutable, css-beautifye html-beautify tamén se proporcionan como unha interface sinxela para eses scripts. Alternativamente, js-beautify --cssou js-beautify --htmllogrará 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 teñ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 seccións (só Javascript)

O embellecedor para admite directivas nos comentarios dentro do ficheiro. Isto permítelle indicarlle ao embelecedor que preserve o formato ou que ignore completamente parte do ficheiro. A entrada de exemplo a continuación seguirá cambiando 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

Podes usar isto do xeito que queiras, no caso de que che resulte útil ou que che funcione, pero debes conservar 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)

© Copyright 2012-2024 fibjs.org | Apóyanos