Saltar al contenido principal

¡Prettier 2.6: nueva opción singleAttributePerLine y nuevas características de JavaScript!

· 15 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 incluye una nueva opción singleAttributePerLine. Permite imprimir solo un atributo por línea en plantillas Vue SFC, HTML y JSX. Según nuestra Filosofía de opciones, preferiríamos no añadir esta opción. Sin embargo, muchos usuarios la solicitan, y guías de estilo importantes como la Guía de estilo de JavaScript de Airbnb y la guía de estilo de Vue recomiendan el estilo de un atributo por línea. Un PR para implementar esta funcionalidad se abrió en octubre de 2019, y tanto él como el issue correspondiente recibieron un apoyo significativo de los usuarios. Fue una decisión difícil añadir esta opción. Esperamos que beneficie a muchos usuarios sin comprometer sustancialmente nuestros principios.

También añadimos soporte para formatear nuevas propuestas de sintaxis de JavaScript mediante Babel.

¡Gracias a nuestros patrocinadores!

Como se mencionó en una publicación de blog anterior, comenzamos a remunerar a nuestros mantenedores con fondos de patrocinadores. ¡Agradecemos profundamente a todos los patrocinadores que hicieron esto posible! Destacamos especialmente a estas empresas e individuos que donaron más de $1,000:

Si disfrutas usando Prettier y quieres apoyar nuestro trabajo, considera patrocinarnos directamente a través de nuestro OpenCollective o patrocinando los proyectos de los que dependemos, incluyendo typescript-eslint, remark y Babel.

Destacados

TypeScript

