js beautify
v1.15.1 ?
이 작은 미화 도구는 북마크릿, 보기 흉한 JavaScript, Dean Edward의 인기 패커로 압축된 압축 풀기 스크립트뿐만 아니라 npm 패키지 javascript-obfuscator로 처리된 부분 난독 해제 스크립트를 다시 형식화하고 다시 들여쓰기합니다.
Beautifier.io를 열어서 사용해 보세요. 옵션은 UI를 통해 사용할 수 있습니다.
기존 소유자가 현재 이 프로젝트를 수행할 수 있는 시간이 매우 제한되어 있기 때문에 이 내용을 가장 중요한 부분에 두었습니다. 이 프로젝트는 널리 사용되는 인기 있는 프로젝트이지만 고객이 직면한 버그와 내부 설계 및 구현의 근본적인 문제를 모두 해결하는 데 전념할 시간이 있는 기여자가 절실히 필요합니다.
관심이 있으시면 CONTRIBUTING.md를 살펴보신 후 "Good first issue" 라벨이 표시된 문제를 수정하고 PR을 제출해 주세요. 가능한 한 자주 반복하십시오. 감사해요!
Node.js 또는 Python용 뷰티파이어를 설치할 수 있습니다.
NPM 패키지 js-beautify 설치할 수 있습니다. 전역적으로 설치하면 실행 가능한 js-beautify 스크립트가 제공됩니다. Python 스크립트와 마찬가지로 별도로 구성하지 않는 한 아름다운 결과가 stdout 으로 전송됩니다.
$ npm -g install js-beautify
$ js-beautify foo.js js-beautify node 라이브러리로 사용할 수도 있습니다(로컬 설치, npm 기본값).
$ npm install js-beautify위의 내용은 최신 안정 릴리스를 설치합니다. 베타 또는 RC 버전을 설치하려면:
$ npm install js-beautify@next미화 프로그램은 귀하의 페이지에 웹 라이브러리로 추가될 수 있습니다.
JS Beautifier는 cdnjs와 rawgit이라는 두 가지 CDN 서비스에서 호스팅됩니다.
이러한 서비스 중 하나에서 최신 버전을 가져오려면 문서에 아래 스크립트 태그 세트 하나를 포함하세요.
< 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 >HTML에서 JS 태그 사용 예:
<!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 >버전 번호를 변경하면 이전 버전을 사용할 수 있습니다.
면책조항: 이는 무료 서비스이므로 가동 시간이나 지원이 보장되지 않습니다.
Python 버전의 뷰티파이어를 설치하려면:
$ pip install jsbeautifierJavaScript 버전과 달리 Python 버전은 JavaScript만 다시 형식화할 수 있습니다. HTML 또는 CSS 파일에서는 작동하지 않지만 CSS용 css-beautify를 설치할 수 있습니다.
$ pip install cssbeautifier웹 브라우저에서 JS Beautifier를 사용하거나 Node.js 또는 Python을 사용하여 명령줄에서 JavaScript를 아름답게 만들 수 있습니다.
beautifier.io를 엽니다. 옵션은 UI를 통해 사용할 수 있습니다.
html 파일에 <script> 태그를 삽입하면 js_beautify , css_beautify 및 html_beautify 의 세 가지 기능이 노출됩니다.
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,
}
*/ 전역적으로 설치되면 미화 프로그램은 실행 가능한 js-beautify 스크립트를 제공합니다. 별도로 구성하지 않는 한 미화된 결과는 stdout 으로 전송됩니다.
$ js-beautify foo.js js-beautify node 라이브러리로 사용하려면(로컬 설치 후) JavaScript(JS), CSS 또는 HTML에 대한 적절한 Beautifier 메서드를 가져오고 호출하세요. 세 가지 메소드 서명은 모두 beautify(code, options) 입니다. code 아름답게 만들 코드 문자열입니다. options은 코드를 아름답게 만드는 데 사용하려는 설정이 포함된 개체입니다.
구성 옵션 이름은 CLI 이름과 동일하지만 대시 대신 밑줄이 사용됩니다. 예를 들어 --indent-size 2 --space-in-empty-paren { 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 } ) ) ;
} ) ; ESM 가져오기를 사용하는 경우 다음과 같이 js-beautify 가져올 수 있습니다.
// 'beautify' can be any name here.
import beautify from 'js-beautify' ;
beautify . js ( data , options ) ;
beautify . html ( data , options ) ;
beautify . css ( data , options ) ; 설치 후 Python을 사용하여 아름답게 하려면:
$ js-beautify file.js 아름답게 꾸며진 출력은 기본적으로 stdout 으로 이동합니다.
jsbeautifier 라이브러리로 사용하는 방법은 간단합니다.
import jsbeautifier
res = jsbeautifier . beautify ( 'your JavaScript string' )
res = jsbeautifier . beautify_file ( 'some_file.js' )...또는 일부 옵션을 지정하려면 다음을 수행하세요.
opts = jsbeautifier . default_options ()
opts . indent_size = 2
opts . space_in_empty_paren = True
res = jsbeautifier . beautify ( 'some JavaScript' , opts ) 구성 옵션 이름은 CLI 이름과 동일하지만 대시 대신 밑줄이 사용됩니다. 위의 예는 명령줄에서 --indent-size 2 --space-in-empty-paren 으로 설정됩니다.
다음은 Python 및 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
두 라이브러리 인터페이스의 밑줄이 그어진 옵션 키에 해당합니다.
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 " ]
}CLI에 노출되지 않은 기본값
{
"eval_code" : false ,
"space_before_conditional" : true
}CLI를 통해 모든 기본값이 노출되는 것은 아닙니다. 역사적으로 Python과 JS API는 100% 동일하지 않았습니다. 100% API 호환성을 방해하는 몇 가지 추가 사례가 아직 남아 있습니다.
CLI 인수 외에도 다음을 통해 config를 JS 실행 파일에 전달할 수 있습니다.
jsbeautify_ -접두사가 붙은 환경 변수--config 매개변수로 표시되는 JSON 형식의 파일$PWD 이상의 파일 시스템 수준에 있는 JSON 데이터를 포함하는 .jsbeautifyrc 파일이 스택의 앞부분에 제공된 구성 소스는 이후의 구성 소스를 재정의합니다.
설정은 모든 언어에 대해 값이 상속되지만 재정의될 수 있는 얕은 트리입니다. 이는 두 구현 모두에서 API에 직접 전달된 설정에 적용됩니다. JavaScript 구현에서는 .jsbeautifyrc와 같은 구성 파일에서 로드된 설정도 상속/재정의를 사용할 수 있습니다.
다음은 언어 재정의 노드에 대해 지원되는 모든 위치를 보여주는 예제 구성 트리입니다. indent_size 사용하여 이 구성이 어떻게 작동할지 논의할 예정이지만 원하는 만큼의 설정을 상속하거나 재정의할 수 있습니다.
{
"indent_size" : 4 ,
"html" : {
"end_with_newline" : true ,
"js" : {
"indent_size" : 2
},
"css" : {
"indent_size" : 2
}
},
"css" : {
"indent_size" : 1
},
"js" : {
"preserve-newlines" : true
}
}위의 예를 사용하면 다음과 같은 결과가 나타납니다.
indent_size 상속받습니다.end_with_newline 설정을 상속합니다.indent_size 1 공백으로 재정의합니다.indent_size 상속받습니다.preserve-newlines true 로 설정합니다. js-beautify 실행 파일 외에도 css-beautify 및 html-beautify 도 해당 스크립트에 대한 쉬운 인터페이스로 제공됩니다. 또는 js-beautify --css 또는 js-beautify --html 각각 동일한 작업을 수행합니다.
// 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.CSS 및 HTML 미화자는 범위가 훨씬 간단하고 옵션이 훨씬 적습니다.
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
지시문을 사용하면 소스 파일 내에서 Beautifier의 동작을 제어할 수 있습니다. 지시문은 파일 내부의 주석에 배치됩니다. 지시어는 CSS 및 JavaScript에서 /* beautify {name}:{value} */ 형식입니다. HTML에서는 <!-- beautify {name}:{value} --> 형식으로 지정됩니다.
ignore 지시문은 미화기가 파일의 일부를 완전히 무시하고 이를 구문 분석되지 않은 리터럴 텍스트로 처리하도록 만듭니다. 아래 입력은 미화 후에도 변경되지 않습니다.
// 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 */참고: 이 지시문은 CSS가 아닌 HTML 및 JavaScript에서만 작동합니다.
preserve 지시어는 Beautifier가 코드 섹션의 기존 형식을 구문 분석한 다음 유지하도록 합니다.
아래 입력은 미화 후에도 변경되지 않습니다.
// 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 */이 내용이 유용하거나 도움이 된다면 원하는 방식으로 자유롭게 사용할 수 있지만 저작권 표시와 라이센스를 유지해야 합니다. (MIT)
Jason Diamond, Patrick Hof, Nochum Sossonko, Andreas Schneider, Dave Vasilevsky, Vital Batmanov, Ron Baldwin, Gabriel Harrison, Chris J. Shull, Mathias Bynens, Vittorio Gambaletta 등에게도 감사드립니다.
(README.md: [email protected])
