Js-beautify: Opción para conservar o alinear "objetos cortos" en una sola línea

+1 ... al menos un objeto de propiedad podría permanecer en una sola línea, por lo que c1[key] = { $exists: true }; no cambiaría a

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

+1

Petición popular. :sonrisa:

La antigua solicitud de extracción de esto se realizó antes de que tuviéramos el ajuste de línea. Tener el ajuste de línea debería hacerlo más fácil.

Detectamos cuando estamos dentro de una declaración de objeto, por lo que no está mal, pero lo detectamos tarde (ver #200), por lo que puede implicar un seguimiento para arreglar un objeto expandido.

Estoy a favor de esto, pero tengo una pregunta. ¿Qué pasa si un objeto literal tiene exactamente una propiedad que en sí mismo es un objeto literal con exactamente una propiedad? Esto podría repetirse varias veces. En el ejemplo que tengo a continuación, en realidad preferiría que el código se formateara en una línea. Otros pueden estar en desacuerdo, pero creo que es un aspecto importante a considerar en esto.

Esto podría llevarse a extremos en los que el código debe ajustarse debido a la longitud de la línea, pero tengo casos en mi código en los que:

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

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

@TheLudd Estoy totalmente de acuerdo e iba a sugerir esto yo mismo. Posiblemente una opción de profundidad también. Hay un límite en lo legible que es después de algunos niveles de profundidad. Diría que lo que tienes allí sería el máximo predeterminado.

@mokkabonna Buena idea sobre la opción de profundidad. Eso elimina cierta ambigüedad de cómo se debe formatear un código como este. Si es factible...

Si no es profundidad, tal vez lo limite por longitud ... digamos que se ajusta después de 80 caracteres. No tan elegante como la profundidad, pero todo lo que se pueda hacer rápidamente.

+1

Prefiero la idea de longitud. Si todo cabe en el ancho de la ventana, déjalo.

Fuerte apoyo para esto. Agregado a v1.5.0.

: aplaudir :: aplaudir :: aplaudir :: aplaudir:

¿También va a conservar declaraciones de una sola línea como esta?

if(someCondition) { return something; }

Eso es como una decisión de especificación/implementación. Parece posible, pero podría no ser una buena idea unirlos.

Acordado. Sin embargo, no estoy seguro de cómo desea realizar un seguimiento, tal vez otro problema "¿Conservar expresiones/declaraciones cortas en una sola línea"?

Claro, y tenga en cuenta que está relacionado con este problema.

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

FYI, esta es básicamente otra versión # 114. Uno de los temas abiertos más antiguos.

¿Alguna actualización sobre esto? js-beautify es uno de los mejores formateadores que existen, excepto por este problema restante.

Creo que esta es la única razón por la que no estoy ejecutando js beautifier al guardar.

+1

Por mucho que quiera hacer esto en 1.5.0, tendré que pasarlo a 1.5.2.

Ya hay una gran cantidad de cambios en 1.5.0, y esta es una característica importante que requerirá algunas iteraciones y comentarios para aterrizar limpiamente.

Sin duda, es la mejora de mayor prioridad para 1.5.2.

:+1: Veo que 1.5.1 se lanzó ayer. ¿Esto entró? Si es así, ¿cuál es la opción?

Actualicé mi comentario anterior.

OK gracias. Lo buscaré en la próxima versión entonces.

:+1:

+1

Oye, acabo de enterarme de jsbeautify y lo configuré con Sublime Text 3. ¡Es genial! Y yo también me encontré con esto, busqué en la web y encontré esta discusión. Me alegra saber que llegará en 1.5.2.

Han pasado casi 5 meses desde el último comentario sobre 1.5.2... ¿qué es la ETA? Me encantaría tener var obj = { one: property } permanecer en una línea :) :)

ETA es cuando alguien lo hace. Probablemente seré yo, en algún momento del próximo mes.

¡¡¡Impresionante!!! Genial saber

El 17 de septiembre de 2014, a las 23:49, Liam Newman [email protected] escribió:

ETA es cuando alguien lo hace. Probablemente seré yo, en algún momento del próximo mes.

—
Responda a este correo electrónico directamente o véalo en GitHub.

Voy a tener que empujar esto a v1.6.0.

He realizado un trabajo significativo (como se indica en el n.° 530) para habilitar esta función. pero, francamente, todavía es una empresa demasiado grande para llegar a este lanzamiento.

Guau...

Solo leyendo algunas de las especificaciones del script ECMA y errores abiertos en su github esto
parece enorme!

Afortunadamente, en mi caso de uso, generalmente solo necesito embellecer mi JS una vez por archivo.

Creé un segundo conjunto de patrones simples de búsqueda y reemplazo de expresiones regulares que
ejecuto cuando guardo mi archivo, y por lo general nunca necesito volver a ejecutar beautify en
ese archivo

Si alguna vez lo hago, por alguna razón, son solo unos segundos adicionales para manualmente
restaurar ifs de una línea divididos o literales de objetos de nuevo a una línea. (No yo
no tengo una expresión regular buscar + reemplazar para esos, lol)