Soporte para TypeScript 4.6 (#12400 por @dependabot)

Actualizamos la versión de TypeScript que usamos para analizar código TS a TypeScript 4.6. Sin embargo, esta versión no incluye nueva sintaxis, por lo que no realizamos otros cambios.

HTML

Forzar un Atributo por Línea (#6644 por @kankje)

Se agregó la opción singleAttributePerLine para especificar si Prettier debe forzar un atributo por línea en HTML, Vue y JSX.

<!-- Input -->
<div data-a="1">
Lorem ipsum dolor sit amet, consectetur adipiscing elit.
</div>
<div data-a="1" data-b="2" data-c="3">
Lorem ipsum dolor sit amet, consectetur adipiscing elit.
</div>

<!-- Prettier 2.5 -->
<div data-a="1">
Lorem ipsum dolor sit amet, consectetur adipiscing elit.
</div>
<div data-a="1" data-b="2" data-c="3">
Lorem ipsum dolor sit amet, consectetur adipiscing elit.
</div>

<!-- Prettier 2.6, with `{"singleAttributePerLine": false}` -->
<div data-a="1">
Lorem ipsum dolor sit amet, consectetur adipiscing elit.
</div>
<div data-a="1" data-b="2" data-c="3">
Lorem ipsum dolor sit amet, consectetur adipiscing elit.
</div>

<!-- Prettier 2.6, with `{"singleAttributePerLine": true}` -->
<div data-a="1">
Lorem ipsum dolor sit amet, consectetur adipiscing elit.
</div>
<div
data-a="1"
data-b="2"
data-c="3"
>
Lorem ipsum dolor sit amet, consectetur adipiscing elit.
</div>

Otros cambios

JavaScript

Reconocer waitForAsync como declaración de prueba en Angular (#11992 por @HendrikN)

// Input
test("foo bar", waitForAsync(() => {
const foo = "bar";
expect(foo).toEqual("bar")
}));

// Prettier 2.5
test(
"foo bar",
waitForAsync(() => {
const foo = "bar";
expect(foo).toEqual("bar");
})
);

// Prettier 2.6
test("foo bar", waitForAsync(() => {
const foo = "bar";
expect(foo).toEqual("bar");
}));

Conservar comentarios al final de línea después de declaraciones if sin bloques (#12017 por @sosukesuzuki)

// Input
if (condition1) expression1; // comment A
else if (condition2) expression2; // comment B
else expression3; // comment C

// Prettier 2.5
if (condition1) expression1;
// comment A
else if (condition2) expression2;
// comment B
else expression3; // comment C

// Prettier 2.6
if (condition1) expression1; // comment A
else if (condition2) expression2; // comment B
else expression3; // comment C

Imprimir comentarios para tipos de palabras clave TS entre paréntesis con el parser babel-ts (#12070 por @sosukesuzuki)

// Input
let foo: (
// comment
never
);

// Prettier 2.5
Error: Comment "comment" was not printed. Please report this error!

// Prettier 2.6
let foo: // comment
never;

Imprimir comentarios al final de línea para declaraciones continue/break (#12075 por @sosukesuzuki)

// Input
for (;;) continue // comment
;

// Prettier 2.5
Error: Comment "comment" was not printed. Please report this error!

// Prettier 2.6
for (;;)
continue; // comment

Inlinear expresiones await en JSX (#12088 y #12109 por @j-f1)

Las expresiones await en JSX ahora se inlínearán si su argumento sería inlined.

// Input
{await Promise.all(
someVeryLongExpression
)}

{await (
<div>Lorem ipsum ...</div>
)}


// Prettier 2.5
{
await Promise.all(
someVeryLongExpression
)
}

{
await (
<div>Lorem ipsum ...</div>
)
}


// Prettier 2.6
{await Promise.all(
someVeryLongExpression
)}

{await (
<div>Lorem ipsum ...</div>
)}

Agregar parser acorn (#12172 por @fisker)

Se agregó un nuevo valor para la opción parser: acorn - Un pequeño y rápido parser de JavaScript basado en JavaScript.

Conservar comentarios después de casos default en la misma línea (#12177 por @duailibe)

Conservar comentarios justo después de casos default (en declaraciones switch) en la misma línea, cuando sea posible.

// Input
function read_statement() {
switch (peek_keyword()) {
case Keyword.impl: // impl<T> Growling<T> for Wolf {}
return ImplDeclaration.read();

default: // expression;
return ExpressionStatement.read();
}
}

// Prettier 2.5
function read_statement() {
switch (peek_keyword()) {
case Keyword.impl: // impl<T> Growling<T> for Wolf {}
return ImplDeclaration.read();

default:
// expression;
return ExpressionStatement.read();
}
}

// Prettier 2.6
function read_statement() {
switch (peek_keyword()) {
case Keyword.impl: // impl<T> Growling<T> for Wolf {}
return ImplDeclaration.read();

default: // expression;
return ExpressionStatement.read();
}
}

Corregir comentarios de argumentos mal ubicados en métodos abstractos (#12185 por @duailibe)

// Input
abstract class Foo {
abstract bar(
/** comment explaining userId param */
userId
)
}

// Prettier 2.5
abstract class Foo {
abstract bar(userId);
/** comment explaining userId param */
}

// Prettier 2.6
abstract class Foo {
abstract bar(
/** comment explaining userId param */
userId
);
}

Corregir typecast de superclase en declaraciones de clase (#12222 y #12226 por @duailibe)

Esto combinaba dos errores separados: mover los comentarios antes de la superclase y agregar múltiples paréntesis alrededor de la superclase.

// Input
class Foo extends /** @type {Type} */ (Bar) {}

// Prettier 2.5
class Foo /** @type {Type} */ extends ((Bar)) {}

// Prettier 2.6
class Foo extends /** @type {Type} */ (Bar) {}

Agregar soporte para Notación de Conjunto Unicode en expresiones regulares (#12241 por @fisker)

La propuesta en Etapa 3 para Notación de Conjunto Unicode en expresiones regulares ahora es compatible mediante Babel 7.17.0.

Consulta la publicación del blog de Babel v7.17.0 y el README de esta propuesta para más detalles. Ten en cuenta también nuestra política sobre sintaxis no estandarizada antes de usar esta característica de sintaxis propuesta con Prettier.

// Examples

/[\p{Decimal_Number}--[0-9]]/v; // Non-ASCII decimal digits

"Did you see the 👩🏿‍❤️‍💋‍👩🏾 emoji?".match(/\p{RGI_Emoji}/v). // ["👩🏿‍❤️‍💋‍👩🏾"]

/[\r\n\q{\r\n|NEWLINE}]/v; // Matches \r, \n, \r\n or NEWLINE

Agregar paréntesis a ClassExpression con decoradores (#12260 por @fisker)

// Input
(@f() class {});

// Prettier 2.5
@f()
class {};

// Prettier 2.5 (Second format)
SyntaxError: A class name is required. (2:7)
1 | @f()
> 2 | class {};
| ^
3 |

// Prettier 2.6
(
@f()
class {}
);

Mejorar la impresión de comentarios en alias de tipos en Flow y TS (#12268 por @duailibe)

Para Flow, los comentarios ahora estarán más alineados con cómo imprimimos comentarios en asignaciones donde el lado derecho es una expresión de objeto:

// Input
type Props = // comment explaining the props
{
isPlaying: boolean
};

// Prettier 2.5
// comment explaining the props
type Props = {
isPlaying: boolean,
};

// Prettier 2.6
type Props =
// comment explaining the props
{
isPlaying: boolean,
};

Este cambio también corrige un problema donde un comentario ubicado de manera similar en TypeScript se volvería a mover después de una segunda operación de formateo:

// Input
type Props = // comment explaining the props
{
isPlaying: boolean
};

// Prettier 2.5
type Props = { // comment explaining the props
isPlaying: boolean;
};

// Prettier 2.5 (2nd format)
type Props = {
// comment explaining the props
isPlaying: boolean;
};

// Prettier 2.6
type Props =
// comment explaining the props
{
isPlaying: boolean,
};

Agregar soporte para desestructuración de campos privados (#12276 por @sosukesuzuki)

La propuesta Stage 2 de TC39 para desestructuración de campos privados ahora es compatible a través de Babel 7.17. Por favor lee nuestra política sobre sintaxis no estandarizada antes de decidir usar esta característica de sintaxis propuesta con Prettier.

// Example
class Foo {
constructor() {
console.log(this.#x); // => 1
const { #x: x } = this;
console.log(x); // => 1
}
}

Soporte para sintaxis de autoaccesores con decoradores (#12299 por @sosukesuzuki)

Soporte para la sintaxis de autoaccesores introducida en la nueva propuesta de decoradores. Por favor lee nuestra política sobre sintaxis no estandarizada antes de decidir usar esta característica de sintaxis propuesta con Prettier.

// Example
@defineElement("my-class")
class C extends HTMLElement {
@reactive accessor clicked = false;
}

Corregir problemas de idempotencia causados por comentarios de línea después de = en asignaciones (#12349 por @thorn0)

// Input
const kochabCooieGameOnOboleUnweave = // !!!
rhubarbRhubarb(annularCooeedSplicesWalksWayWay);

// Prettier 2.5, first format
const kochabCooieGameOnOboleUnweave = rhubarbRhubarb( // !!!
annularCooeedSplicesWalksWayWay
);

// Prettier 2.5, second format
const kochabCooieGameOnOboleUnweave = rhubarbRhubarb(
// !!!
annularCooeedSplicesWalksWayWay
);

// Prettier 2.6
const kochabCooieGameOnOboleUnweave = // !!!
rhubarbRhubarb(annularCooeedSplicesWalksWayWay);

TypeScript

Refactorizar la impresión de aserciones de asignación definida (#12351 por @thorn0)

Las aserciones de asignación definida ahora se imprimen incluso cuando no van seguidas de anotaciones de tipo. Esto es un error en TypeScript, pero TS aún puede analizar el archivo.

// Input
let a!;

// Prettier 2.5
let a;

// Prettier 2.6
let a!;

Imprimir coma final para elementos rest en tipos de tupla (#12390 por @sosukesuzuki)

TypeScript ha permitido que los elementos rest en tipos de tupla (...T) tengan elementos normales después de ellos desde TypeScript 4.2. Prettier ahora imprime una coma final para el elemento rest final (cuando las comas finales están habilitadas) para mantener la consistencia y reducir los diffs si decides agregar más elementos después del elemento final en el futuro.

// { trailingCommma: "all" }

// Input
type Foo = [
Element,
Element,
Element,
Element,
Element,
Element,
...RestElement,
];


// Prettier 2.5
type Foo = [
Element,
Element,
Element,
Element,
Element,
Element,
...RestElement
];


// Prettier 2.6
type Foo = [
Element,
Element,
Element,
Element,
Element,
Element,
...RestElement,
];

Flow

Corrección del formato del indexador static en declaraciones de clase de Flow (#12009 por @gkz)

// Input
declare class A {
static [string]: boolean;
}

// Prettier 2.5
declare class A {
[string]: boolean;
}

// Prettier 2.6
declare class A {
static [string]: boolean;
}

CSS

Conservar líneas en blanco en mapas de SCSS (#12210 por @duailibe)

Este cambio también se aplica a algunas características de PostCSS con sintaxis similar.

/* Input */
$colours: (
"text": $light-100,

"background-primary": $dark-300,
"background-secondary": $dark-200,
"background-tertiary": $dark-100
);

/* Prettier 2.5 */
$colours: (
"text": $light-100,
"background-primary": $dark-300,
"background-secondary": $dark-200,
"background-tertiary": $dark-100
);

/* Prettier 2.6 */
$colours: (
"text": $light-100,

"background-primary": $dark-300,
"background-secondary": $dark-200,
"background-tertiary": $dark-100
);

Corrección de conversión a minúsculas en valores de postcss (#12393 por @niklasvatn)

Los valores de PostCSS pueden comenzar con dígitos. Prettier interpreta esto como un número seguido de una unidad en el ejemplo siguiente.

// Input
@value 4XLarge 28/36px;

.test {
font: 4XLarge Helvetica;
}

// Prettier 2.5
@value 4XLarge 28/36px;

.test {
font: 4xlarge Helvetica;
}

// Prettier 2.6
@value 4XLarge 28/36px;

.test {
font: 4XLarge Helvetica;
}

SCSS

Corrección de comentarios dentro de mapas (#11920 por @fisker)

// Input
.ag-theme-balham {
@include ag-theme-balham(
(
foreground-color: $custom-foreground-color,
disabled-foreground-color: null, // TODO some comment
)
);
}

// Prettier 2.5
.ag-theme-balham {
@include ag-theme-balham(
(
foreground-color: $custom-foreground-color,
disabled-foreground-color: null,
r: null, // TODO som
)
);
}

// Prettier 2.6
.ag-theme-balham {
@include ag-theme-balham(
(
foreground-color: $custom-foreground-color,
disabled-foreground-color: null,
// TODO some comment
)
);
}

Corrección de impresión de parámetros en mixins llamados selector() (#12213 por @duailibe)

/* Input */
@mixin selector($param: 'value') {
}

/* Prettier 2.5 */
@mixin selector($param: 'value) {
}

/* Prettier 2.6 */
@mixin selector($param: 'value') {
}

Vue

Corrección de bloqueos en v-for inválido (#12113 por @fisker)

// Input
<template>
<div>
<div v-for=" a in ">aaaaa</div>
</div>
</template>

// Prettier 2.5
// Hangs

// Prettier 2.6
<template>
<div>
<div v-for=" a in ">aaaaa</div>
</div>
</template>;

Permitir atributo lang vacío en <template> (#12394 por @HallvardMM)

La etiqueta template debe permitir lang="" (cadena vacía) o lang no definido

<!-- Input -->
<template lang="">
<v-app-bar>
<v-menu offset-y>
<template></template>
</v-menu>
</v-app-bar>
</template>

<template lang>
<v-app-bar>
<v-menu offset-y>
<template></template>
</v-menu>
</v-app-bar>
</template>

<!-- Prettier 2.5 -->
SyntaxError: Unexpected closing tag "v-menu". It may happen when the tag has already been closed by another tag. For more info see https://www.w3.org/TR/html5/syntax.html#closing-elements-that-have-implied-end-tags (5:5)
[error] 3 | <v-menu offset-y>
[error] 4 | <template></template>
[error] > 5 | </v-menu>
[error] | ^^^^^^^^^
[error] 6 | </v-app-bar>
[error] 7 | </template>

<!-- Prettier 2.6 -->
<template lang="">
<v-app-bar>
<v-menu offset-y>
<template></template>
</v-menu>
</v-app-bar>
</template>

<template lang>
<v-app-bar>
<v-menu offset-y>
<template></template>
</v-menu>
</v-app-bar>
</template>

Ember / Handlebars

Identificación correcta de barras invertidas eliminadas por glimmer (#12302 por @MattTheNub)

Esto provocaba que Prettier añadiera barras invertidas innecesariamente cada vez que se formateaba un archivo.

{{! Input }}
<p>\</p>
<p>\\</p>
<p>\\\</p>

{{! Prettier 2.5 }}
<p>\\</p>
<p>\\\</p>
<p>\\\\</p>

{{! Prettier 2.6 }}
<p>\</p>
<p>\\</p>
<p>\\\</p>

GraphQL

Impresión de descripciones en nodos de definición de esquemas graphql (#11901 por @trevor-scheer)

# Input
"""SchemaDefinition description is lost"""
schema {
query: Query
}

# Prettier 2.5
schema {
query: Query
}

# Prettier 2.6
"""
SchemaDefinition description is lost
"""
schema {
query: Query
}

YAML

Corrección de eliminación inesperada de líneas de bloque literal que comienzan con U+3000 (#12305 por @Quramy)

# Input
block_with_ideographic_space: |
 line-content # This line starts with U+3000

# Prettier 2.5
block_with_ideographic_space: |

// Prettier 2.6
block_with_ideographic_space: |
 line-content # This line starts with U+3000

CLI

Añadir opción --no-plugin-search para desactivar carga automática de plugins (#10274 por @fisker)

Para desactivar la carga automática de plugins, use --no-plugin-search al usar la CLI de Prettier o añada { pluginSearchDirs: false } a las opciones en prettier.format() o en el archivo de configuración.

// Prettier 2.5
$ prettier . --plugin-search-dir=a-dir-without-plugins

// Prettier 2.6
$ prettier . --no-plugin-search

Inferir parser para .swcrc (#12320 por @sosukesuzuki)

Dar formato al archivo .swcrc como JSON.

Varios

Migración a esbuild (#12055 por @fisker)

Hemos cambiado nuestro proceso de construcción de Rollup a esbuild. esbuild es significativamente más rápido y ha mejorado nuestra experiencia de desarrollo. Este es un cambio interno que no debería afectar a los usuarios. ¡Si algo no funciona correctamente después de actualizar, por favor abre un issue!