Saltar al contenido principal

Prettier 1.7: Ajustes en JSX, Pragma y correcciones en TypeScript y CSS

· 9 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 correcciones de errores y ajustes en el formato de JSX, TypeScript, CSS y JavaScript, además de algunas características nuevas.

Destacados​

Cambios en JSX​

Recibimos amplia retroalimentación de la comunidad sobre los cambios implementados en el formato JSX en la versión 1.6.0, y hemos realizado ajustes para alinearnos mejor con los estándares y expectativas comunitarias.

En la versión 1.6.0 agregamos un segundo estilo para ternarios (expresiones condicionales, a ? b : c), basado en un formato popular en la comunidad que utiliza paréntesis para delimitar contenido JSX:

const DinnerOptions = ({ willEatMeat, willEatEggs, willEatVegetables }) => (
  <div>
    <div>Let's get some dinner...</div>
    {willEatMeat ? (
      <FullMenu />
    ) : willEatEggs ? (
      <VegetarianMenu />
    ) : willEatVegetables ? (
      <VeganMenu />
    ) : (
      <BackupMenu />
    )}
  </div>
);

Antes de este cambio, prettier solo formateaba ternarios con un estilo consistente:

willEatMeat
  ? "Full Menu"
  : willEatEggs
    ? "Vegetarian Menu"
    : willEatVegetables ? "Vegan Menu" : "Backup Menu";

En la versión 1.6.0 usábamos la siguiente heurística para decidir cuándo aplicar los "ternarios en modo JSX":

We should print a ternary using JSX mode if:
  * The ternary contains some JSX in it
  OR
  * The ternary appears inside of some JSX

Sin embargo, esta heurística causó algunos formatos inesperados: Diff de GitHub mostrando un ternario con cadenas de internacionalización dentro de un elemento JSX convertido al estilo ternarios modo-JSX

Por ello, en la versión 1.7.0 hemos simplificado nuestra heurística a:

We should print a ternary using JSX mode if:
  * The ternary contains some JSX in it

Esperamos que este cambio reduzca la aparición de ternarios sorpresivos.

Un gran agradecimiento a @duailibe quien implementó este cambio junto con varias otras correcciones reportadas relacionadas con JSX.

Consistencia en mayúsculas/minúsculas en CSS​

Dedicamos tiempo en esta versión a pulir nuestro formato CSS, y como parte de eso, @lydell normalizó el uso de mayúsculas.

Ahora, casi todo en CSS se imprimirá usando lower case.

/* Before */
DIV.Foo {
  HEIGHT: 12PX;
}

/* After */
div.Foo {
  height: 12px;
}

Pero tranquilo: Prettier no modificará tus $scss-variables, [@less](https://github.com/less)-variables ni FunctionNames(). ¡Sigue preprocesando!

Soporte para Pragma​

Se ha agregado la opción --require-pragma (requirePragma vía API) que modifica el comportamiento de prettier para que solo reformatee archivos que contengan un "pragma" especial en su cabecera, con este formato:

/**
 * @prettier
 */

o

/**
 * @format
 */

Esta fue idea de @ajhyndman e implementada por @wbinnssmith.

Otros cambios​

TypeScript​

Existía un error en Prettier 1.6.1 que causaba excepciones al analizar TypeScript que usaba el tipo never, por ejemplo:

Observable.empty<never>();

Además, Prettier 1.6.1 eliminaba incorrectamente la palabra clave declare en declaraciones enum dentro de archivos *.d.ts:

// In
declare const enum Foo {}

// Out
const enum Foo {}

Ambos problemas han sido corregidos. ¡Gracias a @JamesHenry y @existentialism por estas correcciones que benefician a nuestra comunidad TypeScript!

Configuración​

Precedencia configurable​

Se agregó la opción CLI --config-precedence que define cómo prettier prioriza las fuentes de configuración. Los valores válidos son:

cli-override (predeterminado) - Las opciones CLI tienen prioridad sobre el archivo de configuración

file-override - El archivo de configuración tiene prioridad sobre las opciones CLI

prefer-file - Si se encuentra un archivo de configuración, se evaluará e ignorarán otras opciones de CLI. Si no se encuentra ningún archivo de configuración, las opciones de CLI se evaluarán normalmente.

Esta opción añade soporte para integraciones en editores donde los usuarios definen su configuración predeterminada pero desean respetar la configuración específica del proyecto.

prettier.resolveConfig.sync​

Anteriormente, no existía forma de resolver la configuración para un archivo fuente de manera síncrona mediante la API. Gracias a nuevas adiciones en cosmiconfig por @sudo-suhas, @ikatyang pudo añadir soporte para esto en la API de prettier.

PRs fusionados en esta versión​

Problemas resueltos en esta versión​

Gracias a todos quienes contribuyeron a esta versión, ya sea mediante la creación de issues, contribución de código, revisión de código, o comentarios y feedback general. Prettier es un proyecto gestionado por la comunidad y puede seguir existiendo gracias a personas como ustedes. ¡Muchas gracias!