El domingo 28 de septiembre de 2014, Liam Newman [email protected] escribió:

Voy a tener que empujar esto a v1.6.0.

He realizado un trabajo significativo (como se indica en el n.° 530
https://github.com/beautify-web/js-beautify/pull/530) para habilitar
Esta característica. pero, francamente, todavía es una empresa demasiado grande para convertirlo en
este lanzamiento.

—
Responda a este correo electrónico directamente o véalo en GitHub
https://github.com/beautify-web/js-beautify/issues/315#issuecomment-57132532
.

:+1: Estoy muy entusiasmado con esta función :)

+1 ¡Ojalá pudiera estar disponible!

+1 - Necesito esto para que podamos embellecer y guardar en todas partes

+1

:+1:

+1: tampoco se usa con pre-guardado debido a esto

:+1:

Además, Escodegen hace esto correctamente, su código podría ser la fuente de inspiración:

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
Es posible que este problema no tenga solución para una cantidad arbitraria de anidamientos (p. ej., una cantidad realmente grande de anidamientos) ya que el idioma correspondiente a este anidamiento no es regular, pero tal vez pueda suponer un límite para fines prácticos (p. ej., como mucho anidamiento de nivel 10 o utilizando el tamaño del archivo para determinar un límite de anidamiento razonable)

+1 por esta solicitud.

Es demasiado detallado para dividir, por ejemplo, esto

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

a varias líneas.

+1

¿Hay alguna nueva ETA?

:+1:

¡¡Necesitamos esto!!

:+1:

:+1:

:+1:

+1

Si bien esta característica no está implementada, uso expresiones regulares en mi propio script de ejecución en algún lugar de aquí como pretty = pretty.replace(/{([^{}]*?)}/g, function(s, p) { return (s.length < 100 && !/;/.test(p)) ? s.replace(/\n\s*/g, ' ') : s })
Puede ser que sea útil para alguien.

@aves84 no puede hacer que funcione... Pero me hiciste echar un vistazo al código fuente en lugar de esperar ahora, así que muchas gracias :D

@schoening tal vez estoy confundido escribió, la línea debe agregarse después de "embellecer", no en lugar de. Ahora traté de cambiar este script en particular:

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

Y funciona correctamente.

@aves84 , no, eso lo entendí, tenía sentido. Estoy en Linux Mint y estoy navegando por esta carpeta/cambiando este archivo:
/home/username/.config/sublime-text-3/Packages/HTML-CSS-JS Prettify/scripts/node_modules/js-beautify/js/lib/cli.js

Cambiando esta función:

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

}

Y luego, cuando intento algo como esto, todavía se divide el objeto:

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

Lo siento por todo el cuestionamiento amigo.

@schoening lo más probable es que la extensión no use cli.js y lo reemplace con su propio archivo con require('js-beautify') . En Brackets hice cambios en ~/.config/Brackets/extensions/user/hirse.beautify/main.js
O puede intentar editar https://github.com/beautify-web/js-beautify/blob/master/js/lib/beautify.js#L369 , por ejemplo.

Creo que sublime usa la versión de python.

@mokkabonna - depende. Algunos complementos sublimes envuelven las llamadas de node.js, otros usan python directamente.

:+1: másunomásuno

+1. ¿Existe esa opción por ahora?

:+1: deseando que llegue, gracias.

:+1:

@FrankFang Se retrasó a 1.6.0 que aún no ha aterrizado
@aves84 Tu truco rompe/colapsa funciones/for-of-loops/if declaraciones a veces

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 Bueno, este método está lejos de ser ideal, se basa en el punto y coma en la definición de objetos cortos y bloques de código: si no hay punto y coma y el número de caracteres es inferior a 100, se eliminan los saltos de línea. Incluso causará errores en el código que utiliza la inserción automática de punto y coma de javascript.

:+1:

:+1: Esperando eso.

+1 ... me encantaría ver esto pronto.

es la única razón por la que no podemos usar este complemento en este momento.

+1

+1

+1 en esto, me impide usar esto. ¡Incluso una opción para deshabilitar esto ayudaría!

+1 +1 +1

+1

¡+1 y gracias por todo su arduo trabajo en esto!

+1 En este momento, embellecer literalmente duplica mi código en un horrible y feo desastre debido a este problema. Es un error bastante paralizante en algunas circunstancias. Sobre todo porque uso js-beautify como psedo-linter (si las sangrías no son correctas, me perdí un corchete en alguna parte). Mi memoria muscular convierte mis hermosas pruebas unitarias en una tarea de 10 minutos para arreglar todos mis objetos literales.

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

esta línea de código plegará las cosas desplegadas entre 30 y 180 caracteres de longitud sin bloques incrustados. probablemente puede ser útil para algunas personas.

¡+1 y gracias por todo su arduo trabajo en esto!

+1. Tres líneas en lugar de una es demasiado.

Espero que esto se pueda hacer. :+1:

