Js-beautify: CSSで単一行のルールを保持するオプションを追加

作成日 2017年12月03日  ·  4コメント  ·  ソース: beautify-web/js-beautify

説明

ご挨拶!

私がこれを持っているなら
footer { padding: 1%; }

次に、Shift + Alt + FIの後に取得します

    footer {
        padding: 1%;
    }

'one-line-rule'をそのままキープするオプションはありますか?

試してみました

"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

最も参考になるコメント

たぶんそれは、1行に保持するプロパティの最大数で構成された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に関連していますが、1行のルールのみを保持するように要求しているため別です。
現時点ではどちらも存在しません。

返信ありがとうございます@bitwiseman ! :)

たぶんそれは、1行に保持するプロパティの最大数で構成された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)。 これができたら、javascript側と同じように実装されます。

このページは役に立ちましたか?
0 / 5 - 0 評価