js beautify
v1.15.1 ?
Este pequeno embelezador irá reformatar e recuar bookmarklets, JavaScript feio, descompactar scripts compactados pelo popular empacotador de Dean Edward, bem como desofuscar parcialmente scripts processados pelo pacote npm javascript-obfuscator.
Abra beautifier.io para experimentar. As opções estão disponíveis por meio da IU.
Estou colocando isso em destaque porque os proprietários existentes têm tempo muito limitado para trabalhar neste projeto atualmente. Este é um projeto popular e amplamente utilizado, mas precisa desesperadamente de colaboradores que tenham tempo para se comprometer a corrigir os bugs enfrentados pelos clientes e os problemas subjacentes com o design interno e a implementação.
Se você estiver interessado, dê uma olhada em CONTRIBUTING.md, corrija um problema marcado com o rótulo "Bom primeiro problema" e envie um PR. Repita sempre que possível. Obrigado!
Você pode instalar o embelezador para Node.js ou Python.
Você pode instalar o pacote NPM js-beautify . Quando instalado globalmente, ele fornece um script js-beautify executável. Tal como acontece com o script Python, o resultado embelezado é enviado para stdout a menos que seja configurado de outra forma.
$ npm -g install js-beautify
$ js-beautify foo.js Você também pode usar js-beautify como uma biblioteca node (instalar localmente, o padrão npm ):
$ npm install js-beautifyO acima instala a versão estável mais recente. Para instalar versões beta ou RC:
$ npm install js-beautify@nextO embelezador pode ser adicionado à sua página como uma biblioteca da web.
JS Beautifier está hospedado em dois serviços CDN: cdnjs e rawgit.
Para obter a versão mais recente de um desses serviços, inclua um conjunto de tags de script abaixo em seu documento:
< 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 >Exemplo de uso de uma tag JS em 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 >Versões mais antigas estão disponíveis alterando o número da versão.
Isenção de responsabilidade: estes são serviços gratuitos, portanto não há garantias de tempo de atividade ou suporte.
Para instalar a versão Python do embelezador:
$ pip install jsbeautifierAo contrário da versão JavaScript, a versão Python só pode reformatar JavaScript. Não funciona em arquivos HTML ou CSS, mas você pode instalar css-beautify para CSS:
$ pip install cssbeautifierVocê pode embelezar o JavaScript usando JS Beautifier em seu navegador ou na linha de comando usando Node.js ou Python.
Abra beautifier.io. As opções estão disponíveis por meio da IU.
Depois de incorporar as tags <script> em seu arquivo html , elas expõem três funções: js_beautify , css_beautify e html_beautify
Exemplo de uso de embelezamento de uma string 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,
}
*/ Quando instalado globalmente, o embelezador fornece um script js-beautify executável. O resultado embelezado é enviado para stdout a menos que seja configurado de outra forma.
$ js-beautify foo.js Para usar js-beautify como uma biblioteca node (após a instalação local), importe e chame o método embelezador apropriado para JavaScript (JS), CSS ou HTML. Todas as três assinaturas de método são beautify(code, options) . code é a sequência de código a ser embelezada. options é um objeto com as configurações que você gostaria de usar para embelezar o código.
Os nomes das opções de configuração são iguais aos nomes da CLI, mas com sublinhados em vez de traços. Por exemplo, --indent-size 2 --space-in-empty-paren seria { 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 } ) ) ;
} ) ; Se você estiver usando importações do ESM, poderá importar js-beautify assim:
// 'beautify' can be any name here.
import beautify from 'js-beautify' ;
beautify . js ( data , options ) ;
beautify . html ( data , options ) ;
beautify . css ( data , options ) ; Após a instalação, para embelezar usando Python:
$ js-beautify file.js A saída embelezada vai para stdout por padrão.
Usar jsbeautifier como biblioteca é simples:
import jsbeautifier
res = jsbeautifier . beautify ( 'your JavaScript string' )
res = jsbeautifier . beautify_file ( 'some_file.js' )...ou, para especificar algumas opções:
opts = jsbeautifier . default_options ()
opts . indent_size = 2
opts . space_in_empty_paren = True
res = jsbeautifier . beautify ( 'some JavaScript' , opts ) Os nomes das opções de configuração são iguais aos nomes da CLI, mas com sublinhados em vez de traços. O exemplo acima seria definido na linha de comando como --indent-size 2 --space-in-empty-paren .
Estes são os sinalizadores de linha de comando para scripts Python e 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
Que correspondem às teclas de opção sublinhadas para ambas as interfaces da biblioteca
padrões por opções 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 " ]
}padrões não expostos no CLI
{
"eval_code" : false ,
"space_before_conditional" : true
}Observe que nem todos os padrões são expostos por meio da CLI. Historicamente, as APIs Python e JS não foram 100% idênticas. Ainda existem alguns outros casos adicionais que nos impedem de 100% de compatibilidade com API.
Além dos argumentos CLI, você pode passar a configuração para o executável JS por meio de:
jsbeautify_JSON indicado pelo parâmetro --config.jsbeautifyrc contendo dados JSON em qualquer nível do sistema de arquivos acima de $PWDAs fontes de configuração fornecidas anteriormente nesta pilha substituirão as posteriores.
As configurações são uma árvore rasa cujos valores são herdados para todos os idiomas, mas podem ser substituídos. Isso funciona para configurações passadas diretamente para a API em qualquer implementação. Na implementação JavaScript, as configurações carregadas de um arquivo de configuração, como .jsbeautifyrc, também podem usar herança/substituição.
Abaixo está um exemplo de árvore de configuração mostrando todos os locais suportados para nós de substituição de idioma. Usaremos indent_size para discutir como essa configuração se comportaria, mas qualquer número de configurações pode ser herdado ou substituído:
{
"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 acima teria o seguinte resultado:
indent_size de 4 espaços da configuração de nível superior.end_with_newline .indent_size de 1 espaço.indent_size de 4 espaços da configuração de nível superior.preserve-newlines como true . Além do executável js-beautify , css-beautify e html-beautify também são fornecidos como uma interface fácil para esses scripts. Alternativamente, js-beautify --css ou js-beautify --html realizarão a mesma coisa, respectivamente.
// 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 embelezadores CSS e HTML têm um escopo muito mais simples e possuem muito menos opções.
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
As diretivas permitem controlar o comportamento do Embelezador a partir dos arquivos de origem. As diretivas são colocadas em comentários dentro do arquivo. As diretivas estão no formato /* beautify {name}:{value} */ em CSS e JavaScript. Em HTML eles são formatados como <!-- beautify {name}:{value} --> .
A diretiva ignore faz com que o embelezador ignore completamente parte de um arquivo, tratando-o como texto literal que não é analisado. A entrada abaixo permanecerá inalterada após o embelezamento:
// 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 */NOTA: esta diretiva só funciona em HTML e JavaScript, não em CSS.
A diretiva preserve faz o Beautifier analisar e manter a formatação existente de uma seção de código.
A entrada abaixo permanecerá inalterada após o embelezamento:
// 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 */Você é livre para usar isso da maneira que quiser, caso ache útil ou funcional para você, mas você deve manter o aviso de direitos autorais e a licença. (MIT)
Obrigado também 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: [email protected])
