Js-beautify: Option zum Beibehalten oder Inline „kurze Objekte“ in einer einzelnen Zeile

+1 ... mindestens ein Eigenschaftsobjekt könnte in einer einzelnen Zeile bleiben, sodass sich c1[key] = { $exists: true }; nicht ändern würde

                c1[key] = {
                    $exists: true
                };

+1

Beliebte Anfrage. :Lächeln:

Der alte Pull-Request von dafür wurde gemacht, bevor wir Zeilenumbruch hatten. Der Zeilenumbruch sollte es einfacher machen.

Wir erkennen, wenn wir uns innerhalb einer Objektdeklaration befinden, das ist also nicht schlimm, aber wir erkennen es spät (siehe #200), sodass es möglicherweise etwas Rückverfolgung erfordert, um ein erweitertes Objekt zu reparieren.

Ich bin dafür, aber ich habe eine Frage. Was ist, wenn ein Objektliteral genau eine Eigenschaft hat, die selbst ein Objektliteral mit genau einer Eigenschaft ist? Dies könnte mehrmals wiederholt werden. In dem Beispiel, das ich unten habe, würde ich es vorziehen, den Code in einer Zeile zu formatieren. Andere mögen anderer Meinung sein, aber ich denke, es ist ein wichtiger Aspekt, der dabei berücksichtigt werden muss.

Dies könnte auf die Spitze getrieben werden, wenn der Code aufgrund der Zeilenlänge umbrochen werden muss, aber ich habe Fälle in meinem Code, in denen:

//I prefer this...
{ foo : { bar : { baz : 42 } } }

//... over this.
{
    foo : {
        bar : {
            baz : 42
        }
    }
}

@TheLudd Ich stimme voll und ganz zu und wollte das selbst vorschlagen. Möglicherweise auch eine Tiefenoption. Es gibt eine Grenze für die Lesbarkeit, die nach einigen Ebenen tief ist. Ich würde sagen, was Sie dort haben, wäre die maximale Standardeinstellung.

@mokkabonna Gute Idee mit der Tiefenoption. Das beseitigt einige Unklarheiten darüber, wie Code wie dieser formatiert werden sollte. Wenn es machbar ist...

Wenn nicht die Tiefe, begrenzen Sie es vielleicht durch die Länge ... sagen Sie, es wird nach 80 Zeichen umgebrochen. Nicht so elegant wie Tiefe, aber was auch immer schnell machbar ist.

+1

Ich bevorzuge die Idee der Länge. Wenn alles in die Breite des Fensters passt, lassen Sie es.

Starke Unterstützung dafür. Zu v1.5.0 hinzugefügt.

: klatschen :: klatschen :: klatschen :: klatschen:

Wird es auch solche einzeiligen Anweisungen beibehalten?

if(someCondition) { return something; }

Das ist als Spezifikations-/Implementierungsentscheidung. Es scheint möglich, aber vielleicht keine gute Idee, sie zusammenzuführen.

Einverstanden. Nicht sicher, wie Sie es verfolgen möchten, vielleicht ein anderes Problem "Kurze Ausdrücke/Anweisungen in einer Zeile beibehalten"?

Sicher, und beachten Sie, dass es mit diesem Problem zusammenhängt.

Fertig. https://github.com/einars/js-beautify/issues/338

FYI, Dies ist im Grunde eine andere Version #114 . Eines der ältesten offenen Probleme.

Irgendwelche Updates dazu? js-beautify ist einer der besten Formatierer da draußen, abgesehen von diesem verbleibenden Problem.

Ich denke, das ist der einzige Grund, warum ich js Beautifier nicht beim Speichern ausführe.

+1

So sehr ich das in 1.5.0 machen möchte, ich muss es auf 1.5.2 setzen.

Es gibt bereits eine große Anzahl von Änderungen in 1.5.0, und dies ist ein bedeutendes Feature, das einige Wiederholungen und Rückmeldungen erfordert, um sauber zu landen.

Es ist sicherlich die Verbesserung mit der höchsten Priorität für 1.5.2.

:+1: Ich sehe, 1.5.1 wurde gestern veröffentlicht. Ist das hier angekommen? Wenn ja, was ist die Option?

Habe meinen Kommentar oben aktualisiert.

OK danke. Werde dann in der nächsten Ausgabe danach suchen.

:+1:

+1

Hey, ich habe gerade von jbeautify erfahren und es mit Sublime Text 3 eingerichtet. Es rockt!! Und ich bin auch darauf gestoßen und habe im Internet gesucht und diese Diskussion gefunden. Freut mich zu hören, dass es in 1.5.2 kommt.

Seit dem letzten Kommentar zu 1.5.2 sind jetzt fast 5 Monate vergangen ... was ist die ETA? Würde gerne var obj = { one: property } in einer Zeile bleiben :) :)

