JS뷰티파이어
이 작은 뷰티파이어는 북마크릿, 추악한 JavaScript, Dean Edward의 인기 있는 패커가 압축한 압축 풀기 스크립트 및 javascriptobfuscator.com 에서 처리한 스크립트를 해독합니다 .
필요한 기여자
기존 소유자가 현재 이 프로젝트에서 작업할 수 있는 시간이 매우 제한되어 있기 때문에 이 전면 중앙에 배치합니다. 이것은 인기 있는 프로젝트이고 널리 사용되지만 고객이 직면한 버그와 근본적인 문제를 모두 수정하는 데 전념할 시간이 있는 기여자가 절실히 필요합니다. 내부 설계 및 구현.
관심있으신 분들은 참고하시어CONTRIBUTING.md그런 다음 "Good first issue" 라벨 이 표시된 문제를 수정 하고 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를 통해 옵션을 사용할 수 있습니다.
파이썬
파이썬을 사용하여 미화하려면:
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에 적합한 미화 메서드를 가져오고 호출합니다. 세 가지 메서드 서명은 모두 입니다. 는 beautify(code, options)미화 code할 코드 문자열입니다. 옵션은 코드를 미화하는 데 사용할 설정이 있는 객체입니다.
구성 옵션 이름은 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 인수 외에도 다음을 통해 구성을 JS 실행 파일에 전달할 수 있습니다.
- 모든
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_size1칸으로 재정의합니다.
- 최상위 설정을
- 자바스크립트 파일
indent_size최상위 설정에서 4칸 상속preserve-newlines로 설정true
CSS & HTML
js-beautify실행 파일 외에도
해당 스크립트에 대한 쉬운 인터페이스로 제공됩니다.
css-beautify또는 각각 동일한 작업을 수행합니다.html-beautifyjs-beautify --cssjs-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에만 해당)
Beautifier for support directives in comment in the file inside.이렇게 하면 파일 형식을 유지하거나 파일의 일부를 완전히 무시하도록 beautifier에 지시할 수 있습니다. 아래 예제 입력은 미화 후에도 변경된 상태로 유지됩니다.
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)