Js-beautify: Option pour conserver ou incorporer des "objets courts" sur une seule ligne

+1 ... au moins un objet propriété pourrait rester sur une seule ligne donc c1[key] = { $exists: true }; ne changerait pas en

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

+1

Demande populaire. :le sourire:

L'ancienne demande d'extraction de pour cela a été faite avant que nous ayons un retour à la ligne. Avoir le retour à la ligne devrait faciliter les choses.

Nous détectons quand nous sommes à l'intérieur d'une déclaration d'objet, donc ce n'est pas mal, mais nous le détectons tardivement (voir #200), donc cela peut impliquer un retour en arrière pour réparer un objet développé.

Je suis tout à fait d'accord mais j'ai une question. Que se passe-t-il si un littéral d'objet a exactement une propriété qui est en soi un littéral d'objet avec exactement une propriété ? Cela pourrait être répété plusieurs fois. Dans l'exemple ci-dessous, je préférerais en fait que le code soit formaté sur une seule ligne. D'autres peuvent ne pas être d'accord, mais je pense que c'est un aspect important à prendre en compte.

Cela pourrait être poussé à l'extrême où le code doit être enveloppé en raison de la longueur de la ligne, mais j'ai des cas dans mon code où :

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

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

@TheLudd Je suis totalement d'accord et j'allais le suggérer moi-même. Peut-être aussi une option de profondeur. Il y a une limite à la lisibilité après quelques niveaux de profondeur. Je dirais que ce que vous avez là serait le maximum par défaut.

@mokkabonna Bonne idée de l'option de profondeur. Cela élimine une certaine ambiguïté sur la façon dont un code comme celui-ci doit être formaté. Si c'est faisable...

Si ce n'est pas la profondeur, limitez-le peut-être par la longueur ... disons qu'il s'enroule après 80 caractères. Pas aussi élégant que la profondeur mais tout ce qui peut être faisable rapidement.

+1

Je préfère l'idée de longueur. Si tout peut tenir dans la largeur de la fenêtre, laissez-le.

Un soutien fort pour cela. Ajouté à la v1.5.0.

: claquement :: claquement :: claquement :: claquement:

Est-ce que ça va aussi conserver des instructions sur une seule ligne comme celle-ci ?

if(someCondition) { return something; }

C'est en tant que décision de spécification / mise en œuvre. Cela semble possible, mais ce n'est peut-être pas une bonne idée de les réunir.

D'accord. Vous ne savez pas comment vous voulez le suivre, peut-être un autre problème "Conserver les expressions/instructions courtes sur une seule ligne" ?

Bien sûr, et notez que cela est lié à ce problème.

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

Pour votre information, il s'agit essentiellement d'une autre version #114 . L'un des plus anciens problèmes ouverts.

Des mises à jour à ce sujet ? js-beautify est l'un des meilleurs formateurs, à l'exception de ce problème restant.

Je pense que c'est la seule raison pour laquelle je n'utilise pas js beautifier lors de la sauvegarde.

+1

Autant que je veux faire cela en 1.5.0, je vais devoir le mettre en 1.5.2.

Il y a déjà un grand nombre de changements dans la 1.5.0, et c'est une fonctionnalité importante qui va nécessiter quelques itérations et commentaires pour atterrir proprement.

C'est certainement l'amélioration la plus prioritaire pour 1.5.2.

:+1: Je vois que 1.5.1 est sorti hier. Cela a-t-il réussi? Si oui, quelle est l'option ?

Mise à jour de mon commentaire ci-dessus.

D'accord merci. Je le chercherai dans la prochaine version alors.

:+1:

+1

Hé, je viens de découvrir jsbeautify et je l'ai configuré avec Sublime Text 3. Ça déchire !! Et moi aussi, je suis tombé dessus et j'ai cherché sur le Web et j'ai trouvé cette discussion. Heureux d'entendre qu'il arrive en 1.5.2.

Cela fait presque 5 mois maintenant depuis le dernier commentaire sur la 1.5.2... c'est quoi l'ETA ? J'adorerais que var obj = { one: property } reste sur une seule ligne :) :)

ETA, c'est quand quelqu'un le fait. Ce sera probablement moi, au cours du mois prochain.

Impressionnant!!! Bon de savoir

Le 17 septembre 2014, à 23h49, Liam Newman [email protected] a écrit :

ETA, c'est quand quelqu'un le fait. Ce sera probablement moi, au cours du mois prochain.

—
Répondez directement à cet e-mail ou consultez-le sur GitHub.

Je vais devoir pousser cela vers la v1.6.0.

J'ai fait un travail important (comme indiqué dans # 530) pour activer cette fonctionnalité. mais c'est franchement encore trop gros pour en faire cette version.

Wow...

Il suffit de lire certaines des spécifications de script ECMA et d'ouvrir des bogues dans votre github this
semble énorme !

Heureusement, dans mon cas d'utilisation, je n'ai généralement besoin d'embellir mon JS qu'une seule fois par fichier.

J'ai créé un deuxième ensemble de modèles simples de recherche et de remplacement de regex qui auto
exécuter lorsque j'enregistre mon fichier, et je n'ai généralement jamais besoin d'exécuter embellir à nouveau sur
ce dossier.

Si jamais je le fais, pour une raison quelconque, ce n'est que quelques secondes supplémentaires pour manuellement
restaurer les ifs d'une ligne ou les littéraux d'objet brisés sur une seule ligne. (non je
n'ont pas de regex find + replace pour ceux-là, lol)

Le dimanche 28 septembre 2014, Liam Newman [email protected] a écrit :

Je vais devoir pousser cela vers la v1.6.0.

J'ai fait un travail important (comme indiqué dans #530
https://github.com/beautify-web/js-beautify/pull/530) vers l'activation
cette fonctionnalité. mais c'est franchement encore trop gros pour en faire
cette version.

—
Répondez directement à cet e-mail ou consultez-le sur GitHub
https://github.com/beautify-web/js-beautify/issues/315#issuecomment -57132532
.

:+1: Je suis très excité par cette fonctionnalité :)

+1 J'aimerais qu'il soit disponible !

+1 - J'en ai besoin pour que nous puissions embellir en sauvegardant partout

+1

:+1:

+1 - également non utilisé avec la pré-sauvegarde à cause de cela

:+1:

De plus, Escodegen le fait correctement, son code pourrait être la source d'inspiration :

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
Ce problème peut ne pas être résolu pour une quantité arbitraire d'imbrication (par exemple, une très grande quantité d'imbrication) puisque le langage correspondant à cette imbrication n'est pas régulier, mais vous pouvez peut-être supposer une limite à des fins pratiques (par exemple, au plus niveau 10 d'imbrication ou en utilisant la taille du fichier pour déterminer une limite d'imbrication raisonnable)