Es el único comportamiento de js-beautify que me disgusta. :sudor_sonrisa:

@vekat - Como puedes ver, no estás solo. :sonrisa:

@nels-o: algo totalmente diferente, lo siento. Las llaves de plantilla como {{ y }} se analizan de manera completamente diferente a las llaves de JavaScript. Además de lo cual, al alinear objetos, se verían como { a: { b: {} } } } .

(Bits de plantilla WRT como {{}} y {{!}} ) ¿Lo es? Si están en etiquetas de script, parece que están formateadas. Por ejemplo esto:

se convierte en esto después de ejecutar el embellecedor.

Ah :) Gracias @bitwiseman

Tal vez lo que debería haber dicho es, _si_ fueran a ser manejados, _serían_ manejados completamente por separado. :smile: Aún así, lo siento.

+1. ¿Alguna idea de una ETA? esto me pone muy triste :(

+1. Me encantaría esa característica también! Desafortunadamente, no tengo tiempo para ayudar de alguna manera :(

+1, todos seguimos esperando pacientemente. Esta será una adición increíble.

El cambio que hice realmente no comprende los objetos "cortos", solo intenta preservar los objetos que proporciona la entrada que no tienen líneas nuevas. Una vez que se produce el ajuste de línea, el objeto cambia al formato "contraer". Entonces, esta sigue siendo una solución imperfecta, pero una mejora.

Si esto funciona como entendí, creo que esto ya es una gran mejora con respecto a la situación actual. En la mayoría de los casos, esto es suficiente.

+1

+1 espero que esto termine pronto

@NerdPad : está hecho.

¿Podemos usarlo con brackets? o_O

@ C-Weinstein: ¿Quizás podría abrir un nuevo problema con un ejemplo de entrada y salida deseada?

Para personas como yo que vienen aquí buscando una forma de hacerlo funcionar: funciona y se puede habilitar con las opciones en .jsbeautifyrc

   "brace_style": "collapse-preserve-inline"

Desafortunadamente, eso no funcionó :( Pero gracias por intentarlo.

@Ceyaje - ¿Cómo no funcionó? ¿Dónde no funcionó? ¿Cuáles fueron sus entradas y salidas?

La entrada fue

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

Se "embellece" a

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

@Ceyaje necesita configurar la opción "estilo de llave" en "collapse-preserve-inline"

@aves84 - ¡gracias! Continuando la discusión en el #995.

@aves84 Hice eso. Estaba diciendo que todavía estaba sucediendo, así que abrí #995 pero estoy usando corchetes y no sabía que era un código diferente

@Kutsan : abra un problema nuevo.

No pude encontrar la opción expandir-preservar-en línea con el archivo html en atom. Escribo javascript tanto en el archivo html como en el archivo js.

Coloque "preservar en línea" después de la configuración que desea usar (contraer, expandir, etc.)

"brace_style": "contraer, conservar en línea"

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

Sucede lo anterior, sin embargo, mi estilo de llave es colapsar-preservar-en línea. Leí el hilo completo, no creo que esté haciendo nada incorrectamente. Ya reinicié Atom, por si acaso, nada.

¿Algún avance en esto? colapsar-preservar-en línea aún expande la función de flecha en varias líneas.

@grandslammer : observe los problemas abiertos que incluyen la palabra "flecha". Si no ve un problema que cubra lo que está hablando, abra un nuevo problema.

Lo siento: el tema original es "Opción para conservar o en línea" objetos cortos "en una sola línea # 315?
esta discusión se ha desviado de muchas maneras, ¿POR FAVOR ALGUIEN puede indicar la configuración correcta para la última versión de js-beautify para lograr el formato solicitado? Gracias

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

¿Qué hay de la configuración en la última versión del código vs para solucionar este problema?

En vs code 1.20.1, no puedo obtener el estilo "brace_style": "expand,preserve-inline", para que funcione.

Aporte :

constante
 {
 diálogo
 } = require("electrón").remoto;

Salida (después de seleccionar esta área y hacer clic en F1 ---> Embellecer selección): SIN CAMBIO :(

Salida esperada: const {dialog} = require("electron").remote;

PD ----> la entrada distorsionada se obtuvo después de embellecer todo el archivo. Nadie escribe código de esa forma distorsionada :P

Para vscode, agregar a continuación en la configuración del usuario funcionó para mí:
"embellecer.config": { "brace_style": "contraer, conservar en línea" }

Gracias por el apoyo chicos.

@sulkhanp : presente un problema que describa el comportamiento.

¡La solución de @vipingoel funciona!
¿Por qué esta opción solo funciona en la preferencia de usuario de vscode, no en mi archivo .jsbeautifyrc ?

"brace_style": "expandir, conservar en línea" no funciona.

esperar comportamiento:

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

comportamiento actual:

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

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

@SiJinmin , estos no son objetos cortos y, por lo tanto, no están relacionados con este problema.

@vipingoel Funciona. Estoy realmente feliz. ¡¡¡Gracias!!!