ETA ist, wenn jemand es tut. Das werde ich wahrscheinlich irgendwann im nächsten Monat sein.

Genial!!! Gut zu wissen

Am 17. September 2014 um 23:49 Uhr schrieb Liam Newman [email protected] :

ETA ist, wenn jemand es tut. Das werde ich wahrscheinlich irgendwann im nächsten Monat sein.

—
Antworten Sie direkt auf diese E-Mail oder zeigen Sie sie auf GitHub an.

Ich muss das auf v1.6.0 pushen.

Ich habe erhebliche Arbeit geleistet (wie in #530 erwähnt), um diese Funktion zu aktivieren. aber es ist ehrlich gesagt immer noch ein zu großes Unterfangen, um es in diese Veröffentlichung zu schaffen.

Beeindruckend...

Lesen Sie einfach einige der ECMA-Skriptspezifikationen und öffnen Sie Fehler in Ihrem Github
scheint riesig!

Glücklicherweise muss ich in meinem Anwendungsfall mein JS normalerweise nur einmal pro Datei verschönern.

Ich habe einen zweiten Satz einfacher Regex-Muster zum Suchen und Ersetzen erstellt, die auto
ausführen, wenn ich meine Datei speichere, und normalerweise muss ich verschönern nie wieder ausführen
diese Datei.

Wenn ich es aus irgendeinem Grund jemals tue, sind es nur ein paar zusätzliche Sekunden für die manuelle Eingabe
stellt unterbrochene einzeilige ifs oder Objektliterale wieder in einer Zeile wieder her. (Nein ich
habe kein Regex-Find + Replace für diese, lol)

Am Sonntag, den 28. September 2014, schrieb Liam Newman [email protected] :

Ich muss das auf v1.6.0 pushen.

Ich habe bedeutende Arbeit geleistet (wie in #530
https://github.com/beautify-web/js-beautify/pull/530) in Richtung Aktivierung
Dieses Feature. aber es ist ehrlich gesagt immer noch ein zu großes Unterfangen, um es zu machen
diese Ausgabe.

—
Antworten Sie direkt auf diese E-Mail oder zeigen Sie sie auf GitHub an
https://github.com/beautify-web/js-beautify/issues/315#issuecomment -57132532
.

:+1: Ich freue mich sehr über dieses Feature :)

+1 Ich wünschte, es wäre verfügbar!

+1 - Benötigen Sie dies, damit wir überall sparen können

+1

:+1:

+1 - aus diesem Grund auch nicht mit Pre-Save verwenden

:+1:

Außerdem macht Escodegen das richtig, sein Code könnte die Quelle der Inspiration sein:

var esprima = require("esprima"),
    esgen = require("escodegen").generate;

console.log(esgen(esprima.parse("var a = {code: 'code'}")));
console.log(esgen(esprima.parse("var a = {code: 'code', more: 'code'}")));

@bitwiseman
Dieses Problem ist möglicherweise nicht lösbar für eine beliebige Menge an Verschachtelungen (z. B. eine wirklich große Menge an Verschachtelungen), da die dieser Verschachtelung entsprechende Sprache nicht regulär ist, aber vielleicht können Sie aus praktischen Gründen eine Grenze annehmen (z. B. höchstens Verschachtelung auf Ebene 10 oder Verwenden der Dateigröße, um ein angemessenes Verschachtelungslimit zu bestimmen)

+1 für diese Anfrage.

Es ist viel zu ausführlich, um dies beispielsweise aufzuteilen

view.on('post', {action: 'removeTask'}, function(next) {

zu mehreren Zeilen.

+1

Gibt es eine neue ETA?

:+1:

Wir brauchen das!!

:+1:

:+1:

:+1:

+1

Obwohl diese Funktion nicht implementiert ist, verwende ich Regex in meinem eigenen Run-Skript irgendwo hier, wie pretty = pretty.replace(/{([^{}]*?)}/g, function(s, p) { return (s.length < 100 && !/;/.test(p)) ? s.replace(/\n\s*/g, ' ') : s })
Vielleicht wird es jemandem nützlich sein.

@aves84 kann es nicht zum Laufen bringen. Aber du hast mich dazu gebracht, einen Blick auf den Quellcode zu werfen, anstatt jetzt nur herumzuwarten, also vielen Dank: D

@schoening vielleicht habe ich verwirrend geschrieben, die Zeile sollte nach "verschönern" hinzugefügt werden, nicht statt. Jetzt habe ich versucht, dieses spezielle Skript zu ändern:

var pretty = beautify[fileType](code, config);
if (fileType == 'js') pretty = pretty.replace(/{([^{}]*?)}/g, function(s, p) {
            return (s.length < 100 && !/;/.test(p)) ? s.replace(/\n\s*/g, ' ') : s
        });

Und es funktioniert richtig.

@aves84 , nein, das habe ich verstanden, es machte Sinn. Ich verwende Linux Mint und durchsuche diesen Ordner / ändere diese Datei:
/home/username/.config/sublime-text-3/Packages/HTML-CSS-JS Prettify/scripts/node_modules/js-beautify/js/lib/cli.js

Ändern dieser Funktion:

function makePretty( code, config, outfile, callback ) {
  try {
    var fileType = getOutputType( outfile, config.type );
    var pretty = beautify[ fileType ]( code, config );
    if ( fileType == 'js' ) pretty = pretty.replace( /{([^{}]*?)}/g, function ( s, p ) {
      return ( s.length < 100 && !/;/.test( p ) ) ? s.replace( /\n\s*/g, ' ' ) : s
    } );

    callback( null, pretty, outfile, config );
  } catch ( ex ) {
    callback( ex );
  }

}

Und wenn ich dann so etwas versuche, wird das Objekt immer noch aufgeteilt:

var foo = {
  bar: "Hello world!"
};

Entschuldigung für all die Fragen Kumpel.

@schoening höchstwahrscheinlich verwendet die Erweiterung cli.js nicht und ersetzt sie durch eine eigene Datei mit require('js-beautify') . In Brackets habe ich Änderungen an ~/.config/Brackets/extensions/user/hirse.beautify/main.js vorgenommen
Oder Sie können beispielsweise versuchen, https://github.com/beautify-web/js-beautify/blob/master/js/lib/beautify.js#L369 zu bearbeiten.

Ich denke, sublime verwendet die Python-Version.

@mokkabonna - es kommt darauf an. Einige erhabene Plugins umschließen node.js-Aufrufe, andere verwenden Python direkt.

:+1: pluseinspluseins

+1. Gibt es eine solche Option für jetzt?

:+1: Ich freue mich darauf, danke.

:+1:

@FrankFang Es wurde auf 1.6.0 zurückgesetzt, das noch nicht gelandet ist
@aves84 Ihr Trick unterbricht/reduziert manchmal Funktionen/for-of-loops/if-Anweisungen

for (var data of columnData) { ctx.drawImage(data.img, data.options.x, data.options.y) }

img.onerror = function() { reject() }

if (index >= rows.length) { return }

@dani-h Nun, diese Methode ist alles andere als ideal, sie stützt sich auf das Semikolon bei der Definition von kurzen Objekten und Codeblöcken: Wenn keine Semikolons vorhanden sind und die Anzahl der Zeichen weniger als 100 beträgt, werden die Zeilenumbrüche entfernt. Es wird sogar Fehler in Code verursachen, der die automatische Semikolon-Einfügung von Javascript verwendet.

:+1:

:+1: Ich freue mich darauf.

+1 ... ich würde gerne sehen, dass dies bald eintrifft.

Das ist der einzige Grund, warum wir dieses Plugin derzeit nicht verwenden können.

+1

+1

+1 dazu, hindert mich daran, dies zu verwenden. Sogar eine Option, dies einfach zu deaktivieren, würde helfen!

+1 +1 +1

+1

+1 und ein Dankeschön für all Ihre harte Arbeit daran!

+1 Im Moment verdoppelt das Verschönern meinen Code aufgrund dieses Problems buchstäblich in ein schreckliches hässliches Durcheinander. Es ist unter bestimmten Umständen ein ziemlich lähmender Fehler. Zumal ich js-beautify als Pseudo-Linter verwende (wenn die Einzüge nicht stimmen, habe ich irgendwo eine Klammer übersehen.) Mein Muskelgedächtnis verwandelt meine schönen Unit-Tests in eine 10-minütige Aufgabe, alle meine Objektliterale zu reparieren.

js-beautify -pX <filename> | perl -0777 -i -pe 's/\{\s*([^{}]{30,180}?)\s*\}/\{ $1 \}/mg'

Diese Codezeile faltet die ungefalteten Dinge mit einer Länge von 30 bis 180 Zeichen ohne eingebettete Blöcke zurück. wahrscheinlich kann es für einige Leute nützlich sein.

+1 und ein Dankeschön für all Ihre harte Arbeit daran!

+1. Drei Zeilen statt einer sind zu viel.

Ich hoffe, dass dies möglich ist. :+1:

Es ist das einzige Verhalten von js-beautify, das mich unzufrieden macht. :sweat_smile:

@vekat - Wie Sie sehen können, sind Sie nicht allein. :Lächeln:

@nels-o - ganz andere Sache, sorry. Template-Klammern wie {{ und }} werden völlig anders geparst als JavaScript-Klammern. Außerdem würden sie beim Inlining von Objekten wie { a: { b: {} } } } aussehen.

(WRT-Vorlagenbits wie {{}} und {{!}} ) Ist es das? Wenn sie sich in Skript-Tags befinden, scheinen diese formatiert zu sein. Zum Beispiel das:

wird dies nach dem Ausführen des Verschönerers.

Ah :) Danke @bitwiseman

Vielleicht hätte ich sagen sollen, _wenn_ sie gehandhabt werden würden, _würden_ sie völlig getrennt gehandhabt werden. :smile: Trotzdem tut mir leid.

+1. Irgendeine Idee von einer ETA? Das macht mich sehr traurig :(

+1. Würde diese Funktion auch lieben! Leider habe ich keine Zeit irgendwie zu helfen :(

+1, wir warten alle noch geduldig. Dies wird eine großartige Ergänzung sein

Die von mir vorgenommene Änderung versteht "kurze" Objekte nicht wirklich - sie versucht nur, die Objekte beizubehalten, die die Eingabe bereitstellt und die keine Zeilenumbrüche enthalten. Sobald der Zeilenumbruch auftritt, wird das Objekt in die Formatierung "reduzieren" umgedreht. Dies ist also immer noch eine unvollkommene Lösung, aber eine Verbesserung.

Wenn das so funktioniert, wie ich es verstanden habe, denke ich, dass dies bereits eine enorme Verbesserung der aktuellen Situation ist. In den meisten Fällen ist dies ausreichend.

+1

+1 hoffe, dass dies bald geschehen ist

@NerdPad - es _ist_ fertig.

Können wir es mit Klammern verwenden? o_O

@C-Weinstein - Vielleicht könnten Sie ein neues Problem mit einem Beispiel für die Eingabe und die gewünschte Ausgabe eröffnen?

Für Leute wie mich, die hierher kommen und nach einer Möglichkeit suchen, es zum Laufen zu bringen: Es funktioniert und kann mit den Optionen in .jsbeautifyrc aktiviert werden

   "brace_style": "collapse-preserve-inline"

Leider hat das nicht funktioniert :( Aber danke für den Versuch.

@Ceyaje - Wie hat es nicht funktioniert? Wo hat es nicht funktioniert? Was waren Ihre Inputs und Outputs?

Eingabe war

var q = { x: "a", b: "c" }

Es "verschönert" zu

var q = {
    x: "a",
    b: "c"
}

@Ceyaje Sie müssen die Option "brace-style" auf "collapse-preserve-inline" setzen

@aves84 - danke! Fortsetzung der Diskussion in #995.

@aves84 Das habe ich gemacht. Ich habe gesagt, dass es immer noch passiert, also habe ich # 995 geöffnet, aber ich benutze Klammern und war mir nicht bewusst, dass es ein anderer Code war

@Kutsan - Bitte öffnen Sie ein neues Problem.

Ich konnte die Option expand-preserve-inline mit der HTML-Datei in Atom nicht finden. Ich schreibe Javascript sowohl in der HTML-Datei als auch in der JS-Datei.

Platzieren Sie "preserve-inline" nach der Einstellung, die Sie verwenden möchten (reduzieren, erweitern usw.).

"brace_style": "collapse,preserve-inline"

https://i.gyazo.com/2831254cc47d08c879c7d36a7f1a30d0.png

Das obige passiert, aber mein Klammerstil ist Collapse-Preserve-Inline. Ich habe den gesamten Thread gelesen, ich glaube nicht, dass ich etwas falsch mache. Atom bereits neu gestartet, nur für den Fall, nichts.

Gibt es hierzu Neuigkeiten? collapse-preserve-inline erweitert die Pfeilfunktion immer noch auf mehrere Zeilen.

@grandslammer - Bitte werfen Sie einen Blick auf offene Probleme, die das Wort "Pfeil" enthalten. Wenn Sie ein Problem nicht sehen, das das abdeckt, worüber Sie sprechen, öffnen Sie bitte ein neues Problem.

Es tut mir leid: Ursprüngliches Thema ist "Option zum Beibehalten oder Einfügen von "kurzen Objekten" in einer einzelnen Zeile # 315?
Diese Diskussion ist in viele Richtungen abgedriftet. Kann BITTE JEMAND die richtigen Einstellungen für die neueste Version von js-beautify angeben, um die angeforderte Formatierung zu erreichen? Danke

@ainthek es ist "brace_style": "collapse,preserve-inline"

Wie wäre es mit den Einstellungen in der neuesten Version von vs code, um dieses Problem zu beheben?

In Vs Code 1.20.1 kann ich den Stil "brace_style": "expand,preserve-inline" nicht zum Laufen bringen.

Eingang:

konst
 {
 Dialog
 } = require("elektron").remote;

Ausgabe (Nachdem Sie diesen Bereich ausgewählt und auf F1 geklickt haben ---> Auswahl verschönern) : KEINE ÄNDERUNG :(

Erwartete Ausgabe: const {dialog} = require("electron").remote;

PS ----> die verzerrte Eingabe wurde nach dem Verschönern der gesamten Datei erhalten. Niemand schreibt Code auf diese verzerrte Weise :P

Für vscode hat das Hinzufügen unten in den Benutzereinstellungen für mich funktioniert:
"beautify.config": { "brace_style": "collapse,preserve-inline" }

Vielen Dank für die Unterstützung Jungs.

@sulkhanp - Bitte reichen Sie ein Problem ein, das das Verhalten beschreibt.

Die Lösung von @vipingoel funktioniert!
Warum funktioniert diese Option nur in den vscode-Benutzereinstellungen, nicht in meiner .jsbeautifyrc -Datei?

"brace_style": "expand,preserve-inline" funktioniert nicht.

Verhalten erwarten:

  let $w = $(window),  w = $w.width(),  h = $w.height();
  constructor()
  {
    this.setupData(); this.setupMenus(); this.setupUser(); this.setupUI();
  }

Aktuelles Verhalten:

    let $w = $(window),
      w = $w.width(),
      h = $w.height();

  constructor()
  {
    this.setupData();
    this.setupMenus();
    this.setupUser();
    this.setupUI();
  }

@SiJinmin , das sind keine kurzen Objekte und haben daher nichts mit diesem Problem zu tun.

@vipingoel Es funktioniert. Ich bin wirklich glücklich. Danke!!!