Saltar al contenido principal

Prettier 1.14: Soporte para YAML

· 18 min de lectura
Traducción Beta No Oficial

Esta página fue traducida por PageTurner AI (beta). No está respaldada oficialmente por el proyecto. ¿Encontraste un error? Reportar problema →

Esta versión añade soporte para YAML, pragma (ej. /** @prettier */) en todos los lenguajes, y mejora el rendimiento en archivos grandes. También añade soporte para varias características de sintaxis nuevas, e incluye ajustes de formato para que tu código luzca aún mejor. ✨

Destacados

YAML

Soporte para YAML (#4563, #4742, #4773, #4854 por @ikatyang)

¡Prettier ahora puede formatear archivos YAML! 🎉

La implementación cumple estrictamente con la especificación YAML y utiliza el excelente paquete yaml gracias a @eemeli. Algunos aspectos destacados:

Ajuste de línea

Al igual que en Markdown, ajustaremos el texto en 80 caracteres cuando esto no afecte el significado del archivo.

Entrada:

>
Voilà! In view, a humble vaudevillian veteran cast vicariously as both victim and villain by the vicissitudes of Fate. This visage, no mere veneer of vanity, is a vestige of the vox populi, now vacant, vanished. However, this valourous visitation of a bygone vexation stands vivified and has vowed to vanquish these venal and virulent vermin vanguarding vice and vouchsafing the violently vicious and voracious violation of volition! The only verdict is vengeance; a vendetta held as a votive, not in vain, for the value and veracity of such shall one day vindicate the vigilant and the virtuous. Verily, this vichyssoise of verbiage veers most verbose, so let me simply add that it’s my very good honour to meet you and you may call me V.

Salida: (--prose-wrap always)

>
Voilà! In view, a humble vaudevillian veteran cast vicariously as both victim
and villain by the vicissitudes of Fate. This visage, no mere veneer of
vanity, is a vestige of the vox populi, now vacant, vanished. However, this
valourous visitation of a bygone vexation stands vivified and has vowed to
vanquish these venal and virulent vermin vanguarding vice and vouchsafing the
violently vicious and voracious violation of volition! The only verdict is
vengeance; a vendetta held as a votive, not in vain, for the value and
veracity of such shall one day vindicate the vigilant and the virtuous.
Verily, this vichyssoise of verbiage veers most verbose, so let me simply add
that it’s my very good honour to meet you and you may call me V.

Nota: La opción proseWrap está configurada como preserve por defecto, por lo que deberás especificar always o never para activar esta función.

Ignorar una sección del archivo

Si por algún motivo no deseas formatear parte del archivo YAML, siempre puedes agregar un comentario de ignorar antes:

# prettier-ignore
key : value
hello: world

Front Matter

Formateo de front matter YAML (#4773 por @ikatyang)

Prettier ahora puede formatear front matter YAML delimitado por --- en archivos CSS y Markdown:

Entrada y Salida (Prettier 1.13):

---
key : value
---

# heading

content

Salida (Prettier 1.14):

---
key: value
---

# heading

content

Pragma

Soporte para requirePragma/insertPragma en todos los lenguajes (#4688, #4699, #4713 por @ikatyang)

Prettier 1.7.0 y 1.8.0 introdujeron dos nuevas opciones: --require-pragma y --insert-pragma. Sin embargo, estas opciones solo estaban disponibles en algunos lenguajes. ¡Ahora están disponibles en todos los lenguajes, incluyendo YAML!

  • YAML

    # @prettier

    key: value
  • CSS/Less/SCSS

    /** @prettier */

    .class {
    display: none;
    }
  • GraphQL

    # @prettier

    query Browse($offset: Int) {
    browse(offset: $offset)
    }
  • Vue

    <!-- @prettier -->

    <template>
    <div>Template</div>
    </template>

JavaScript

No inyectar decoradores a menos que sean decoradores de parámetros únicos (#4830 por @suchipi)

Anteriormente, los decoradores siempre se inyectaban ya que MobX lo hacía por convención, pero reportes de la comunidad nos hicieron descubrir que MobX es la única librería importante que sigue esta convención. Prettier ahora coloca los decoradores en sus propias líneas a menos que sean decoradores de parámetros.

// Input
@observer
class OrderLine {
@observable
price: number = 0;
@observable amount: number = 1;

foo(@required name) {
console.log(name);
}
}

// Output (Prettier 1.13)
@observer
class OrderLine {
@observable price: number = 0;
@observable amount: number = 1;

foo(@required name) {
console.log(name);
}
}

// Output (Prettier 1.14)
@observer
class OrderLine {
@observable
price: number = 0;
@observable
amount: number = 1;

foo(@required name) {
console.log(name);
}
}

Manejar espacios en JSX separadamente de espacios en fbt (#4717 por @karl)

Anteriormente, el espacio en blanco en JSX siempre se preservaba debido a que Facebook tiene una canalización de traducción personalizada (fbt) que usa sintaxis JSX pero trata los espacios de forma diferente al JSX estándar, lo que impedía modificar el manejo de espacios en JSX sin afectar su base de código. En Prettier 1.14, ahora detectamos las etiquetas fbt de Facebook y manejamos sus espacios de forma separada a otras etiquetas JSX, mejorando la coherencia entre diferentes entradas equivalentes.

// Input and Output from Prettier 1.13
first = (
<div>
Text<br />
More text<br />
And more<br />
</div>
);

second = (
<div>
Text<br />More text<br />And more<br />
</div>
);

third = (
<div>
Text
<br />
More text
<br />
And more
<br />
</div>
);

// Output from Prettier 1.14
first = (
<div>
Text
<br />
More text
<br />
And more
<br />
</div>
);

second = (
<div>
Text
<br />
More text
<br />
And more
<br />
</div>
);

third = (
<div>
Text
<br />
More text
<br />
And more
<br />
</div>
);

Cuando el texto que separa etiquetas o expresiones es un solo carácter, imprimimos todo el grupo en una sola línea cuando es posible.

// Input and Output from Prettier 1.13
x = (
<div>
{hour}:{minute}:{second}
</div>
);

x = (
<div>
{hour}
:
{minute}
:
{second}
</div>
);

x = (
<div>
{hour}:
{minute}:
{second}
</div>
);

// Output from Prettier 1.14
x = (
<div>
{hour}:{minute}:{second}
</div>
);

x = (
<div>
{hour}:{minute}:{second}
</div>
);

x = (
<div>
{hour}:{minute}:{second}
</div>
);

También mejora el resultado en casos extremos como este:

// Input
this_really_should_split_across_lines =
<div>
before{stuff}after{stuff}after{stuff}after{stuff}after{stuff}after{stuff}after{stuff}after
</div>

// Output (Prettier 1.13)
this_really_should_split_across_lines = (
<div>
before{stuff}after{stuff}after{stuff}after{stuff}after{stuff}after{stuff}after{
stuff
}after
</div>
);


// Output (Prettier 1.14)
this_really_should_split_across_lines = (
<div>
before
{stuff}
after
{stuff}
after
{stuff}
after
{stuff}
after
{stuff}
after
{stuff}
after
{stuff}
after
</div>
);

Romper JSX en funciones flecha dentro de expresiones JSX (#4601 por @duailibe)

En versiones anteriores, el JSX dentro de funciones flecha en expresiones JSX seguía la regla general de ajuste o ruptura, pero resultaba menos legible al iterar sobre arreglos. Prettier 1.14 fuerza la ruptura en estas funciones flecha, mejorando la legibilidad.

// Input
const UsersList = ({ users }) => (
<section>
<h2>Users list</h2>
<ul>
{users.map(user => (
<li key={user.id}>{user.name}</li>
))}
</ul>
</section>
)

// Output (Prettier 1.13)
const UsersList = ({ users }) => (
<section>
<h2>Users list</h2>
<ul>{users.map(user => <li key={user.id}>{user.name}</li>)}</ul>
</section>
);

// Output (Prettier 1.14)
const UsersList = ({ users }) => (
<section>
<h2>Users list</h2>
<ul>
{users.map(user => (
<li key={user.id}>{user.name}</li>
))}
</ul>
</section>
);

TypeScript

Soporte para TypeScript 3.0 (#4625, #4757 por @ikatyang)

Varias características nuevas con sintaxis actualizada llegarán en TypeScript 3.0: el tipo unknown y tuplas en parámetros rest y expresiones de propagación. Prettier 1.14 añade soporte para formatearlas cuando se lance TypeScript 3.0.

// UnknownType
const json: unknown = JSON.parse(jsonText);

// RestType
type Foo = [string, number];
type Bar = [boolean, ...Foo];

// OptionalType
type Baz = [string, number?];

JSON

No colocar valores en línea separada de la clave (#4852 por @ikatyang)

Colocar valores largos en nuevas líneas es una función central de Prettier, pero descubrimos que no mejora la legibilidad en objetos con valores de cadena largos dentro de archivos JSON. Prettier 1.14 no moverá valores de cadena a nuevas líneas, independientemente de si caben en el ancho de impresión.

// Input
{
"description": "a long long long long long long long long long long long long long long long long long paragraph"
}

// Output (Prettier 1.13)
{
"description":
"a long long long long long long long long long long long long long long long long long paragraph"
}

// Output (Prettier 1.14)
{
"description": "a long long long long long long long long long long long long long long long long long paragraph"
}

Markdown

Alinear listas solo si ya están alineadas (#4893 por @ikatyang)

Anteriormente siempre alineábamos listas para mejorar la experiencia de sangría y como solución al análisis incorrecto de bloques de código, pero esto introdujo dobles espacios ante listas numeradas, algo poco común en markdown. En Prettier 1.14, solo alineamos listas en estos casos:

  • Ya están alineadas.

  • Hay al menos dos espacios antes del primer elemento.

  • Existe un bloque de código sangrado dentro.

Entrada:

1.  123
1. 123

---

1. 123
1. 123

---

11. 123
1. 123

---

11. 123
1. 123

---

1. 123
1. 123

Salida: (Prettier 1.13)

1.  123
1. 123

---

1. 123
1. 123

---

11. 123
1. 123

---

11. 123
1. 123

---

1. 123
1. 123

Salida: (Prettier 1.14)

1.  123
1. 123

---

1. 123
1. 123

---

11. 123
1. 123

---

11. 123
1. 123

---

1. 123
1. 123

Rendimiento

Mejoras de rendimiento en archivos grandes (#4790, #4848 por @sompylasar)

La función central de Prettier es ajustar líneas que exceden el ancho de impresión, requiriendo calcular el ancho visual de cada carácter. El método más simple es usar String#length de JavaScript, pero caracteres no-ASCII como CJK tienen mayor ancho que caracteres latinos. Como solución, reemplazábamos caracteres de 2-ancho con 2 espacios antes del cálculo. Esto funcionaba pero ralentizaba Prettier al aplicar el reemplazo en cada token. En Prettier 1.14, verificamos si la cadena contiene solo caracteres ASCII para evitar reemplazos innecesarios. Esto produce una aceleración del 20% en archivos grandes.

Otros cambios

API/CLI

Soporte para rutas relativas en plugins y pluginSearchDirs en archivos de configuración (#4667 by @ikatyang)

En Prettier 1.13, introdujimos la nueva opción pluginSearchDirs que cambia dónde Prettier busca plugins. Funcionaba bien cuando se especificaba en la CLI ya que siempre era relativa al directorio actual, pero las rutas relativas no funcionaban en archivos de configuración. En Prettier 1.14, ahora se admiten rutas relativas para pluginSearchDirs y plugins en archivos de configuración.

No lanzar error si prettier está instalado en un directorio sin nombre prettier (#4706 by @asottile)

Añadimos soporte para plugins instalados globalmente en Prettier 1.13 buscando hacia arriba en el árbol de directorios para encontrar el node_modules más cercano desde prettier. Asumíamos que siempre existiría un directorio prettier, lo que causaba que Prettier fallara si estaba en un directorio con nombre diferente. Cambiamos nuestra lógica de búsqueda en Prettier 1.14 para que ahora puedas renombrar el directorio prettier si es necesario (por ejemplo al publicar un fork en npm).

Soporte para filepath en navegador (#4721 by @ikatyang)

En Prettier 1.13, añadimos soporte nativo para ejecutar Prettier en navegadores, pero la única forma de elegir qué parser usar era mediante la opción parser. Prettier 1.14 añade soporte para la opción filepath en la API de navegador, lo que permitirá a Prettier inferir qué parser usar, igual que hace con la API de Node.js. Esto debería ser especialmente útil para aplicaciones web de editores.

Exponer isPreviousLineEmpty a plugins (#4748 by @warrenseine)

Anteriormente, exponíamos isNextLineEmpty a plugins pero no isPreviousLineEmpty. Prettier 1.14 lo expone, ya que puede ser útil para escenarios como directivas en C#.

JavaScript

Soporte para literales BigInt (#4697 by @ikatyang)

Ahora se admiten literales BigInt en el parser predeterminado babylon.

const bigInt = 1n;

Soporte para expresiones throw (#4695 by @VojtechStep)

Ahora se admiten expresiones throw en el parser predeterminado babylon.

const assert = x => x || throw new Error('...');

Expandir siempre el primer argumento si el segundo también es una expresión de llamada (#4657 by @duailibe)

Anteriormente, teníamos un caso especial para no romper llamadas a funciones si solo se pasaban 2 parámetros y el primer parámetro era una función. Esto funcionaba bien, pero si el segundo parámetro también era una función, no se veía muy bien.

// Input
somePromise.then((args) => {
this.props.receiveFavoritesActions(id, [].concat(...args));
}, ({ isCanceled }) => !isCanceled && logger.warn(`Error getting actions for the product: ${id}`));

// Output (Prettier 1.13)
somePromise.then(args => {
this.props.receiveFavoritesActions(id, [].concat(...args));
}, ({ isCanceled }) => !isCanceled && logger.warn(`Error getting actions for the product: ${id}`));

// Output (Prettier 1.14)
somePromise.then(
args => {
this.props.receiveFavoritesActions(id, [].concat(...args));
},
({ isCanceled }) =>
!isCanceled && logger.warn(`Error getting actions for the product: ${id}`)
);

Añadir paréntesis para await en bind (#4778 by @ikatyang)

Anteriormente, Prettier eliminaba incorrectamente los paréntesis necesarios para await en la sintaxis experimental de bind, alterando su significado. Prettier 1.14 ahora conserva correctamente los paréntesis.

// Input
const doBothThings = async () => {
const request = doAsyncThing();
return (await request)::doSyncThing();
};

// Output (Prettier 1.13)
const doBothThings = async () => {
const request = doAsyncThing();
return await request::doSyncThing(); // means `await (request::doSyncThing)`
};

// Output (Prettier 1.14)
const doBothThings = async () => {
const request = doAsyncThing();
return (await request)::doSyncThing();
};

Permitir super y await de nivel superior (#4823 by @ikatyang)

super y await no pueden estar en lugares que no sean clases y funciones asíncronas, respectivamente, pero nuestra opción de formateo por rango no funcionaba correctamente al seleccionar contenidos de funciones. Prettier 1.14 permite que estén en cualquier lugar.

super();

await doSomething();

Excluir this y super de las heurísticas de composición funcional (#4836 by @princed)

En Prettier 1.13, mejoramos el formato para funciones de composición funcional (ej. pipe, compose, etc.) colocando sus parámetros en líneas separadas, pero esto generó falsos positivos para funciones con el mismo nombre en clases. Prettier 1.14 excluye this y super en sus heurísticas de composición funcional.

// Input
class X {
x() {
this.compose(a(), b);
super.compose(a(), b);
}
}

// Output (Prettier 1.13)
class X {
x() {
this.compose(
a(),
b
);
super.compose(
a(),
b
);
}
}

// Output (Prettier 1.14)
class X {
x() {
this.compose(a(), b);
super.compose(a(), b);
}
}

TypeScript

Soporte para import.meta (#4762 por @ikatyang)

En Prettier 1.13, la versión del parser de TypeScript que usábamos no soportaba la sintaxis import.meta. Actualizamos nuestro parser de TypeScript en Prettier 1.14 para que ahora se analicen y formateen correctamente.

console.log(import.meta.url);

Propiedad opcional con clave StringLiteral en clases (#4762 por @ikatyang)

En versiones anteriores, el ? en propiedades opcionales con literales de cadena como clave se eliminaba incorrectamente. Corregimos este error en Prettier 1.14 para que no se elimine.

// Input
export class ClassExample {
"a-prop"?: boolean;
}

// Output (Prettier 1.13)
export class ClassExample {
"a-prop": boolean;
}

// Output (Prettier 1.14)
export class ClassExample {
"a-prop"?: boolean;
}

Generar error en múltiples superclases en clases (#4762 por @ikatyang)

Las clases solo pueden tener una clase padre, pero el AST de TypeScript permite múltiples porque la cláusula extends tiene internamente la misma estructura que implements. Anteriormente, las superclases adicionales se descartaban silenciosamente al imprimir, lo que podía causar confusión después del formateo. En Prettier 1.14, ahora se marcan como errores de sintaxis.

// Input
class Foo extends BarComponent, BazService, QuuxProvider {}

// Output (Prettier 1.13)
class Foo extends BarComponent {}

// Output (Prettier 1.14)
/*
SyntaxError: Classes can only extend a single class.
*/

Soporte para spread child en JSX (#4885 por @ikatyang)

Anteriormente, los ... en spreads de hijos dentro de expresiones JSX se eliminaban incorrectamente. Corregimos este problema en Prettier 1.14.

// Input
const x = <div>{...[0]}</div>

// Output (Prettier 1.13)
const x = <div>{[0]}</div>;

// Output (Prettier 1.14)
const x = <div>{...[0]}</div>;

Flow

Soporte para extensión .js.flow (#4777 por @ikatyang)

.js.flow es la extensión para archivos de declaración de Flow, pero antes no la reconocíamos. En Prettier 1.14, se detectarán automáticamente, así que no necesitarás agregar configuraciones adicionales para ellos.

CSS/Less/SCSS

Manejo correcto de saltos de línea entre front-matter y comentarios (#4701 por @evilebottnawi)

Los saltos de línea múltiples entre front matter y comentarios CSS se reemplazaban con espacios en Prettier 1.13. En Prettier 1.14, imprimimos un salto de línea entre ellos.

/* Input */
---
key: value
---

/* comment */
.class {
display: none;
}

/* Output (Prettier 1.13) */
---
key: value
---
/* comment */
.class {
display: none;
}

/* Output (Prettier 1.14) */
---
key: value
---

/* comment */
.class {
display: none;
}

Soporte para at-rules que terminan con llave derecha (#4733 por @davidgomes)

En versiones anteriores, las at-rules que terminaban con } no se analizaban correctamente. Prettier 1.14 ahora las reconoce y formatea adecuadamente.

/* Input */
@mixin placeholder {
&::placeholder {@content}
}

/* Output (Prettier 1.13) */
/*
SyntaxError: CssSyntaxError Unclosed block
*/

/* Output (Prettier 1.14) */
@mixin placeholder {
&::placeholder {
@content;
}
}

Markdown

Los autolinks se formateaban como su URL en versiones anteriores, lo cual es correcto. Pero existe un caso especial para enlaces de email que se resuelven como enlaces mailto:. En Prettier 1.14, los autolinks de email se preservan.

<!-- Input -->
<hello@example.com>

<!-- Output (Prettier 1.13) -->
<mailto:hello@example.com>

<!-- Output (Prettier 1.14) -->
<hello@example.com>

No requerir espacio después del nombre del lenguaje en bloques markdown (#4783 por @kachkaev)

En Prettier 1.12, añadimos soporte para bloques de código con lenguaje seguido de atributos, lo que requería separarlos con espacios. Pero esto creó inconsistencia para el resaltado en Atom donde los bloques se resaltaban pero no los formateábamos. Actualizamos nuestra lógica de detección en Prettier 1.14 para que ahora se comporten igual.

<!-- Input -->
```js{something=something}
const x = 1;
```

<!-- Output (Prettier 1.13) -->
```js{something=something}
const x = 1;
```

<!-- Output (Prettier 1.14) -->
```js{something=something}
const x = 1;
```

Usar alias de lenguajes para encontrar parser en bloques de código markdown (#4734 por @ikatyang)

Anteriormente usábamos el name y extensions del lenguaje para determinar qué analizador usar en el formateo de bloques de código, pero descubrimos que es imposible formatear bloques JSON with Comments manteniendo funcional el resaltado de sintaxis, ya que comparten la misma extensión .json que JSON, y el resaltado de comentarios solo está disponible en JSON5. En Prettier 1.14 añadimos soporte para usar los aliases del lenguaje al buscar el analizador, por lo que ahora puedes usar jsonc para formatear y activar el resaltado de sintaxis en bloques JSON with Comments.

<!-- Input -->
```jsonc
// comment
{"a":1}
```

<!-- Output (Prettier 1.13) -->
```jsonc
// comment
{"a":1}
```

<!-- Output (Prettier 1.14) -->
```jsonc
// comment
{ "a": 1 }
```

Preservar entidades para caracteres codificados con punto de código superior a U+FFFF (#4832 por @ikatyang)

El analizador de Markdown que usamos (remark) convierte cada carácter codificado en un único nodo AST, lo que nos permite restaurar el carácter codificado detectando si el valor en el nodo AST tiene longitud 1. Pero existe una excepción: un carácter único puede tener longitud 2 si su punto de código es mayor que 0xFFFF, ya que JavaScript usa UTF-16 (2 bytes) para codificar cadenas. Prettier 1.14 reconoce correctamente estos caracteres, evitando que se transformen en el carácter literal.

<!-- Input -->
&#x1F609;

<!-- Output (Prettier 1.13) -->
😉

<!-- Output (Prettier 1.14) -->
&#x1F609;

Vue

Soporte para formateo por rangos en archivos Vue (#4868 por @ikatyang)

Anteriormente, el formateo por rangos no estaba disponible en Vue, pero Prettier 1.14 añade soporte para esta funcionalidad.

GraphQL

Preservar saltos de línea en stringValue no bloqueados (#4808 por @ikatyang)

Los valores de cadena no bloqueados solo pueden ocupar una línea, pero Prettier 1.13 convertía incorrectamente el escape \n en un salto de línea real. Prettier 1.14 ahora imprime correctamente \n.

# Input
{
foo(input: {multiline: "ab\ncd"}) { id }
}

# Output (Prettier 1.13)
{
foo(input: { multiline: "ab
cd" }) {
id
}
}

# Output (Prettier 1.14)
{
foo(input: { multiline: "ab\ncd" }) {
id
}
}