+1 pour cette demande.

C'est une façon trop verbeuse de diviser par exemple ceci

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

à plusieurs lignes.

+1

Y a-t-il un nouvel ETA ?

:+1:

Nous en avons besoin!!

:+1:

:+1:

:+1:

+1

Bien que cette fonctionnalité ne soit pas implémentée, j'utilise regex dans mon propre script d'exécution quelque part ici comme pretty = pretty.replace(/{([^{}]*?)}/g, function(s, p) { return (s.length < 100 && !/;/.test(p)) ? s.replace(/\n\s*/g, ' ') : s })
Peut-être que ça servira à quelqu'un.

@aves84 n'arrive pas à le faire fonctionner .. Mais vous m'avez fait jeter un œil au code source au lieu de simplement attendre maintenant alors merci beaucoup :D

@schoening peut-être que je confonds écrit, la ligne doit être ajoutée après "embellir", pas à la place de. Maintenant, j'ai essayé de changer ce script particulier:

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
        });

Et cela fonctionne correctement.

@aves84 , nah que j'ai compris, c'était logique. Je suis sous Linux Mint et je parcours ce dossier/change ce fichier :
/home/nom d'utilisateur/.config/sublime-text-3/Packages/HTML-CSS-JS Prettify/scripts/node_modules/js-beautify/js/lib/cli.js

Modification de cette fonction :

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 );
  }

}

