Prettier 1.9: Fragmentos JSX, EditorConfig y Paréntesis en Flechas

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 una opción para paréntesis en argumentos de funciones flecha, soporte para la nueva sintaxis de fragmentos JSX (<>), compatibilidad con archivos .editorconfig, y mejoras en nuestro soporte para GraphQL y Markdown.

Destacados

JavaScript

Opción para añadir paréntesis en argumentos de funciones flecha (#3324) por @rattrayalex y @suchipi

Al formatear funciones flecha, Prettier omitía los paréntesis alrededor de los argumentos cuando no eran estrictamente necesarios, así:

// no parens
foo => {};

// parens
(foo: Number) => {};

// parens
({ foo }) => {}

// parens
(foo = 5) => {}

Esto generó el hilo más comentado en nuestro rastreador de incidencias. Prettier ahora incluye la opción --arrow-parens (arrowParens en la configuración) que puede tomar dos valores:

• "avoid" - (predeterminado) mantiene el comportamiento que omite paréntesis cuando es posible

• "always" - siempre incluye paréntesis

Sintaxis de fragmentos JSX (#3237) por @duailibe

Prettier ahora reconocerá y formateará JSX con la nueva sintaxis de fragmentos, como en este ejemplo:

function MyComponent() {
  return (
    <>
      <Children1 />
      <Children2 />
      <Children3 />
    </>
  );
}

Corrección de lentitud al formatear textos largos en JSX (#3268, #3273) por @duailibe

Recibimos comentarios sobre que formatear archivos JSX con textos muy largos (~1000 líneas) era extremadamente lento, y detectamos dos cuellos de botella en nuestra primitiva fill, que imprime texto hasta alcanzar el ancho máximo antes de insertar un salto de línea.

Markdown

Añadir opción para preservar saltos de línea en texto (#3340) por @ikatyang

Tras el lanzamiento de nuestro soporte para Markdown, recibimos comentarios de que romper el texto para respetar el ancho máximo podía afectar a renderizadores sensibles a los saltos de línea. En la versión 1.8.2 introdujimos la opción proseWrap: false que imprimía párrafos en una sola línea, delegando en el "ajuste suave" de los editores.

En la versión 1.9 lanzamos la nueva opción proseWrap: "preserve" que respeta los saltos de línea originales y permite a los usuarios decidir dónde debe romperse el texto.

[ADVERTENCIA] El uso de valores booleanos en proseWrap está obsoleto; utilice "always", "never" o "preserve".

[CAMBIO IMPORTANTE] La opción proseWrap ahora tiene como valor predeterminado "preserve" debido a que algunos renderizadores son sensibles a los saltos de línea.

GraphQL

Soporte para interpolaciones de nivel superior (#3370) por @lydell

Cuando se lanzó el soporte para GraphQL, Prettier no admitía interpolaciones y omitía el formato si había alguna, ya que las interpolaciones complican mucho el formateo. Aunque esto funcionaba bien en la mayoría de casos, los usuarios de Apollo Client a veces se perdían el soporte de GraphQL de Prettier porque Apollo Client usa interpolaciones para compartir fragmentos entre consultas. La buena noticia es que solo se permiten interpolaciones de nivel superior, lo cual fue mucho más fácil de implementar en Prettier.

En la versión 1.9 formateamos consultas GraphQL con interpolación de nivel superior:

gql`
  query User {
    user(id: "Bob") {
      ...UserDetails
    }
  }

  ${UserDetailsFragment}
`

(Prettier seguirá omitiendo el formato si la interpolación está dentro de una consulta o mutación).

Preservar saltos de línea intencionales en GraphQL (#3252) por @duailibe

Prettier ahora respetará los saltos de línea intencionales dentro de consultas GraphQL (limitándolos a 1), cuando antes los eliminaba.

query User {
  name

  age
}

CSS

No convertir a minúsculas nombres de elementos ni atributos en selectores (#3317) por @lydell

CSS es mayormente insensible a mayúsculas/minúsculas, por lo que Prettier llevaba tiempo convirtiendo todo a minúsculas para mantener consistencia. Resulta que pasamos por alto un detalle en la especificación CSS: los nombres de elementos y atributos en selectores dependen del lenguaje de marcado. En HTML son insensibles, pero en SVG (XML) no lo son. Anteriormente Prettier convertía incorrectamente a minúsculas estos nombres, pero ahora ya no lo hace.

Configuración

Añadir soporte para EditorConfig (#3255) por @josephfrazier

Tomó tiempo, pero Prettier finalmente respetará tu archivo .editorconfig. Esto incluye:

• indent_style

• indent_size/tab_width

• max_line_length

La CLI de prettier respeta .editorconfig por defecto, pero puedes desactivarlo con --no-editorconfig. Sin embargo, la API no respeta .editorconfig por defecto para evitar posibles problemas en integraciones con editores (ver aquí para detalles). Para activarlo, añade editorconfig: true a las opciones de prettier.resolveConfig.

Otros cambios

JavaScript

No romper elementos simples en JSX (#3250) por @duailibe

Prettier ya no romperá elementos sin atributos, manteniendo unidades como <br /> intactas.

No romper identificadores dentro de expresiones en literales de plantilla (#3299) por @duailibe

En la versión anterior probamos una estrategia de romper literales de plantilla con expresiones internas para respetar el ancho de línea. Recibimos feedback de que en algunos casos era preferible exceder el ancho antes que romper en múltiples líneas.

De ahora en adelante, las expresiones en literales de plantilla que contengan un solo identificador no se romperán:

const foo = `Hello ${username}. Today is ${month} ${day}. You have ${newMessages} new messages`.

Corregir formato de comentarios dentro de funciones flecha (#3334) por @jackyho112

Corrige un caso extremo donde Prettier movía comentarios y rompía herramientas como Webpack:

const API = {
  loader: () => import('./test' /* webpackChunkName: "test" */),
};

// would get formatted to

const API = {
  loader: (/* webpackChunkName: "test" */) => import("./test")
};

Corrección de impresión de comentarios alrededor de decoradores y propiedades de clase (#3382) by @azz

Existía un caso donde los comentarios entre un decorador y una propiedad de clase se movían a una posición no válida.

// Before
class Something {
  @decorator
  static // comment
  property = 1;
}

// After
class Something {
  @decorator
  // comment
  static property = 1;
}

Flow

No romper parámetros de tipo vacíos (#3281) by @Vjeux

Ya no romperá parámetros de tipo vacíos (foo: Type<>).

Agregar soporte para mixins de flow al usar babylon (#3391) by @bakkot

Estábamos eliminando accidentalmente los mixins de flow; esto se ha corregido, pero solo para el analizador babylon.

// Before
class Foo extends Bar {}

// After
class Foo extends Bar mixins Baz {}

TypeScript

No imprimir coma final después de spread de objeto (#3313) by @duailibe

Esto era inconsistente con JavaScript y Flow; Prettier no imprimirá coma final en estos casos cuando se use el analizador de TypeScript:

const {
  bar,
  baz,
  ...rest
} = foo;

Imprimir paréntesis alrededor de aserciones de tipo para decoradores (#3329) by @azz

Estábamos omitiendo paréntesis alrededor de aserciones de tipo dentro de decoradores:

@(bind as ClassDecorator)
class Decorated {}

Markdown

No romper inlineCode (#3230) by @ikatyang

Prettier no romperá texto dentro de inlineCode, lo que significa que solo romperá antes o después de él.

Eliminar espacios adicionales entre texto no-CJK y puntuación CJK, y viceversa (#3244, #3249) by @ikatyang

Corrige casos donde Prettier insertaba espacios adicionales como en estos ejemplos:

扩展运算符（spread ）是三个点（`...`）。

This is an english paragraph with a CJK quote " 中文 ".

Escapar todo texto similar a énfasis (#3246) by @ikatyang

Corrige el caso donde \_\_text\_\_ se formatearía como __text__.

Manejar variantes de puntuación (#3254) by @ikatyang

Prettier ahora considera no solo caracteres de puntuación ASCII sino también Unicode.

Soporte para front matter TOML (#3290) by @ikatyang

Ya soportábamos YAML en el front matter de archivos Markdown, y ahora agregamos formato TOML ya que algunos generadores de sitios estáticos lo soportan.

+++
date: '2017-10-10T22:49:47.369Z'
title: 'My Post Title'
categories: ['foo', 'bar']
+++

This is the markdown body of my post.

Solo indentar el primer nodo no-lista en elementos de lista con casillas (#3297) by @ikatyang

Corrige un error donde se indentaban líneas después de una lista cuando no debía:

* parent list item

     * child list item

* [x] parent task list item

     * [x] child task list item

se convertiría en:

* parent list item

  * child list item

* [x] parent task list item

      * [x] child task list item

Conservar espacios irrompibles (#3327) por @ikatyang

Los espacios irrompibles son útiles para mantener palabras separadas por espacios juntas en la misma línea (ej. números con unidades o nombres de productos de varias palabras). Prettier los convertía erróneamente en espacios regulares.

Evitar saltos antes de prefijos especiales (#3347) por @ikatyang

Corrige un error donde Prettier podía dividir texto al superar el ancho de impresión justo antes de un número seguido de ., que sería interpretado como lista numerada:

She grew up in an isolated village in the 19th century and met her father aged
29. Oh no, why are we in a numbered list now?

Omitir punto y coma en expresiones JSX simples (#3330) por @sapegin

Prettier omitirá el punto y coma (antes y después) dentro de muestras de código si es una expresión JSX simple:

No semi:

<!-- prettier-ignore -->
```jsx
<div>Example</div>
```