Js-beautify: HTML: ์†์„ฑ ๋ž˜ํ•‘ ์„ค์ • ๊ตฌ์„ฑ ์ œ์•ˆ

์— ๋งŒ๋“  2018๋…„ 05์›” 31์ผ  ยท  9์ฝ”๋ฉ˜ํŠธ  ยท  ์ถœ์ฒ˜: beautify-web/js-beautify

#1297์—์„œ ์ถ”์ถœ.

์šฐ๋ฆฌ๊ฐ€ ๊ฐ€์ง„ ๊ฒƒ

wrap_attributes :

  • auto - ์†์„ฑ ๋ž˜ํ•‘์„ ํ™œ์„ฑํ™”ํ•ฉ๋‹ˆ๋‹ค.
  • force - ์ฒซ ๋ฒˆ์งธ ์†์„ฑ์€ ์œ ์ง€๋˜๊ณ  ๋‹ค๋ฅธ ์†์„ฑ์€ "wrap_attributes_indent_size"๋กœ ๋ž˜ํ•‘๋จ
  • force-aligned - ์ฒซ ๋ฒˆ์งธ ์†์„ฑ์€ ์œ ์ง€๋˜๊ณ  ๋‹ค๋ฅธ ์†์„ฑ์€ ์ฒซ ๋ฒˆ์งธ ์†์„ฑ๊ณผ ํ•จ๊ป˜ ๋ž˜ํ•‘๋˜๊ณ  ์ •๋ ฌ๋ฉ๋‹ˆ๋‹ค.
  • force-expand-multiline - ์†์„ฑ์ด 1๊ฐœ ์ด์ƒ์ธ ๊ฒฝ์šฐ ๋ชจ๋“  ์†์„ฑ์€ ๋ฌด์—‡์ด๋“  ๊ด€๊ณ„์—†์ด ๋ž˜ํ•‘๋˜๊ณ  "wrap_attributes_indent_size"๋กœ ๋“ค์—ฌ์“ฐ๊ธฐ๋ฉ๋‹ˆ๋‹ค. AND: ์—ฌ๋Š” ํƒœ๊ทธ์˜ ๋‹ซ๋Š” '>'๋„ ์ƒˆ ์ค„์— ์žˆ์Šต๋‹ˆ๋‹ค. ์ด ๋ชจ๋“œ๋Š” ํ˜„์žฌ ์†์ƒ๋˜์–ด ์ž˜๋ชป ๋“ค์—ฌ์“ฐ๊ธฐ๋œ ํŒŒ์ผ์„ ์ƒ์„ฑํ•ฉ๋‹ˆ๋‹ค :(

์—ฌ๋Ÿฌ ์†์„ฑ(#1285 ๋ฐ #1262)์ด ์žˆ๋Š” ๊ธด html ์š”์†Œ์˜ ๋ž˜ํ•‘์„ ์ฒ˜๋ฆฌํ•˜๋Š” ๋ช‡ ๊ฐ€์ง€ ์ถ”๊ฐ€ ๋ชจ๋“œ๋ฅผ ์ œ๊ณตํ•˜๊ธฐ ์œ„ํ•œ ์—ฌ๋Ÿฌ ๋…ธ๋ ฅ๋„ ์žˆ์Šต๋‹ˆ๋‹ค.

์—ฌ๊ธฐ์— ์—ฌ๋Ÿฌ (์ง๊ต) ๋ฌธ์ œ๊ฐ€ ์žˆ๊ณ  ๋ชจ๋“  ๊ฒฝ์šฐ๋ฅผ ์ฒ˜๋ฆฌํ•ด์•ผ ํ•˜๋Š” ๊ฒฝ์šฐ ์ด๋Ÿฌํ•œ ๋ชจ๋“  ๋ฌธ์ œ๋ฅผ ๋‹จ์ผ ๊ฐ’์— ๋„ฃ์œผ๋ฉด ๋” ๋งŽ์€ ํ˜ผ๋ž€๊ณผ ์ด์ƒํ•œ ์˜ต์…˜ ์ด๋ฆ„ ํญ๋ฐœ์ด ๋ฐœ์ƒํ•  ์ˆ˜ ์žˆ๋‹ค๊ณ  ์ƒ๊ฐํ•ฉ๋‹ˆ๋‹ค.

๋”ฐ๋ผ์„œ ์ค„ ๋ฐ”๊ฟˆ, ์ •๋ ฌ ๋ฐ ํ–‰๋‹น ์†์„ฑ ์ˆ˜ ๋“ฑ์„ ๋ถ„๋ฆฌํ•ด ๋ณด๊ฒ ์Šต๋‹ˆ๋‹ค.

์ œ์•ˆ

wrap_attributes_mode :

  • none - ์†์„ฑ์„ ๋ž˜ํ•‘ํ•˜์ง€ ์•Š์Šต๋‹ˆ๋‹ค. ๋งˆ์นจํ‘œ. (ํ•„์š”?)
  • auto - ์ผ๋ฐ˜ ์†์„ฑ ๋ž˜ํ•‘, ์ด๊ฒƒ์€ ์•„๋งˆ๋„ ๊ฐ€์žฅ ๋…ผ๋ฆฌ์ ์ธ ๊ฒฝ์šฐ์˜ ๊ธฐ๋ณธ๊ฐ’์ด์–ด์•ผ ํ•ฉ๋‹ˆ๋‹ค. ์ค„์ด ๋„ˆ๋ฌด ํฌ๋ฉด ๋žฉํ•‘ํ•ฉ๋‹ˆ๋‹ค. ๋ชจ๋“  ์†์„ฑ์ด ํ•œ ์ค„์— ๋“ค์–ด๊ฐˆ ์ˆ˜ ์žˆ์œผ๋ฉด ์ค„ ๋ฐ”๊ฟˆ ์—†์ด ํ•œ ์ค„์— ์œ ์ง€๋ฉ๋‹ˆ๋‹ค. (๊ธฐ๋ณธ.)
  • force - ์†์„ฑ์ด ๋‘˜ ์ด์ƒ ์žˆ์œผ๋ฉด ๊ฐ•์ œ๋กœ ๋ž˜ํ•‘ํ•˜๊ณ  ๊ทธ๋ ‡์ง€ ์•Š์œผ๋ฉด ์ž๋™์œผ๋กœ ๋ž˜ํ•‘ํ•ฉ๋‹ˆ๋‹ค.

๋ž˜ํ•‘์ด ์ž‘๋™ ์ค‘์ผ ๋•Œ ๋‹ค์Œ ์†์„ฑ์ด ์ž‘๋™ํ•ฉ๋‹ˆ๋‹ค. ๋žฉํ•‘์ด ๋ฐœ์ƒํ•˜์ง€ ์•Š์œผ๋ฉด ์•„๋ฌด ์—ญํ• ๋„ ํ•˜์ง€ ์•Š์Šต๋‹ˆ๋‹ค.

wrapped_attributes_per_line :

  • multiple - ์†Œํ”„ํŠธ ๋ž˜ํ•‘, ๊ธฐ๋ณธ . ํ•œ ์ค„์— ํ—ˆ์šฉ๋˜๋Š” ํ•œ ๋งŽ์€ ์†์„ฑ์„ ๋งž์ถฅ๋‹ˆ๋‹ค.
  • single - ์ฒซ ๋ฒˆ์งธ ์†์„ฑ์€ ์ฒซ ๋ฒˆ์งธ ์ค„์— ์žˆ๊ณ  ๋‹ค๋ฅธ ์†์„ฑ์€ ๋ณ„๋„์˜ ์ค„์— ์žˆ์Šต๋‹ˆ๋‹ค.
  • single-all - ์ฒซ ๋ฒˆ์งธ ์†์„ฑ์„ ํฌํ•จํ•œ ๋ชจ๋“  ์†์„ฑ์ด ๋ณ„๋„์˜ ์ค„์— ๋ฐฐ์น˜๋ฉ๋‹ˆ๋‹ค. ๋”ฐ๋ผ์„œ ๋ชจ๋“  ์†์„ฑ์€ ๋ณ„๋„์˜ ์ค„์— ์žˆ๊ณ  ์š”์†Œ/ํƒœ๊ทธ ์ค„์—๋Š” ์†์„ฑ์ด ๋‚จ์•„ ์žˆ์ง€ ์•Š์Šต๋‹ˆ๋‹ค.

wrapped_attributes_indent :

  1. auto -- wrap_attributes_indent_size , ๊ธฐ๋ณธ๊ฐ’ ์„ ์‚ฌ์šฉํ•ฉ๋‹ˆ๋‹ค.
  2. ์ •๋ ฌ -- ๋ชจ๋“  ์†์„ฑ ํ–‰ ์ด ์ฒซ ๋ฒˆ์งธ ์†์„ฑ๊ณผ ์ •๋ ฌ๋˜๊ธฐ ์‹œ์ž‘ํ•ฉ๋‹ˆ๋‹ค. ์ฒซ ๋ฒˆ์งธ ์†์„ฑ์ด ์ƒˆ ์ค„( wrapped_attributes_per_line ์˜ "๋‹จ์ผ ์ „์ฒด" ๋ชจ๋“œ)์— ์žˆ๋Š” ๊ฒฝ์šฐ wrap_attributes_indent_size ๋ฅผ ์‚ฌ์šฉํ•˜์—ฌ ๋“ค์—ฌ์“ฐ๊ธฐ๋ฅผ ๊ณ„์‚ฐํ•ฉ๋‹ˆ๋‹ค.

wrapped_attributes_end :

  • auto - ๊ธฐ๋ณธ๊ฐ’
  • multiline - ๋‹ซ๋Š” > ๋Š” ๋ณ„๋„์˜ ์ค„์— ์žˆ์Šต๋‹ˆ๋‹ค.

์˜ˆ

  1. DEFAULT ๊ฒฝ์šฐ: ์†Œํ”„ํŠธ ๋žฉ์„ ํ•˜๊ณ  ๊ฐ€๋Šฅํ•œ ํ•œ ์ค„๋‹น ๋งŽ์€ ์†์„ฑ์„ ๋งž์ถ”๋ ค๊ณ  ํ•˜์ง€๋งŒ ์ค„ ๊ธธ์ด ์ œํ•œ ๋‚ด์— ์žˆ์Šต๋‹ˆ๋‹ค.
wrap_attributes_mode = auto
wrapped_attributes_per_line = multiple
wrapped_attributes_indent = auto
wrapped_attributes_end = auto
  1. #1285 ์ผ€์ด์Šค. ๊ธฐ๋ณธ ๊ฒฝ์šฐ์™€ ๋งค์šฐ ์œ ์‚ฌํ•˜์ง€๋งŒ ๋ž˜ํ•‘๋œ ์†์„ฑ์ด ์ฒซ ๋ฒˆ์งธ ์†์„ฑ๊ณผ ๋™์ผํ•œ ๋“ค์—ฌ์“ฐ๊ธฐ ์ˆ˜์ค€์— ์žˆ๋„๋ก ์ •๋ ฌํ•ฉ๋‹ˆ๋‹ค.
wrap_attributes_mode = auto
wrapped_attributes_per_line = multiple
wrapped_attributes_indent = aligned
wrapped_attributes_end = auto
  1. #1262 ์ผ€์ด์Šค. ์ค„ ๋ฐ”๊ฟˆํ•  ๋•Œ ์ฒซ ๋ฒˆ์งธ ์†์„ฑ๊ณผ ์ •๋ ฌ๋œ ํ•œ ์ค„์— ํ•˜๋‚˜์˜ ์†์„ฑ์ด ํ•„์š”ํ•ฉ๋‹ˆ๋‹ค.
wrap_attributes_mode = auto
wrapped_attributes_per_line = single
wrapped_attributes_indent = aligned
wrapped_attributes_end = auto
  1. ํ˜„์žฌ force-expand-multiline ์‚ฌ๋ก€: ์†์„ฑ์ด 2๊ฐœ ์ด์ƒ์ธ ๊ฒฝ์šฐ ์ค„๋งˆ๋‹ค ์†์„ฑ์ด ํ•˜๋‚˜ ์žˆ๊ณ  ์—ฌ๋Ÿฌ ์ค„๋กœ ๋๋‚˜๋Š” ๊ฒฝ์šฐ ๋‹ซ๋Š” > ๋ฅผ ์ƒˆ ์ค„์— ๋ฐฐ์น˜ํ•ฉ๋‹ˆ๋‹ค.
wrap_attributes_mode = force
wrapped_attributes_per_line = single-all
wrapped_attributes_indent = auto
wrapped_attributes_end = multiline
javascript discussion enhancement

๊ฐ€์žฅ ์œ ์šฉํ•œ ๋Œ“๊ธ€

๋‚˜๋Š” ๋‹น์‹ ์˜ ์ œ์•ˆ์„ ์ข‹์•„ํ•˜๊ณ  ์–ด๋–ค ์‚ฌ๋žŒ๋“ค์—๊ฒŒ๋Š” ๋งŽ์€ ๋ฌธ์ œ๋ฅผ ํ•ด๊ฒฐํ•  ์ˆ˜ ์žˆ๋Š” ํ›จ์”ฌ ๋” ๊ฐ„๋‹จํ•œ ๊ตฌํ˜„์ด "force"๊ฐ€ auto๋ฅผ ์‚ฌ์šฉํ•˜๋Š” ์ง€์ ์„ ๊ตฌ์„ฑํ•˜๋Š” ์˜ต์…˜์ด ๋  ๊ฒƒ์ด๋ผ๊ณ  ์ƒ๊ฐํ•ฉ๋‹ˆ๋‹ค. ์˜ˆ๋ฅผ ๋“ค์–ด, ์†์„ฑ์ด X๊ฐœ ๋ฏธ๋งŒ์ด๋ฉด auto๋ฅผ ์‚ฌ์šฉํ•˜๊ณ  ๊ทธ๋ ‡์ง€ ์•Š์œผ๋ฉด ๊ฐ•์ œ๋กœ ๊ฐ์Œ‰๋‹ˆ๋‹ค.

๋ชจ๋“  9 ๋Œ“๊ธ€

@vvs
๋ฉ‹์ง„ ๊ฐ์‚ฌํ•ฉ๋‹ˆ๋‹ค!

force ์™€ multiple ์‚ฌ์ด์— ๊ฒน์นจ์ด ์žˆ๋Š” ๊ฒƒ ๊ฐ™์ง€๋งŒ ์„ค์ •์˜ ๋ณต์žก์„ฑ์œผ๋กœ ์ธํ•ด ์ผ๋ถ€ ์ถฉ๋Œ์ด ๋ถˆ๊ฐ€ํ”ผํ•  ์ˆ˜ ์žˆ์Šต๋‹ˆ๋‹ค.

๋‚ด๊ฐ€ ๋งํ–ˆ๋“ฏ์ด, ๋‚˜๋Š” ๋‹น์‹ ์ด ์ผ๋ฐ˜์ ์œผ๋กœ ์„ ํƒํ•œ ๊ฐ’ ์ด๋ฆ„์„ ์ข‹์•„ํ•ฉ๋‹ˆ๋‹ค. wrapped_attributes_end ๋ฅผ expand-multiline ๋กœ ๋ณ€๊ฒฝํ•  ๊ฒƒ ๊ฐ™์Šต๋‹ˆ๋‹ค. ์š”์†Œ๊ฐ€ ์—ฌ๋Ÿฌ ์ค„ ์š”์†Œ์ผ ๋•Œ๋งŒ ํ™•์žฅ๋˜๊ธฐ ๋•Œ๋ฌธ์ž…๋‹ˆ๋‹ค.

brace-style ( [collapse|expand|end-expand|none][,preserve-inline] ) ์ฒ˜๋Ÿผ ์‰ผํ‘œ๋กœ ๊ตฌ๋ถ„๋œ ๊ฐ’ ๋ชฉ๋ก์„ ์‚ฌ์šฉํ•˜๋Š” ๊ฒƒ์— ๋ฐ˜๋Œ€ํ•˜๋Š” ๊ฒƒ์ฒ˜๋Ÿผ ๋“ค๋ฆฝ๋‹ˆ๋‹ค. ๋‹จ์ผ ํ•„๋“œ๊ฐ€ ์ž‘๋™ํ•  ๋•Œ ๋” ๋งŽ์€ ์˜ต์…˜ ํ•„๋“œ๋ฅผ ๊ฐ–๋Š” ๊ฒƒ์„ ์ข‹์•„ํ•˜์ง€ ์•Š๊ธฐ ๋•Œ๋ฌธ์— ๋ฌป์Šต๋‹ˆ๋‹ค.

์•ˆ๋…•ํ•˜์„ธ์š” @bitwiseman์ž…๋‹ˆ๋‹ค. ์˜ˆ, force ์™€ multiple ์‚ฌ์ด์— ์•ฝ๊ฐ„์˜ ๊ฒน์นจ์ด ์žˆ์Šต๋‹ˆ๋‹ค. ๊ธฐ๋ณธ์ ์œผ๋กœ ์—ฌ๋Ÿฌ ์†์„ฑ์„ "๊ฐ•์ œ"ํ•˜๋Š” ๊ฒƒ์€ auto ์™€ ๊ฐ™์Šต๋‹ˆ๋‹ค. :)

expand-multiline ๋„ ๊ดœ์ฐฎ์Šต๋‹ˆ๋‹ค.

์‰ผํ‘œ๋กœ ๊ตฌ๋ถ„๋œ ๊ฐ’์„ ์‚ฌ์šฉํ•˜๋Š” ๊ฒƒ์— ๋ฐ˜๋Œ€ํ•˜๋Š” ๊ฒƒ ๊ฐ™์Šต๋‹ˆ๋‹ค.

๊ฐœ์ธ์ ์œผ๋กœ ์„ค์ •์ด BASE64๋กœ ์ธ์ฝ”๋”ฉ๋œ ๊ฐ’์ด๋”๋ผ๋„ ๋ฌด์—‡์ด๋“  ๊ฐ€์ง€๊ณ  ์‚ด ์ˆ˜ ์žˆ์Šต๋‹ˆ๋‹ค! ์ค‘์š”ํ•œ ๊ฒƒ์€ ๋‚ด๊ฐ€ ๋‚ด/ํŒ€์˜ ํ•„์š”์— ๋งž๊ฒŒ ์„œ์‹ ๋™์ž‘์„ ์กฐ์ •ํ•  ์ˆ˜ ์žˆ๋‹ค๋Š” ๊ฒƒ์ž…๋‹ˆ๋‹ค(ํ˜„์žฌ #1262์™€ ์ผ์น˜ํ•จ).

๊ทธ๋Ÿฌ๋‚˜ ์„ ํ˜ธ์˜ ๋ฌธ์ œ๋กœ ๋ณ„๋„์˜ "์˜ต์…˜ ๊ทธ๋ฃน"์„ ๊ฐ–๋Š” ๊ฒƒ์ด ๋…๋ฆฝ์ ์œผ๋กœ ์ˆ˜์ •ํ•˜๊ณ  ๋‹ค๋ฅธ(์ง๊ต) ๊ด€์‹ฌ์‚ฌ์— ๋Œ€ํ•ด ๋…๋ฆฝ์ ์œผ๋กœ ์ƒ๊ฐํ•  ์ˆ˜ ์žˆ๋„๋ก ํ•˜๋Š” ๊ฒƒ์ด ์ข‹์Šต๋‹ˆ๋‹ค. ๊ทธ๋ฆฌ๊ณ  ๋ฌด์—‡๋ณด๋‹ค๋„ ๊ฐ€๋Šฅํ•œ ๋ชจ๋“  ์กฐํ•ฉ์˜ ๊ฑฐ๋Œ€ํ•œ ๋ชฉ๋ก๊ณผ ๋น„๊ตํ•˜์—ฌ ์„ค์ •์„ ๊ฐœ๋ณ„์ ์œผ๋กœ ๋ฌธ์„œํ™”ํ•˜๋Š” ๊ฒƒ์ด ํ›จ์”ฌ ์‰ฝ์Šต๋‹ˆ๋‹ค.

@vvs
๊ณ ์œ ํ•œ ๋™์ž‘์— ๋Œ€ํ•ด ๋ณ„๋„์˜ ์„ค์ •์„ ๊ฐ–๋Š” ๊ฒƒ์ด ์ข‹์Šต๋‹ˆ๋‹ค.

๋‚˜๋Š” ๋‹น์‹ ์˜ ์ œ์•ˆ์„ ์ข‹์•„ํ•˜๊ณ  ์–ด๋–ค ์‚ฌ๋žŒ๋“ค์—๊ฒŒ๋Š” ๋งŽ์€ ๋ฌธ์ œ๋ฅผ ํ•ด๊ฒฐํ•  ์ˆ˜ ์žˆ๋Š” ํ›จ์”ฌ ๋” ๊ฐ„๋‹จํ•œ ๊ตฌํ˜„์ด "force"๊ฐ€ auto๋ฅผ ์‚ฌ์šฉํ•˜๋Š” ์ง€์ ์„ ๊ตฌ์„ฑํ•˜๋Š” ์˜ต์…˜์ด ๋  ๊ฒƒ์ด๋ผ๊ณ  ์ƒ๊ฐํ•ฉ๋‹ˆ๋‹ค. ์˜ˆ๋ฅผ ๋“ค์–ด, ์†์„ฑ์ด X๊ฐœ ๋ฏธ๋งŒ์ด๋ฉด auto๋ฅผ ์‚ฌ์šฉํ•˜๊ณ  ๊ทธ๋ ‡์ง€ ์•Š์œผ๋ฉด ๊ฐ•์ œ๋กœ ๊ฐ์Œ‰๋‹ˆ๋‹ค.

<= 3 ์†์„ฑ์„ ์‚ฌ์šฉํ•˜๋Š” ๊ฒฝ์šฐ "์ •๋ ฌ ๋‹ค์ค‘"์„ ์‚ฌ์šฉํ•˜๊ณ , ๊ทธ๋ ‡์ง€ ์•Š์œผ๋ฉด "๊ฐ•์ œ ์ •๋ ฌ"์„ ์‚ฌ์šฉํ•˜๊ณ  ์‹ถ์Šต๋‹ˆ๋‹ค. ์ด๊ฒƒ์ด ํ˜„์žฌ ๊ฐ€๋Šฅํ•ฉ๋‹ˆ๊นŒ?

@otonielguajardo

ํ˜„์žฌ ์กด์žฌํ•˜์ง€ ์•Š์Šต๋‹ˆ๋‹ค.

๋‹น์‹ ์ด ์š”๊ตฌํ•˜๋Š” ๊ฒƒ์€ #1262์™€ ์œ ์‚ฌํ•ฉ๋‹ˆ๋‹ค. ๊ธฐ๋ณธ์ ์œผ๋กœ "์ค„ ๋ฐ”๊ฟˆํ•˜์ง€ ์•Š๋Š” ํ•œ ์†์„ฑ์„ ํ•œ ์ค„ ํ—ˆ์šฉํ•˜๊ณ , ์ด ๊ฒฝ์šฐ ์ •๋ ฌํ•ฉ๋‹ˆ๋‹ค."
@Adondriel ์ด ํ•ด๋‹น ๋ฌธ์ œ์—์„œ ์›ํ•˜๋Š” ๊ฒƒ๊ณผ ๊ฐ™์€ ๊ฒƒ์„ ์š”์ฒญํ•œ ๊ฒƒ ๊ฐ™์Šต๋‹ˆ๋‹ค(์†์„ฑ ์ˆ˜ ๊ธฐ๋ฐ˜).

์–ด๋–ค ์ง„๋ณด?

๋‹ค์‹œ ๋ฐฉ๋ฌธํ•  ๊ณ„ํš์ด ์žˆ์Šต๋‹ˆ๊นŒ?

@notiv-nt @Drumstix42
์ œํ•œ๋œ ์‹œ๊ฐ„์— ๋‹ค๋ฅธ ๋ฒ„๊ทธ๋ฅผ ์ˆ˜์ •ํ–ˆ์Šต๋‹ˆ๋‹ค.
์ด๊ฒƒ์€ ์—ฌ์ „ํžˆ โ€‹โ€‹ํ•  ๊ฐ€์น˜๊ฐ€ ์žˆ์ง€๋งŒ ์„ค๊ณ„๋ฅผ ์™„๋ฃŒํ•˜๊ณ  ๊ตฌํ˜„ํ•˜๋Š” ๋ฐ ์‹œ๊ฐ„์„ ํ• ์• ํ•  ์‚ฌ๋žŒ์ด ํ•„์š”ํ•ฉ๋‹ˆ๋‹ค.

์ด ํŽ˜์ด์ง€๊ฐ€ ๋„์›€์ด ๋˜์—ˆ๋‚˜์š”?
0 / 5 - 0 ๋“ฑ๊ธ‰