Et puis quand j'essaie quelque chose comme ça, l'objet est toujours divisé:

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

Désolé pour tout le questionnement mon pote.

@schoening très probablement l'extension n'utilise pas cli.js et le remplace par son propre fichier avec require('js-beautify') . Entre parenthèses, j'ai apporté des modifications à ~/.config/Brackets/extensions/user/hirse.beautify/main.js
Ou vous pouvez essayer de modifier https://github.com/beautify-web/js-beautify/blob/master/js/lib/beautify.js#L369 par exemple.

Je pense que sublime utilise la version python.

@mokkabonna - ça dépend. Certains plugins sublimes enveloppent les appels node.js, d'autres utilisent directement python.

:+1: plusunplusun

+1. Existe-t-il une telle option pour l'instant ?

:+1: hâte d'y être, merci.

:+1:

@FrankFang Il a été repoussé à 1.6.0 qui n'a pas encore atterri
@aves84 Votre astuce casse/réduit les fonctions/for-of-loops/if instructions parfois

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 Eh bien, cette méthode est loin d'être idéale, elle s'appuie sur le point-virgule dans la définition des objets courts et des blocs de code : s'il n'y a pas de point-virgule et que le nombre de caractères est inférieur à 100, les sauts de ligne sont supprimés. Cela provoquera même des erreurs dans le code qui utilise l'insertion automatique de points-virgules de javascript.

:+1:

:+1: J'ai hâte d'y être.

+1 ... j'aimerais voir cela arriver bientôt.

c'est la seule raison pour laquelle nous ne pouvons pas utiliser ce plugin à ce stade.

+1

+1

+1 à ce sujet, m'empêche de l'utiliser. Même une option pour simplement désactiver cela aiderait!

+1 +1 +1

+1

+1 et un merci pour tout votre travail acharné à ce sujet!

+1 En ce moment, l'embellissement double littéralement mon code en un horrible gâchis à cause de ce problème. C'est un bug assez paralysant dans certaines circonstances. Surtout depuis que j'utilise js-beautify comme pseudo-linter (si les retraits ne sont pas corrects, j'ai raté un crochet quelque part.) Ma mémoire musculaire transforme mes beaux tests unitaires en une tâche de 10 minutes pour réparer tous mes objets littéraux.

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

cette ligne de code repliera les choses dépliées entre 30 et 180 caractères sans blocs intégrés. cela peut probablement être utile pour certaines personnes.

+1 et un merci pour tout votre travail acharné à ce sujet!

+1. Trois lignes au lieu d'une, c'est trop.

J'espère que cela pourra être fait. :+1:

C'est le seul comportement de js-beautify qui me déplaît. :sweat_smile:

@vekat - Comme vous pouvez le voir, vous n'êtes pas seul. :le sourire:

@nels-o - chose totalement différente, désolé. Les accolades de modèle comme {{ et }} sont analysées complètement différemment des accolades javascript. De plus, lors de l'intégration d'objets, ils ressembleraient à { a: { b: {} } } } .

(Bouts de modèle WRT tels que {{}} et {{!}} ) Est-ce ? S'ils sont dans des balises de script, ceux-ci semblent être formatés. Par exemple ceci :

devient cela après avoir exécuté le prettifier.

Ah :) Merci @bitwiseman

Peut-être que ce que j'aurais dû dire, c'est que _si_ ils devaient être traités, ils _seraient_ traités complètement séparément. :sourire: Pourtant, désolé.

+1. Une idée d'ETA ? Cela me rend très triste :(

+1. J'adorerais cette fonctionnalité aussi! Malheureusement, je n'ai pas le temps d'aider d'une manière ou d'une autre :(

+1, nous attendons tous patiemment. Ce sera un ajout génial

La modification que j'ai apportée ne comprend pas vraiment les objets "courts" - elle essaie simplement de préserver les objets fournis par l'entrée qui ne contiennent aucune nouvelle ligne. Une fois que le retour à la ligne se produit, l'objet bascule vers le formatage "réduit". Donc, c'est encore une solution imparfaite, mais une amélioration.

