Js-beautify: CSSμ—μ„œ ν•œ 쀄 κ·œμΉ™μ„ μœ μ§€ν•˜λŠ” μ˜΅μ…˜ μΆ”κ°€

에 λ§Œλ“  2017λ…„ 12μ›” 03일  Β·  4μ½”λ©˜νŠΈ  Β·  좜처: beautify-web/js-beautify

μ„€λͺ…

인사말!

λ‚΄κ°€ 이것을 가지고 μžˆλ‹€λ©΄
footer { padding: 1%; }

그런 λ‹€μŒ Shift+Alt+FI κ°€μ Έμ˜€κΈ°

    footer {
        padding: 1%;
    }

'ν•œ 쀄 κ·œμΉ™'을 κ·ΈλŒ€λ‘œ μœ μ§€ν•˜λŠ” μ˜΅μ…˜μ΄ μžˆμŠ΅λ‹ˆκΉŒ?

μ‹œν—˜μ„ 마친

"beautify.options": {"brace_style": "collapse,preserve-inline"}

ν•˜μ§€λ§Œ 운이 μ—†λ‹€

μ„€μ •

 {
    "window.zoomLevel": -1,
    "workbench.sideBar.location": "right",
    "files.autoSave": "afterDelay",
    "files.autoSaveDelay": 1000,
    "editor.cursorStyle": "underline",
    "liveServer.settings.donotShowInfoMsg": true,
    "liveServer.settings.donotVerifyTags": false,
    "html.format.contentUnformatted": "pre,code,textarea,li",  
}
css blocked enhancement

κ°€μž₯ μœ μš©ν•œ λŒ“κΈ€

ν•œ 쀄에 보관할 μ΅œλŒ€ 속성 수둜 κ΅¬μ„±λœ max_preserve_single_line_properties 와 같은 μ˜΅μ…˜μ΄μ–΄μ•Ό ν•©λ‹ˆλ‹€.

ν˜•μ‹:

.fill {
    flex: 1 1 auto;
}

.item-name input {
    font-size: 1.5em;
}

.avatar {
    border-radius: 50%;
    margin-right: 10px
}

.avatar-32 {
    width: 32px;
    height: 32px
}

.avatar-64 {
    width: 64px;
    height: 64px
}

.avatar-100 {
    width: 100px;
    height: 100px
}

.avatar-128 {
    width: 128px;
    height: 128px
}

.details {
    padding: 2em;
}

.form-actions {
    direction: rtl;
}

μ›ν•˜λŠ” κ²°κ³Ό:

.fill { flex: 1 1 auto; }
.item-name input { font-size: 1.5em; }

.avatar { border-radius: 50%; margin-right: 10px }
.avatar-32 { width: 32px; height: 32px }
.avatar-64 { width: 64px; height: 64px }
.avatar-100 { width: 100px; height: 100px }
.avatar-128 { width: 128px; height: 128px }

.details { padding: 2em; }
.form-actions { direction: rtl; }

λͺ¨λ“  4 λŒ“κΈ€

이것은 #1124와 관련이 μžˆμ§€λ§Œ ν•œ 쀄 κ·œμΉ™λ§Œ μœ μ§€ν•˜λ„λ‘ μš”μ²­ν•˜λ―€λ‘œ λΆ„λ¦¬λ©λ‹ˆλ‹€.
λ‘˜ λ‹€ ν˜„μž¬ μ‘΄μž¬ν•˜μ§€ μ•ŠμŠ΅λ‹ˆλ‹€.

@bitwiseman λ‹˜ λ‹΅λ³€ κ°μ‚¬ν•©λ‹ˆλ‹€! :)

ν•œ 쀄에 보관할 μ΅œλŒ€ 속성 수둜 κ΅¬μ„±λœ max_preserve_single_line_properties 와 같은 μ˜΅μ…˜μ΄μ–΄μ•Ό ν•©λ‹ˆλ‹€.

ν˜•μ‹:

.fill {
    flex: 1 1 auto;
}

.item-name input {
    font-size: 1.5em;
}

.avatar {
    border-radius: 50%;
    margin-right: 10px
}

.avatar-32 {
    width: 32px;
    height: 32px
}

.avatar-64 {
    width: 64px;
    height: 64px
}

.avatar-100 {
    width: 100px;
    height: 100px
}

.avatar-128 {
    width: 128px;
    height: 128px
}

.details {
    padding: 2em;
}

.form-actions {
    direction: rtl;
}

μ›ν•˜λŠ” κ²°κ³Ό:

.fill { flex: 1 1 auto; }
.item-name input { font-size: 1.5em; }

.avatar { border-radius: 50%; margin-right: 10px }
.avatar-32 { width: 32px; height: 32px }
.avatar-64 { width: 64px; height: 64px }
.avatar-100 { width: 100px; height: 100px }
.avatar-128 { width: 128px; height: 128px }

.details { padding: 2em; }
.form-actions { direction: rtl; }

μž‘λ™ν•˜λ €λ©΄ μ΅œμ†Œν•œ CSS 토큰화가 ν•„μš”ν•©λ‹ˆλ‹€(#545). 일단 μš°λ¦¬λŠ” 이것이 μžλ°”μŠ€ν¬λ¦½νŠΈ μΈ‘μ—μ„œμ™€ 같은 λ°©μ‹μœΌλ‘œ κ΅¬ν˜„λ  κ²ƒμž…λ‹ˆλ‹€.

이 νŽ˜μ΄μ§€κ°€ 도움이 λ˜μ—ˆλ‚˜μš”?
0 / 5 - 0 λ“±κΈ‰