Js-beautify: newline_between_rules-Unterstützung für Sass (Erweiterung)

Erstellt am 19. März 2015  ·  49Kommentare  ·  Quelle: beautify-web/js-beautify

Jetzt wird die Option newline_between_rules in v1.5.5 nur für CSS unterstützt https://github.com/beautify-web/js-beautify/pull/574
In Sass funktioniert das Verschachteln also nicht.

Hier meine test.js Datei:

var fs = require('fs');
var beautify_css = require('js-beautify').css;

fs.readFile('test.scss', 'utf8', function(err, data) {
  if (err) {
    throw err;
  }

  console.log(beautify_css(data, {
    indent_size: 2,
    newline_between_rules: true
  }));
});

Ausgabe:

$ node test.js

.icons {
  padding: 0;
  li {
    display: inline-block;
  }
  a {
    display: block;
    color: #000;
  }
  a:hover {
    color: #ccc;
  }
}

Ich hoffe, newline_between_rules Unterstützung für Sass hinzuzufügen.
Grüße.

good first issue css templating enhancement

Hilfreichster Kommentar

Bitte stimmen Sie mit einer 👍-Reaktion auf den ersten Beitrag ab, anstatt mit +1-Nachrichten - das wird Abonnenten nicht spammen. Danke!

Alle 49 Kommentare

Und wie soll es aussehen?

Ähnlich der CSS-Version https://github.com/beautify-web/js-beautify/pull/574
Im Allgemeinen reicht eine Verschachtelungsebene aus.
Hier ein Beispiel:

// Icons
.icons {
  padding: 0;

  li {
    display: inline-block;
  }

  a {
    display: block;
    color: #000;
  }

  a:hover {
    color: #ccc;
  }
}

// Button
.button {
  &.primary {
    color: #4183c4;
  }

  &.primary:hover {
    color: lighten(#4183c4, 15%);
  }
}

Hallo,
Ist diese Arbeit für die Scss-Regeln.

.alter Preis {
@include GibsonRegular();
@include Schriftgröße(14);
Farbe: #646464;
Rand links: 10px;
Textdekoration: durchgestrichen;

.promovalue {
  <strong i="15">@include</strong> GibsonRegular();
}

}

+1

+1

+1

+1

vielleicht eine Option wie newline_between_nested_rules: true da es sich speziell um ein Problem mit verschachtelten handelt?

} und ; müssten die Regel für verschachtelte neue Zeilen berücksichtigen

+1, auch für weniger

+1

+1

Ich kann bestätigen, dass dies tatsächlich nur bei den verschachtelten Regeln ein Problem ist. Aktuell mit newline_between_rules: true :

body {
  background-color: #FFF;

  > div {
    background-color: #AAA;
  }
}

.container {
  color: blue;
}

Wird das:

body {
  background-color: #FFF;
  > div {
    background-color: #AAA;
  }
}

.container {
  color: blue;
}

Und newline_between_rules: false das ist das Ergebnis:

body {
  background-color: #FFF;
  > div {
    background-color: #AAA;
  }
}
.container {
  color: blue;
}

Daher sollte die Unterstützung von Zeilenumbrüchen zwischen verschachtelten Regeln in Betracht gezogen werden.

+1

Irgendeine ETA zu diesem Ding?

+1

+1