Si cela fonctionne comme je l'ai compris, je pense que c'est déjà une énorme amélioration par rapport à la situation actuelle. Dans la plupart des cas, cela suffit.

+1

+1 j'espère que ce sera fait bientôt

@NerdPad - c'est _is_ fait.

Peut-on l'utiliser avec Brackets ? o_O

@C-Weinstein - Peut-être pourriez-vous ouvrir un nouveau problème avec un exemple d'entrée et de sortie souhaitée ?

Pour les personnes comme moi qui viennent ici à la recherche d'un moyen de le faire fonctionner : cela fonctionne et peut être activé avec les options de .jsbeautifyrc

   "brace_style": "collapse-preserve-inline"

Malheureusement, cela n'a pas fonctionné :( Mais merci d'avoir essayé.

@Ceyaje - Comment ça n'a pas marché ? Où ça n'a pas marché ? Quelles ont été vos entrées et vos sorties ?

L'entrée était

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

Il "embellit" de

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

@Ceyaje vous devez définir l'option "brace-style" sur "collapse-preserve-inline"

@aves84 - merci ! Poursuite de la discussion au #995.

@aves84 J'ai fait ça. Je disais que cela se produisait toujours, alors j'ai ouvert # 995 mais j'utilise des crochets et je ne savais pas que c'était un code différent

@Kutsan - Veuillez ouvrir un nouveau problème.

Je n'ai pas trouvé l'option expand-preserve-inline avec le fichier html dans atom. J'écris du javascript dans le fichier html et le fichier js.

Placez "preserve-inline" après le paramètre que vous souhaitez utiliser (réduire, développer, etc.)

"brace_style": "réduire, conserver en ligne"

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

Ce qui précède se produit, mais mon style d'accolade est effondrement-préservé-en ligne. J'ai lu le fil complet, je ne crois pas que je fais quoi que ce soit de mal. Déjà redémarré Atom, juste au cas où, rien.

Une mise à jour pour ceci? collapse-preserve-inline étend toujours la fonction de flèche sur plusieurs lignes.

@grandslammer - Veuillez jeter un coup d'œil aux problèmes ouverts qui incluent le mot "flèche". Si vous ne voyez pas de problème qui couvre ce dont vous parlez, veuillez ouvrir un nouveau problème.

Je suis désolé : le sujet d'origine est "Option pour conserver ou incorporer des "objets courts" sur une seule ligne #315 ?
cette discussion a dérivé de plusieurs façons, S'IL VOUS PLAÎT, QUELQU'UN peut-il indiquer les paramètres corrects pour la dernière version de js-beautify pour obtenir le formatage demandé? Merci

@ainthek c'est "brace_style": "collapse,preserve-inline"

Qu'en est-il des paramètres dans la dernière version de vs code pour résoudre ce problème ?

Dans vs code 1.20.1 , je n'arrive pas à faire fonctionner le style "brace_style": "expand,preserve-inline".

Saisir :

constante
 {
 dialogue
 } = require("électron").remote ;

Sortie (Après avoir sélectionné cette zone et cliqué sur F1 ---> Embellir la sélection) : AUCUN CHANGEMENT :(

Sortie prévue : const {dialog} = require("electron").remote;

PS ----> l'entrée déformée a été obtenue après avoir embelli l'ensemble du fichier. Personne n'écrit de code de cette manière déformée :P

Pour vscode, l'ajout ci-dessous dans les paramètres utilisateur a fonctionné pour moi :
"beautify.config": { "brace_style": "collapse,preserve-inline" }

Merci pour le soutien les gars.

@sulkhanp - Veuillez déposer un problème décrivant le comportement.

La solution de @vipingoel fonctionne !
Pourquoi cette option ne fonctionne-t-elle que dans les préférences utilisateur vscode, pas dans mon fichier .jsbeautifyrc ?

"brace_style": "expand,preserve-inline" ne fonctionne pas.

s'attendre à un comportement :

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

comportement actuel :

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

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

@SiJinmin ce ne sont pas des objets courts et donc pas liés à ce problème.

@vipingoel Ça marche. Je suis vraiment heureux. Merci!!!