Js-beautify: Nueva línea insertada después de la importación/exportación del módulo ES6

Creado en 9 ene. 2014  ·  54Comentarios  ·  Fuente: beautify-web/js-beautify

Oye,

Estoy ejecutando jsbeautifier en una colección de módulos Ember.JS ES6 y noté un pequeño problema con las declaraciones de exportación.

Supongamos que tengo un módulo que exporta como se muestra a continuación.

export default DS.FixtureAdapter.extend();

jsbeautifier agregará una nueva línea después de la exportación

export
default DS.FixtureAdapter.extend();

Es un problema menor que solo es un problema para nosotros, ya que aplicamos una ejecución de jsbeautifier antes de que se acepte una confirmación. Por lo tanto, si un desarrollador elimina la nueva línea, el archivo en cuestión se incluirá en la confirmación aunque no tenga nada que ver con los cambios que se están confirmando.

enhancement

Comentario más útil

@the-simian La opción correcta es "brace_style": "collapse-preserve-inline" , en la sección "Estilo de abrazadera" si pasa por las preferencias de Atom. La opción "preserve_newlines" es para conservar las nuevas líneas en todo el archivo. Sin embargo, definitivamente quieres que eso sea cierto. :)

Todos 54 comentarios

Relacionado con el #388.

Creo que el problema aquí es que no manejamos la exportación como una palabra reservada.

Oye , @bitwiseman, ese es exactamente el problema, pero, por ejemplo, si escribo algo como

export default moduleName;

Se embellecerá como

default moduleName;

Que no se ve bien :)

Además, si quiero importar el estilo de corsé

import { mod1, mod2 } from 'filePath';

Se embellecerá como

import { 
  mod1, 
  mod2 
} from 'filePath';

Qué piensas sobre eso ?

Todo esto suena bien. Las palabras clave module , export y import deben agregarse y el código debe escribirse para formatear correctamente.

¿Alguna noticia sobre lo cerca que está de resolverse este problema?

Será en el próximo lanzamiento. La infraestructura está ahí, debería ser un cambio menor.

¡+1 por corregir el formato de las declaraciones de exportación!

+1

+1

+1

+1

+1

+ n. Creo que es solo cuestión de agregar estas palabras clave a la lista de palabras reservadas. ¿Es eso correcto?

editar: no. Traté de encontrar dónde estarían las nuevas reglas, pero es demasiado código para arriesgarme a cambiar =/

:+1:

Parece que esta es una empresa importante para hacer esto bien. Lo siento amigos, pero tengo que dejar esto para el próximo lanzamiento.

Para referencia:
http://people.mozilla.org/~jorendorff/es6-draft.html#sec -módulos
http://people.mozilla.org/~jorendorff/es6-draft.html#sec -importaciones
http://people.mozilla.org/~jorendorff/es6-draft.html#sec -exportaciones

Esto nos hace a todos:

Pero todos debemos recordar:

Eso es exactamente correcto. :smiley:

Para eso, obtiene la siguiente solución: la entrada sin sentido a continuación producirá una salida idéntica del embellecedor. La mayoría de los escenarios todavía se ven horribles, pero sentí que podía piratearlos con un dolor mínimo.

module "a" {
    import odd from "Odd";
    export default function div(x, y) {}
    export function sum(x, y) {
        return x + y;
    }
    export var pi = 3.141593;
    export default moduleName;
    export *
}

:+1:
¿Algún arreglo a la vista?

En mi copioso tiempo libre... :smile:

:+1:

+1

+1

El problema original se solucionó en 1.5.2.

@redking , @dred9e , @Aluxian , @simplyianm , @pgilad , @webbushka , @fpauser , @Volox , @naomifeehanmoran , @darlanalves , @thaume -

me gustaria tu ayuda

Proporcione ejemplos de entrada, salida real y salida deseada para que pueda solucionar este problema. Indique también si la salida real no es deseable o si provoca errores de sintaxis. Los errores de sintaxis tendrán prioridad. Tengo uno hasta ahora de @thaume -

//input
import { mod1, mod2 } from 'filePath';

// actual output - non-breaking 
import { 
  mod1, 
  mod2 
} from 'filePath';

// desired output (unchanged)
import { mod1, mod2 } from 'filePath';

NOTAS:

  • Mire los comentarios de los demás e intente no repetir clases de formato con ligeras diferencias. El mejor esfuerzo está bien. :sonreír:
  • El posicionamiento de los aparatos ortopédicos va a ser un problema clave. Actualmente tenemos una configuración para posicionar todo tipo de llaves: colapsar, expandir,
  • Dado que se solucionó el problema original, es posible que termine cerrando este problema y abriendo otros nuevos para las diversas entradas que proporcione.

@bitwiseman La muestra anterior es exactamente lo que yo también esperaría. He estado jugando con ES6 últimamente en el editor Atom, donde no tengo formato automático al guardar, solo porque las importaciones están desordenadas.

Esperado/Entrada:

import { Bar } from 'lib/Bar';

