Saltar al contenido principal

Prettier 1.11: Correcciones CSS y soporte para nuevas características de TypeScript

· 19 min de lectura
Lily Skye
Lily Skye
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 numerosas correcciones de formato CSS, soporte para nuevas características de TypeScript y correcciones generales para otros lenguajes.

Desde el último lanzamiento, el sitio web de Prettier ha recibido un rediseño completo gracias a @orta!

Facebook es 💯% Prettier​

¡Otro anuncio emocionante es que todos los archivos JavaScript en la base de código de Facebook ahora usan Prettier! Lo asombroso es que no hubo un esfuerzo coordinado para migrar el código: simplemente implementamos las herramientas y documentamos cómo migrar carpetas, y los desarrolladores comenzaron a convertir sus secciones gradualmente.

En 8 meses, el 75% del código se convirtió orgánicamente, y la semana pasada realizamos un esfuerzo final para migrar el resto e imponer que todos los archivos futuros usen Prettier. Esto demuestra que Prettier es lo suficientemente robusto para manejar casos extremos complejos y que ofrece un valor significativo dada su alta tasa de adopción.

Destacados​

CSS/SCSS/Less​

¡Nuestro formateo CSS recibió mucha atención de @evilebottnawi en esta versión!

Formateo de at-rules (#3828 por @evilebottnawi)​

Anteriormente, algunas at-rules (como @if y @include) no se formateaban y se imprimían tal cual. Ahora se formatean correctamente:

// Before:
.selector {
  @include absolute($top: $long-variable-name, $right: $long-variable-name, $left: auto, $bottom: auto);
}

// After:
.selector {
  @include absolute(
    $top: $long-variable-name,
    $right: $long-variable-name,
    $left: auto,
    $bottom: auto
  );
}

Soporte para plugins populares de PostCSS (#3959 por @evilebottnawi)​

Algunos plugins populares como postcss-mixins fallaban debido al formateo CSS de Prettier. Ahora estos plugins funcionan correctamente:

// Before
$theme: blue;

a {
  @mixin $(theme) -colors;
}

// After
$theme: blue;

a {
  @mixin $(theme)-colors;
}

Soporte para bloques YAML front-matter en SCSS (#3802 por @evilebottnawi)​

Jekyll depende del YAML front-matter para detectar archivos SCSS, pero Prettier lo eliminaba, lo que rompía los sitios al desplegarse. Ahora se preserva el front-matter, manteniendo los estilos:

---
title: Title
description: Description
---

a {
  color: red;
}

TypeScript​

Soporte para asignación definida (!:) (#4020 por @ikatyang)​

TypeScript 2.7 añadió la asignación definida para inicializadores de propiedades de clase. Indica a TypeScript que, aunque una propiedad no tenga inicializador, en tiempo de ejecución tendrá un valor (no undefined):

class MyComponent {
  ngModel!: ng.INgModelController;
}

Prettier 1.10.2 no podía interpretar esta sintaxis:

SyntaxError: '=' expected. (2:10)
  1 | class MyComponent {
> 2 |   ngModel!: ng.INgModelController;
    |          ^
  3 | }

Pero ahora está soportada en Prettier 1.11.0.

Soporte para unique symbol (#3967 por @ikatyang)​

TypeScript 2.7 también añadió el tipo unique symbol:

interface SymbolConstructor {
  readonly iterator: unique symbol;
}

Prettier 1.10.2 no podía interpretar esta sintaxis:

SyntaxError: ';' expected. (2:29)
  1 | interface SymbolConstructor {
> 2 |   readonly iterator: unique symbol;
    |                             ^
  3 | }
  4 |

Pero ahora está soportada en Prettier 1.11.0.

Soporte para tipos condicionales (#4006 por @Cryrivers)​

TypeScript 2.8 añadirá tipos condicionales, que parecen ternarios pero en posición de tipo:

export type DeepReadonly<T> =
    T extends any[] ? DeepReadonlyArray<T[number]> :
    T extends object ? DeepReadonlyObject<T> :
    T;

Prettier 1.10.2 no podía interpretarlos:

SyntaxError: ';' expected. (2:7)
  1 | export type DeepReadonly<T> =
> 2 |     T extends any[] ? DeepReadonlyArray<T[number]> :
    |       ^
  3 |     T extends object ? DeepReadonlyObject<T> :
  4 |     T;

Pero esta sintaxis está soportada en Prettier 1.11.0.

JavaScript​

Indentación incorrecta en ternarios con --use-tabs (#3745 por @ikatyang)​

Debido a que los tabs pueden representarse con diferentes anchos, Prettier a veces indentaba incorrectamente los operadores ternarios al usar tabs. Ahora calculamos la indentación correctamente:

// Before:
const abc = props.something
	? xyz
	: {
			prop1: a,
			prop2: b,
			prop3: false,
		};

// After:
const abc = props.something
	? xyz
	: {
			prop1: a,
			prop2: b,
			prop3: false
	  };

Otros cambios​

CSS/SCSS/Less​

Las listas de listas ahora tienen un formato más limpio (#3930 por @evilebottnawi)​

No manejábamos bien las listas de listas en SCSS. Ahora las manejamos mejor.

// Before:
$space-scale: (0, "0") (0.25, "0-25") (0.5, "0-5") (0.75, "0-75") (1, "1")
  (
    1.25,
    "1-25"
  ) (1.5, "1-5") (1.75, "1-75") (2, "2") (2.25, "2-25") (2.5, "2-5")
  (
    2.75,
    "2-75"
  ) (3, "3") (3.25, "3-25") (3.5, "3-5") (3.75, "3-75") (4, "4");

// After:
$space-scale: (0, "0") (0.25, "0-25") (0.5, "0-5") (0.75, "0-75") (1, "1")
  (1.25, "1-25") (1.5, "1-5") (1.75, "1-75") (2, "2") (2.25, "2-25")
  (2.5, "2-5") (2.75, "2-75") (3, "3") (3.25, "3-25") (3.5, "3-5")
  (3.75, "3-75") (4, "4");

Se preservan comentarios en declaraciones font-face (#3906 por @evilebottnawi)​

Anteriormente, si tenías código como este:

@font-face {
  font-family: "Prettier";
  src: local("Prettier"), /* Local */
    url("http://prettier.com/font.woff") /* Network*/
}

El comentario "Local" era eliminado por Prettier:

@font-face {
  font-family: "Prettier";
  src: local("Prettier"), url("http://prettier.com/font.woff"); /* Network*/
}

Ahora se preserva:

@font-face {
  font-family: "Prettier";
  src: local("Prettier"), /* Local */ url("http://prettier.com/font.woff"); /* Network*/
}

La indentación CSS ya no usa 3 espacios cuando la línea comienza con paréntesis (#3930 por @evilebottnawi)​

Si una línea de CSS requería indentación y comenzaba con un paréntesis, se aplicaban erróneamente 3 espacios en lugar de 2. Ahora usa 2 espacios.

// Before:
$longVariable: (
   (mobile $mobile) (tablet $tablet) (desktop $desktop) (wide $wide)
);

// After:
$longVariable: (
  (mobile $mobile) (tablet $tablet) (desktop $desktop) (wide $wide)
);

Ya no se añade espacio extra dentro de mapas (#3814 por @evilebottnawi)​

Prettier añadía erróneamente espacios dentro de mapas SCSS. Ya no se imprimen.

// Before:
$map: map-merge($map,  ($key: $value));

// After:
$map: map-merge($map, ($key: $value));

Los comentarios SCSS en listas de selectores ya no rompen el formato (#3909 por @evilebottnawi)​

Prettier formateaba incorrectamente los comentarios SCSS al final de listas de selectores CSS, rompiendo el código:

// Before formatting:
.field {
  &[data-field-id="1"], // Name
  &[data-field-id="2"], // Email
  &[data-field-id="3"], // Postal Code
  {
    background: green;
  }
}

// After formatting (Prettier 1.10.2):
.field {
  &[data-field-id="1"],
  // Name &[data-field-id="2"],
  // Email &[data-field-id="3"] {
    background: green;
  }
}

Ahora maneja correctamente estos comentarios:

// After formatting (Prettier 1.11.0):
.field {
  &[data-field-id="1"], // Name
  &[data-field-id="2"], // Email
  &[data-field-id="3"], // Postal Code
 {
    background: green;
  }
}

Ya no se añade coma después de URL en @import (#3770 por @evilebottnawi)​

Prettier añadía erróneamente una coma después de URLs en @import. Ya no se añade:

/* Before */
@import url("responsive/gt768.css"), screen and (min-width: 768px);

/* After */
@import url("responsive/gt768.css") screen and (min-width: 768px);

Manejo correcto de la directiva !default (#3724 por @evilebottnawi)​

Prettier imprimía la directiva !default de forma extraña:

$theme-checkbox-colors: (
    default: $theme-color-border,
    checked: $theme-color-checked,
    disabled: $theme-color-disabled,
    disabled-font: $theme-color-font-secondary
  )
  !default;

Ahora se maneja correctamente:

$theme-checkbox-colors: (
  default: $theme-color-border,
  checked: $theme-color-checked,
  disabled: $theme-color-disabled,
  disabled-font: $theme-color-font-secondary
) !default;

No formatear contenido de directivas @warn y @error (#3769 por @evilebottnawi)​

SCSS permite emitir texto durante la compilación usando @warn o @error:

// Unformatted code:
@if ($error) {
  @error 'An error occurred: (#{$error}).';
}

Desafortunadamente, Prettier trataba estas directivas como media queries, formateando su contenido de forma inesperada (en este ejemplo, añadiendo espacio antes del punto):

// Formatted code (Prettier 1.10.2):
@if ($error) {
  @error 'error (#{$error}) .';
}

Ahora maneja estas directivas correctamente y no cambia el contenido del string:

// Formatted code (Prettier 1.11.0):
@if ($error) {
  @error "error (#{$error}).";
}

No eliminar punto y coma en declaraciones de reglas Less (#3841 por @evilebottnawi)​

Prettier eliminaba erróneamente puntos y coma después de declaraciones de reglas Less, necesarios para evitar errores de compilación. Ahora se preservan:

// Before:
@detached-ruleset: {
  background: red;
}

// After:
@detached-ruleset: {
  background: red;
};

No añadir nueva línea a archivos CSS vacíos (#3723 por @hudochenkov)​

Prettier añadía una nueva línea al final de archivos CSS vacíos. Como no lo hacemos para archivos JS, decidimos unificar este comportamiento para evitar cambios sorpresa en control de versiones al añadir Prettier a un proyecto.

Ignorar parámetros media con interpolación SCSS (#3801 por @evilebottnawi)​

Prettier rompía código cuando una media query contenía interpolación SCSS. Ahora se preserva:

// Unformatted code:
$sm-only: '(min-width: 768px) and (max-width: 991px)';
$lg-and-up: '(min-width: 1200px)';

@media screen and #{$sm-only, $lg-and-up} {
    color: #000;
}

// Formatted code (Prettier 1.10.2):
@media screen and,  {
	color: #000;
}

// Formatted code (Prettier 1.11.0):
$sm-only: "(min-width: 768px) and (max-width: 991px)";
$lg-and-up: "(min-width: 1200px)";

@media screen and #{$sm-only, $lg-and-up} {
  color: #000;
}

No imprimir dos espacios entre operador de selector y corchete (#3738 por @evilebottnawi)​

Prettier imprimía erróneamente un espacio extra cuando un selector CSS terminaba con operador (característica soportada por SCSS). Esto ha sido corregido:

// Unformatted code:
.this > .ends > .with > .an > .operator > {
  // content
}

// Formatted code (Prettier 1.10.2):
.this > .ends > .with > .an > .operator >  {
  // content
}

// Formatted code (Prettier 1.11.0):
.this > .ends > .with > .an > .operator > {
  // content
}

No modificar las mayúsculas/minúsculas en nombres de funciones SCSS (#3768 por @evilebottnawi)​

Prettier convertía erróneamente a minúsculas los nombres de funciones SCSS en ciertos casos. Esto se ha corregido.

// Unformatted code:
@include breakpoint (getBp(md)) {
  &:nth-child(2n + 3) {
    clear: both;
  }
}

// Formatted code (Prettier 1.10.2):
@include breakpoint (getbp(md)) {
  &:nth-child(2n + 3) {
    clear: both;
  }
}

// Formatted code (Prettier 1.11.0):
@include breakpoint(getBp(md)) {
  &:nth-child(2n + 3) {
    clear: both;
  }
}

Mantener espacios alrededor del selector profundo >>> de Vue (#3792 por @evilebottnawi)​

Prettier eliminaba erróneamente los espacios alrededor del selector profundo de Vue:

<!-- Unformatted code: -->
<style scoped>
  .box >>> .child-component {
    font-size: 24px;
  }
</style>

<!-- Formatted code (Prettier 1.10.2): -->
<style scoped>
  .box>>>.child-component {
    font-size: 24px;
  }
</style>

<!-- Formatted code (Prettier 1.11.0): -->
<style scoped>
.box >>> .child-component {
  font-size: 24px;
}
</style>

Corrección para la regla @nest (#3975 por @evilebottnawi)​

Prettier añadía incorrectamente espacios alrededor del carácter & en selectores usados con @nest, lo que alteraba el selector compilado. Esto se ha corregido:

// Unformatted code:
.title {
  @nest :global(h1)& {
    background: red;
  }
}

// Formatted code (Prettier 1.10.2):
.title {
  @nest :global(h1) & {
    background: red;
  }
}

// Formatted code (Prettier 1.11.0):
.title {
  @nest :global(h1)& {
    background: red;
  }
}

Formatear progid:DXImageTransform.Microsoft.gradient tal cual (#4028 por @evilebottnawi)​

En Prettier 1.10.2 existía lógica compleja para formatear valores de filtros específicos de Microsoft, pero los resultados eran deficientes. Al tratarse de sintaxis no estándar y poco utilizada, ahora se imprimen tal cual sin intentar formatearlos.

No convertir a minúsculas el selector de anidamiento (#4048 por @evilebottnawi)​

En Prettier 1.10.2 se convertían incorrectamente a minúsculas los selectores SCSS anidados:

// Unformatted code:
.foo {
  &-1Bar {
  }
}

// Formatted code: (Prettier 1.10.2):
.foo {
  &-1bar {
  }
}

Esto se ha corregido en Prettier 1.11.0:

// Formatted code: (Prettier 1.11.0):
.foo {
  &-1Bar {
  }
}

JavaScript​

Evitar paréntesis visualmente extraños alrededor de argumentos de return con comentarios (#3665 por @duailibe)​

Prettier colocaba paréntesis alrededor de argumentos en declaraciones return de forma visualmente extraña cuando contenían comentarios. Ahora estos paréntesis se formatean correctamente.

// Unformatted code:
func1(function() {
  return func2
      //comment
      .bar();
});

// Formatted code (Prettier 1.10.2):
func1(function() {
  return (func2
      //comment
      .bar() );
});

// Formatted code (Prettier 1.11.0):
func1(function() {
  return (
    func2
      //comment
      .bar()
  );
});

Respetar sangría 0 en markdown dentro de JS (#3676 por @ikatyang)​

El formateo de markdown-en-JS (activado con la etiqueta md) insertaba sangría:

// Unformatted code
md`
This is some markdown
`

// Formatted code (Prettier 1.10.2)
md`
  This is some markdown
`;

Este comportamiento era deseable para funciones como react-markings, pero rompía otros formateadores internos.

Prettier 1.11.0 respetará el nivel de sangría configurado en tu markdown. Así funciones como react-markings mantendrán su sangría, mientras otros usuarios podrán evitarla.

Formatear llamadas AMD define como llamadas CJS require (#3830 por @salemhilal)​

En módulos AMD, un patrón común es usar define para dependencias de módulos anónimos:

define([
  "jquery",
  "common/global.context",
  "common/log.event",
  "some_project/square",
  "some_project/rectangle",
  "some_project/triangle",
  "some_project/circle",
  "some_project/star"
], function($, Context, EventLogger, Square, Rectangle, Triangle, Circle, Star) {
  console.log("some code");
});

Prettier 1.10.2 rompía esto en múltiples líneas, aumentando la sangría:

define(
  [
    "jquery",
    "common/global.context",
    "common/log.event",
    "some_project/square",
    "some_project/rectangle",
    "some_project/triangle",
    "some_project/circle",
    "some_project/star"
  ],
  function($, Context, EventLogger, Square, Rectangle, Triangle, Circle, Star) {
    console.log("some code");
  }
);

Prettier 1.11.0 ahora "abraza" el array y la expresión funcional, reduciendo la sangría:

define([
  "jquery",
  "common/global.context",
  "common/log.event",
  "some_project/square",
  "some_project/rectangle",
  "some_project/triangle",
  "some_project/circle",
  "some_project/star"
], function(
  $,
  Context,
  EventLogger,
  Square,
  Rectangle,
  Triangle,
  Circle,
  Star
) {
  console.log("some code");
});

Formatear skip de QUnit como test (#3735 por @tmquinn)​

Prettier aplicaba formatos especiales a describe, it y test para mejorar el formato en pruebas según expectativas y solicitudes de usuarios. Sin embargo, no aplicábamos la misma lógica al método skip de QUnit, lo que causaba formato inconsistente al cambiar pruebas entre test y skip:

// Unformatted code
test("this is a really long description of some test I want to go here", function (assert) {
  assert("something");
});

skip("this is a really long description of some test I want to go here", function (assert) {
  assert("something");
});

// Formatted code (Prettier 1.10.2):
test("this is a really long description of some test I want to go here", function(assert) {
  assert("something");
});

skip(
  "this is a really long description of some test I want to go here",
  function(assert) {
    assert("something");
  }
);

Ahora tratamos skip igual que describe, it y test, unificando el formato en pruebas QUnit:

// Formatted code (Prettier 1.11.0):
test("this is a really long description of some test I want to go here", function(assert) {
  assert("something");
});

skip("this is a really long description of some test I want to go here", function(assert) {
  assert("something");
});

Romper elementos JSX si una prop de cadena contiene salto de línea (#4011 por @duailibe)​

Según la especificación de JSX, se permiten caracteres de nueva línea dentro de literales de cadena en JSX. Sin embargo, Prettier no trataba un elemento JSX como multilínea cuando uno de sus valores de atributo era una cadena que contenía un carácter de nueva línea. Ahora Prettier tratará estos elementos como multilínea como se espera:

// Unformatted code:
<path d="M4.765 16.829l3.069-2.946 5.813 5.748
  11.33-11.232 3.006 3.18-14.36 14.080z"
/>;

// Formatted code (Prettier 1.10.2):
<path d="M4.765 16.829l3.069-2.946 5.813 5.748
  11.33-11.232 3.006 3.18-14.36 14.080z" />;

// Formatted code (Prettier 1.11.0):
<path
  d="M4.765 16.829l3.069-2.946 5.813 5.748
  11.33-11.232 3.006 3.18-14.36 14.080z"
/>;

Soporte para spread de hijos JSX con el parser de flow (#3899 por [@vuex])​

Usar un operador spread en una posición de contenedor de expresión de hijos JSX causaba un error de análisis en Prettier 1.10.2 al usar el parser de flow:

<JSX>
  {...edges}
</JSX>
SyntaxError: Unexpected token ... (2:4)
  1 | <JSX>
> 2 |   {...edges}
    |    ^^^
  3 | </JSX>

En Prettier 1.11.0, esta sintaxis es compatible con el parser de flow.

Corrección de error al imprimir tipos de retorno de objetos flow con maybe (#3948 por @azz)​

En Prettier 1.10.2, este código provocaba un error:

function getScaledData({x}): ?{foo: number} {}

Se ha corregido en Prettier 1.11.0.

--insert-pragma ya no elimina pragmas duplicados (#3947 por @azz)​

Usar --insert-pragma en código con pragmas duplicados eliminaba todos menos uno de los duplicados. Esto se ha corregido:

// Unformatted code:
/**
 * @x 1
 * @x 2
 */

// Formatted code (Prettier 1.10.2):
/**
 * @format
 * @x 2
 */

// Formatted code (Prettier 1.11.0):
/**
 * @format
 * @x 1
 * @x 2
 */

Envolver ternarios con typecast flow entre paréntesis (#3940 por @j-f1)​

Para mejorar la claridad del código, los ternarios con typecast ahora se envolverán entre paréntesis:

// Unformatted code:
const foo = ((1?2:3): number);

// Formatted code (Prettier 1.10.2):
const foo = (1 ? 2 : 3: number);

// Formatted code (Prettier 1.11.0):
const foo = ((1 ? 2 : 3): number);

Corrección de casos con punto y coma faltante al imprimir DeclareExportDeclaration (#3979 por @existentialism)​

Los puntos y coma se eliminaban por error en declaraciones declare export default en archivos de definición de bibliotecas flow. Esto se ha corregido.

TypeScript​

No eliminar paréntesis de (void 0)! (#3989 por @azz)​

Prettier eliminaba por error los paréntesis de (void 0)!, lo que cambiaba el AST del programa. Esto se ha corregido.

Encadenamiento correcto cuando existe un TSNonNullExpression (#4005 por @ericanderson)​

Prettier no usaba su estilo de formato de encadenamiento cuando la cadena incluía una expresión de no nulo TypeScript !. Esto se ha corregido:

// Unformatted code:
this.tokenLoads.get(locator).get(start).push({});

this.tokenLoads.get(locator)!.get(start).push({});

// Formatted code (Prettier 1.10.2):
this.tokenLoads
  .get(locator)
  .get(start)
  .push({});

this.tokenLoads.get(locator)!.get(start).push({});

// Formatted code (Prettier 1.11.0):
this.tokenLoads
  .get(locator)
  .get(start)
  .push({});

this.tokenLoads
  .get(locator)!
  .get(start)
  .push({});

Markdown​

Encabezado después de elemento de lista se fusionaba con la lista (#3780 por @ikatyang)​

Prettier fusionaba por error un encabezado debajo de un elemento de lista con la lista. Ahora se trata como encabezado:

<!-- Unformatted code -->
* Something
### Some heading

<!-- Formatted code (Prettier 1.10.2) -->
* Something
  ### Some heading

<!-- Formatted code (Prettier 1.11.0) -->
* Something

### Some heading

No analizar entidades HTML en URLs de enlaces (#3780 por @ikatyang)​

Los enlaces cuya URL contenía entidades HTML se modificaban incorrectamente al pasar por Prettier. Ahora se conservan.

<!-- Unformatted code -->
[Test](http://localhost:8080/test?language=DE&currency=EUR)

<!-- Formatted code (Prettier 1.10.2) -->
[Test](http://localhost:8080/test?language=DE¤cy=EUR)

<!-- Formatted code (Prettier 1.11.0) -->
[Test](http://localhost:8080/test?language=DE&currency=EUR)

Corrección de sangría de cadenas de plantilla dentro de bloques de código (#3676 por @ikatyang)​

La sangría de contenido de cadenas de plantilla etiquetadas JS dentro de bloques de código markdown se calculaba incorrectamente:

<!-- Unformatted code: -->
- 1
  - 2
    - 3
      ```js
      something`
      asd

      asd

      asd
      `
      ```

<!-- Formatted code (Prettier 1.10.2): -->
* 1

  * 2

    * 3

      ```js
      something`
asd

asd

asd
`;
      ```

Se ha corregido en Prettier 1.11.0:

<!-- Formatted code (Prettier 1.11.0): -->
* 1

  * 2

    * 3

      ```js
      something`
      asd

      asd

      asd
      `;
      ```

Impresión correcta de contenido multilínea en footnoteDefinition (#3787 por @ikatyang)​

Prettier usaba por error un nivel de sangría incorrecto al imprimir notas al pie que contenían bloques de código. Esto se ha corregido:

<!-- Unformatted code: -->
Some text.[^fn]

[^fn]: Here is a footnote which includes code.

    ```rs
    fn main() {
        println!("this is some Rust!");
    }
    ```

<!-- Formatted code (Prettier 1.10.2): -->
Some text.[^fn]

[^fn]: Here is a footnote which includes code.

```rs
fn main() {
    println!("this is some Rust!");
}
```

<!-- Formatted code (Prettier 1.11.0): -->

Some text.[^fn]

[^fn]: Here is a footnote which includes code.

```rs
fn main() {
    println!("this is some Rust!");
}
```

Respetar tabWidth para elementos de lista (#3990 por @ikatyang)​

Hemos descubierto que CommonMark difiere de la sintaxis Markdown original para bloques de código en elementos de lista. Esto lleva a escenarios donde bloques de código sangrados en Markdown se representaban como párrafos regulares. Este cambio usa la opción tabWidth para determinar cuánta sangría usar en elementos de lista. Lea #3459 si está interesado en los detalles.

<!-- before -->
1. Change to your home directory:

   cd

<!-- after -->
1. Change to your home directory:

        cd

Este cambio también debería mejorar la sangría en editores de texto:

API​

Soporte de opciones en plugins (#3775 por @ikatyang)​

Como parte del desarrollo de nuestra API beta de plugins para lenguajes creados por la comunidad, ¡hemos añadido soporte para que los plugins definan sus propias opciones!

Ahora las opciones de los plugins pueden mostrarse en la ayuda:

prettier --plugin @prettier/plugin-python --help

Asimismo, las opciones de los plugins pueden especificarse en la línea de comandos:

prettier --plugin my-cool-prettier-plugin --my-custom-option

Y las opciones de los plugins también pueden definirse en .prettierrc:

{ "plugins": ["foo-plugin"], "fooOption": "bar" }

No permitir opciones en kebab-case en archivos de configuración (#3622 por @ikatyang)​

Prettier permitía erróneamente variantes en kebab-case de las opciones en archivos .prettierrc:

{ "print-width": 100 }

Esto no estaba previsto como funcionalidad permitida y se ha revertido (en este caso, deberás usar printWidth).

Configuración​

Respetar EditorConfig cuando se pasa --config (#3992 por @josephfrazier)​

Este es un cambio menor en el manejo de archivos .editorconfig. Anteriormente, al proporcionar --config, se ignoraba .editorconfig.

¡Gracias a todos los colaboradores de Prettier y a la comunidad por hacer de Prettier un proyecto open-source exitoso y productivo! No podríamos lograrlo sin todos ustedes ❤️