+1 :(

+1

Noch ein +1

Entschuldigung für den Lärm. Ich wusste nicht, ob es eine andere Möglichkeit gibt, dies zu bestätigen.

@zimmerboy oben rechts in jedem Kommentar gibt es einen "Reaktion

Mein Workaround in beautify-css.js :

  1. NewLine-Funktion ersetzen:
        print.newLine = function(keepWhitespace, keepNewLine) {
            if (output.length) {
                if (!keepWhitespace && output[output.length - 1] !== '\n') {
                    print.trim();
                    if (keepNewLine) { output.push('\n'); }
                }

                output.push('\n');

                if (basebaseIndentString) {
                    output.push(basebaseIndentString);
                }
            }
        };
  1. Ändern Sie sowohl die Bedingungen als auch die Anweisungen von newline_between_rules in:
                    if (newline_between_rules) {
                        print.newLine(false, true);
                    }

Hinweis: Dies berücksichtigt nur Zeilenumbrüche zwischen Regeln, nicht Regeln nach Eigenschaften. Jemand Ideen dazu?

@sickboy - Cool,

Kommt das bald? Es ist mein einziger Blocker für die Verwendung von Beautify für Sass.

@mrahhal - Das Problem ist fast zwei Jahre alt. Es scheint, dass @sickboy daran gearbeitet hat. Jemand muss nur einen Pull-Request mit Tests machen.

Vielleicht möchten Sie dies tun? Siehe BEITRAGEN.md .

@bitwiseman leider habe ich weder die Erfahrung mit

@sickboy bist du dabei? Vielleicht werde ich es doch noch in Angriff nehmen, wenn hier keiner aktiv ist. Abgesehen von einem seltsamen Verhalten bei "max_preserve_newlines" ist dies wirklich das einzige, was mich davon abhält, beautify zu verwenden.

Ich frage mich, ob die Pull-Anfrage Nr. 1117 ( bewahre_newlines für CSS hinzugefügt ) dabei helfen wird.

@zimmerboy ja, das scheint eine Lösung für das aktuelle Problem zu sein, aber ich denke, eine andere Art.

Wird #1117 zusammengeführt? Es scheint auch dieses Problem zu lösen.

@jorgeramirez - Warte nur auf Korrekturen für früheres Feedback.

@bitwiseman großartig!

Irgendwelche Updates?

@royduin - bitte mit der neuesten Version testen.

Es scheint gut zu funktionieren, aber es gibt ein kleines Problem mit Kommentaren. Ich weiß, dass Bootstrap SCSS kein großartiges Beispiel ist, aber trotzdem.

So ist der Code im Repository formatiert:
image

Und das ist nach dem Verschönern:
image

Es funktioniert wie erwartet, aber Kommentare überschneiden sich mit der vorherigen Deklaration, aber wenn Kommentare richtig formatiert sind, funktioniert es gut:
image

Auch hier ist es nicht wirklich wichtig, aber Bootstrap ist weit verbreitet :confused:

@stgogm
Bitte reichen Sie eine neue Ausgabe ein.
Bitte fügen Sie auch Text ein, keine Bilder.

@bitwiseman Okay, tut mir leid. Wollte nur anmerken, dass es nicht wirklich ein Problem ist, wenn Sie die SCSS-Linter-Regeln respektieren.

@stgogm - Cool, danke für die Info. 😄.

@stgogm, während Sie es eingerichtet haben, könnten Sie das verschachtelte Problem newline_between_rules testen? Mit

newline_between_rules: true

tut dein

fieldset {
    border: 0;
    margin: 0;
    min-width: 0;
    padding: 0;
    &+fieldset {
        margin-top: $padding-large;
    }
}

werden

fieldset {
    border: 0;
    margin: 0;
    min-width: 0;
    padding: 0;

    &+fieldset {
        margin-top: $padding-large;
    }
}

?

Eigentlich macht es keinen Unterschied:

Code wie verfasst (ohne neue Zeile dazwischen):

form {
  display: block;
}

fieldset {
  border: 0;
  margin: 0;
  min-width: 0;
  padding: 0;
  & + fieldset {
    margin-top: $padding-large;
  }
}

Nach dem Verschönern mit "newline_between_rules": false :

form {
  display: block;
}

fieldset {
  border: 0;
  margin: 0;
  min-width: 0;
  padding: 0;
  &+fieldset {
    margin-top: $padding-large;
  }
}

Nach dem Verschönern mit "newline_between_rules": true :

form {
  display: block;
}

fieldset {
  border: 0;
  margin: 0;
  min-width: 0;
  padding: 0;
  &+fieldset {
    margin-top: $padding-large;
  }
}

Es hat nur das Leerzeichen zwischen den + .

js-beautify --version
1.6.12

Danke @stgogm! Also nein @bitwiseman #1146 hat das nicht

Ein weiteres Beispiel, bei dem "newline_between_rules" für SCSS nicht ausreicht:

$variable: #333;
div {
  display: none;
}

Beim Formatieren dieses SCSS wird keine neue Zeile zwischen der Variablen und dem div-Selektor hinzugefügt.

Ist klar, wann diese Funktion verfügbar sein wird?

Gibt es Fortschritte?

@dehghani-mehdi @whxaxes
Diese Funktion ist nicht zugewiesen. Es braucht jemanden, der es implementiert und Tests hinzufügt.

+1

+1

+1

+1

+1

Bitte stimmen Sie mit einer 👍-Reaktion auf den ersten Beitrag ab, anstatt mit +1-Nachrichten - das wird Abonnenten nicht spammen. Danke!

War diese Seite hilfreich?
0 / 5 - 0 Bewertungen