class Foo {
    constructor() {
        this.bar = new Bar();
    }
}

export { Foo };

Como es ahora:

import {
    Bar
}
from 'lib/Bar';

class Foo {
    constructor() {
        this.bar = new Bar();
    }
}

export {
    Foo
};

Todavía no conozco un ejemplo que rompa el código cuando se formatea.

Sé que esto no es importar/exportar, y está relacionado con jsx, por lo que probablemente sea una bestia completamente diferente, sin embargo, puedo imaginar que una solución estaría relacionada:

return <div {...props}></div>;

se convierte

return <div {...props
    } > < /div>;

¿Configuró e4x = true ?

Sí, lo hice, y puedo ver en jsx normal sin literales que se está respetando. Sin embargo, tener un literal como {... props} en la etiqueta más externa rompe el formato inmediatamente. Si el literal está dentro de un elemento anidado, funciona un poco mejor pero aún se rompe en la etiqueta de cierre. Puedo publicar más ejemplos si este es el lugar/problema correcto.

@loopmode : abra un nuevo problema con el ejemplo que tiene arriba.

+1

:+1: Esto también afecta a la desestructuración de objetos.

var { type, size } = someObject;

se convierte en

var {
        type, size
    } = someObject;

:+1: las importaciones y el formato jsx también están rotos para mí cuando uso atom

+1

+1

+1

+1

Con js-beautify 1.5.10, obtengo lo siguiente:

Aporte:

import { x, y, z } from './other';

Producción:

import {
    x, y, z
}
from './other';

Definitivamente no quiero la nueva línea después de la llave final.

+1

¿Algún plan para apoyar esto?

¿Esto todavía no está arreglado?

Todavía está abierto. Se aceptan solicitudes de extracción.

+1

Aunque hay una solución usando:
/* embellecer preservar: iniciar _/
/_ embellecer preservar:fin */

Esto no es muy agradable de ver.

+1

+1

+1

Para cualquier persona interesada, el problema restante es con import {x, y} from './other' . Este parece ser un subcaso de objetos desestructurados. Ver #511.

Todavía obtengo el comportamiento de las importaciones, pero todos los tickets están cerrados. ¿Cómo puedo conservar una sola línea en las importaciones después del embellecimiento en Atom? ¡Gracias!

Lo tengo, todo lo que se necesitaba era agregar la siguiente configuración en .jsbeautifyrc

{
  "preserve_newlines": true,
  "max_preserve_newlines": 2
}

Todavía estoy experimentando este problema con import . estoy usando 1.6.3

import { mod1, mod2 } from 'filePath';

se convierte

import { 
  mod1, 
  mod2 
} from 'filePath';

para aquellos de ustedes que funcionan correctamente, ¿pueden publicar su archivo .rc json con las propiedades correctas señaladas? No tengo idea de por qué no funciona en absoluto.

{
  "preserve_newlines": true,
  "max_preserve_newlines": 2
}

eso no lo solucionó (como se publicó anteriormente)

@the-simian La opción correcta es "brace_style": "collapse-preserve-inline" , en la sección "Estilo de abrazadera" si pasa por las preferencias de Atom. La opción "preserve_newlines" es para conservar las nuevas líneas en todo el archivo. Sin embargo, definitivamente quieres que eso sea cierto. :)

@eloquence gracias por la actualización, lo intentaré tan pronto como pueda
Editar: _Eso fue todo_

Aquí está el json de trabajo completo de contexto en el archivo .jsbeautifyrc:

{
    "brace_style": "collapse-preserve-inline", //<----that
    "break_chained_methods": false,
    "end_with_newline": false,
    "eol": "\n",
    "eval_code": false,
    "indent_char": "  ",
    "indent_level": 0,
    "indent_size": 1,
    "indent_with_tabs": true,
    "jslint_happy": false,
    "keep_array_indentation": false,
    "keep_function_indentation": false,
    "max_preserve_newlines": 4, //<---this
    "preserve_newlines": true, // <---this too
    "space_after_anon_function": false,
    "space_before_conditional": true,
    "unescape_strings": false,
    "wrap_attributes": "auto",
    "wrap_attributes_indent_size": 2,
    "wrap_line_length": 0
}

@loopmode Tengo un problema similar con collapse-preserve-inline

"brace_style": "collapse-preserve-inline",

Aporte:

const _state = { ...state }

Producción:

const _state = {...state }

Si bien collapse-preserve-inline funciona, no hay forma de obtener el mismo comportamiento con end-expand o expand . ¿Hay alguna manera de que podamos obtener end-expand-preserve-inline y similares para otras opciones o tal vez incluso una opción preserve-inline-braces con verdadero o falso?

@ Coburn37 : presente un problema nuevo y/o vea el n.° 1052 para ver si eso describe lo que desea.

+1. No soy fanático del colapso, preservación en línea. Me gustaría agregar una regla específicamente para las importaciones...

¿Fue útil esta página
0 / 5 - 0 calificaciones