JS 뷰티파이어
이 작은 미화 프로그램은 북마크릿, 보기 흉한 JavaScript, Dean Edward의 인기 패커로 압축된 압축 풀기 스크립트 및 javascriptobfuscator.com 에서 처리된 난독화 스크립트를 다시 형식화하고 다시 정의합니다 .
필요한 기여자
기존 소유자가 현재 이 프로젝트를 수행할 수 있는 시간이 매우 제한되어 있기 때문에 이 내용을 전면에 배치하고 있습니다. 이 프로젝트는 인기 있는 프로젝트이고 널리 사용되지만 고객이 직면한 버그와 근본적인 문제를 해결하는 데 전념할 시간이 있는 기여자가 절실히 필요합니다. 내부 설계 및 구현을 통해
관심있으신 분들은 한번 살펴보시길 바랍니다CONTRIBUTING.md그런 다음 "좋은 첫 번째 문제" 라벨 이 표시된 문제를 수정 하고 PR을 제출하세요. 가능한 한 자주 반복하세요. 감사합니다!
용법
웹 브라우저에서 JS Beautifier를 사용하거나 node.js 또는 Python을 사용하여 명령줄에서 javascript를 아름답게 만들 수 있습니다.
JS Beautifier는 cdnjs 와 rawgit이라는 두 가지 CDN 서비스에서 호스팅됩니다.
이러한 서비스 중 하나에서 가져오려면 문서에 아래 스크립트 태그 세트 하나를 포함하세요.
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>
면책조항: 이는 무료 서비스이므로 가동 시간이나 지원이 보장되지 않습니다 .
웹 브라우저
jsbeautifier.org를 엽니다 . UI를 통해 옵션을 사용할 수 있습니다.
파이썬
Python을 사용하여 아름답게 하려면:
1
2$ pip install jsbeautifier
$ js-beautify file.js
아름답게 출력된 내용은 stdout.
jsbeautifier라이브러리로 사용하는 방법은 간단합니다.
1
2
3import jsbeautifier
res = jsbeautifier.beautify('your javascript string')
res = jsbeautifier.beautify_file('some_file.js')
...또는 일부 옵션을 지정하려면 다음을 수행하세요.
1
2
3
4opts = 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 스크립트 대신 NPM 패키지를 설치할 수 있습니다 js-beautify. 전역적으로 설치하면 실행 가능한 스크립트를 제공합니다 js-beautify. Python 스크립트와 마찬가지로 stdout별도로 구성하지 않는 한 아름다운 결과가 전송됩니다.
1
2$ npm -g install js-beautify
$ js-beautify foo.js
js-beautify라이브러리 로 사용할 수도 있습니다 node(로컬 설치, 기본값 npm).
1$ npm install js-beautify
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 }.
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 }));
});
옵션
다음은 Python 및 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]
두 라이브러리 인터페이스의 밑줄이 그어진 옵션 키에 해당합니다.
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"
}
CLI에 노출되지 않은 기본값
1
2
3
4{
"eval_code": false,
"space_before_conditional": true
}
모든 기본값이 CLI를 통해 노출되는 것은 아닙니다. 역사적으로 Python과 JS API는 100% 동일하지 않았습니다. 예를 들어 space_before_conditional현재 JS 전용이며 CLI 스크립트에서 주소를 지정할 수 없습니다. 여전히 몇 가지 다른 추가 사례가 있습니다. 100% API 호환성을 보장합니다.
Loading settings from environment or .jsbeautifyrc (JavaScript-Only)
CLI 인수 외에도 다음을 통해 config를 JS 실행 파일에 전달할 수 있습니다.
- any
jsbeautify_접두사가 붙은 환경 변수 - 매개변수
JSON로 표시된 형식의 파일--config - 위 파일 시스템의 모든 수준에 있는 데이터를
.jsbeautifyrc포함하는 파일JSON$PWD
이 스택의 앞부분에 제공된 구성 소스는 이후의 구성 소스를 재정의합니다.
Setting inheritance and Language-specific overrides
설정은 모든 언어에 대해 값이 상속되지만 재정의될 수 있는 얕은 트리입니다. 이는 두 구현 모두에서 API에 직접 전달된 설정에 대해 작동합니다. Javascript 구현에서 설정은 .jsbeautifyrc와 같은 구성 파일에서 로드됩니다. , 상속/재정의를 사용할 수도 있습니다.
다음은 언어 재정의 노드에 대해 지원되는 모든 위치를 보여주는 구성 트리의 예입니다. indent_size이 구성이 어떻게 작동하는지 논의하는 데 사용되지만 원하는 만큼의 설정을 상속하거나 재정의할 수 있습니다.
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
}
}
위의 예를 사용하면 다음과 같은 결과가 나타납니다.
- HTML 파일
indent_size최상위 설정에서 4개의 공간을 상속받습니다 .- 파일은 개행 문자로도 끝납니다.
- HTML 내부의 JavaScript 및 CSS
- HTML
end_with_newline설정 상속 - 들여쓰기를 공백 2개로 재정의합니다.
- HTML
- CSS 파일
- 최상위 설정을
indent_size공백 1개로 재정의합니다.
- 최상위 설정을
- 자바스크립트 파일
indent_size최상위 설정에서 4개의 공간 상속preserve-newlines로 설정true
CSS & HTML
js-beautify실행 파일 외에도 css-beautify및 html-beautify
해당 스크립트에 대한 쉬운 인터페이스로 제공됩니다.
js-beautify --css또는 js-beautify --html각각 동일한 작업을 수행합니다.
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.
CSS 및 HTML 미화자는 범위가 훨씬 간단하고 옵션이 훨씬 적습니다.
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
섹션을 무시하거나 유지하라는 지시문(Javascript에만 해당)
파일 내부 주석의 지원 지시문에 대한 미화기입니다. 이를 통해 미화기에게 파일의 형식을 유지하거나 파일의 일부를 완전히 무시하도록 지시할 수 있습니다. 아래 예제 입력은 미화 후에도 변경된 상태로 유지됩니다.
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 */
특허
이 내용이 유용하거나 도움이 된다면 원하는 방식으로 자유롭게 사용할 수 있지만 저작권 표시와 라이센스를 유지해야 합니다.(MIT)
크레딧
- 작성자: Einar Lielmanis, einar@jsbeautifier.org
- Stefano Sanfilippo a.little.coder@gmail.com 이 개발한 Python 버전
- Daniel Stockman의 node.js용 명령줄 daniel.stockman@gmail.com
- Liam Newman bitwiseman@gmail.com 이 유지 관리하고 확장했습니다.
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: js-beautify@1.7.5)