Saltar al contenido principal

Prettier 1.16: Mejoras en HTML y mejor manejo de CRLF

· 10 min de lectura
Ika
Ika
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 mejora el formato de HTML e incluye un mejor manejo de CRLF, nuevas funcionalidades de sintaxis y corrige varios errores.

Destacados​

HTML​

Respetar saltos de línea circundantes (#5596 by @ikatyang)​

Anteriormente, Prettier siempre colocaba los elementos en una sola línea si no superaban el printWidth, pero esto no funciona para elementos que se usan como bloques if-else o están diseñados para contener varios elementos. Para solucionar este problema, respetaremos los saltos de línea circundantes para todos los elementos, ya que no existe una forma confiable de determinar si se están utilizando de estas maneras.

<!-- Input -->
<div class="list">
  <div class="item">Jan</div>
</div>
<a v-if="i !== -1" href="#" @click.prevent="select(i)">
  {{ i }}
</a>
<span v-else>
  <slot name="ellipsis">&hellip;</slot>
</span>

<!-- Output (Prettier 1.15) -->
<div class="list"><div class="item">Jan</div></div>
<a v-if="i !== -1" href="#" @click.prevent="select(i)"> {{ i }} </a>
<span v-else> <slot name="ellipsis">&hellip;</slot> </span>

<!-- Output (Prettier 1.16) -->
<div class="list">
  <div class="item">Jan</div>
</div>
<a v-if="i !== -1" href="#" @click.prevent="select(i)">
  {{ i }}
</a>
<span v-else>
  <slot name="ellipsis">&hellip;</slot>
</span>

General​

Mejor manejo de CRLF (#5494 by @ikatyang)​

Quizás hayas notado algunos problemas de formato extraños que solo ocurrían en Windows. Muchos de estos problemas eran causados por nuestro manejo de finales de línea CR-LF. En esta versión, pudimos resolver estos problemas normalizando los saltos de línea tanto antes como después del formateo.

JavaScript​

Mejorar el patrón usado por los hooks de React (#5608 by @j-f1)​

// Input
function helloWorld() {
  useEffect(() => {
    // do something
  }, [props.value])
}

// Output (Prettier 1.15)
function helloWorld() {
  useEffect(
    () => {
      // do something
    },
    [props.value]
  );
}

// Output (Prettier 1.16)
function helloWorld() {
  useEffect(() => {
    // do something
  }, [props.value]);
}

Renombrar el parser babylon a babel (#5647 by @wuweiweiwu)​

El parser de Babel, babylon, fue renombrado a @babel/parser en Babel 7. Nosotros también hemos renombrado nuestro parser babylon a babel para reducir confusiones.

El nombre del parser babylon ahora está obsoleto pero sigue funcionando.

Si necesitas modificar tu configuración debido a este cambio, por favor tómate un momento para leer nuestra documentación sobre la opción parser, especialmente la nota al final.

Flow​

Añadir parser babel-flow (#5685 by @ikatyang)​

Tanto los parsers babel como flow admiten sintaxis Flow por defecto, pero hay algunos casos límite donde la sintaxis Flow es ambigua. Por defecto, el parser Flow de Babel analizará el código ambiguo como JS regular, mientras que el parser nativo de Flow lo analizará como sintaxis Flow. Para abordar este problema, añadimos la opción de parser babel-flow, que utiliza el parser de Babel, pero prefiere la sintaxis Flow cuando surgen ambigüedades.

// Input
const Theme = React.createContext<"light" | "dark">("light");

// Output (Prettier 1.15, --parser babylon)
const Theme = (React.createContext < "light") | ("dark" > "light");

// Output (Prettier 1.16, --parser babel-flow)
const Theme = React.createContext<"light" | "dark">("light");

CLI​

Añadir flag --check (#5629 by @kachkaev)​

Pasar --list-different al comando CLI de prettier hará que Prettier termine con un código de error si uno o más de los archivos pasados no han sido formateados con Prettier. Esto funciona bien, pero no proporciona información en la salida excepto los archivos que no están correctamente formateados. Esto no es muy amigable para nuevos colaboradores y usuarios en general, así que añadimos una opción --check que produce una salida más comprensible para humanos.

# Prettier 1.15
$ prettier *.js --list-different
unformatted.js

# Prettier 1.16
$ prettier *.js --check
Checking formatting...
unformatted.js
Code style issues found in the above file(s). Forgot to run Prettier?

Otros cambios​

General​

Corregir formateo inesperado causado por formato de rango (#5632 by @lhchavez)​

// Input
something("something", () => {
  const something = {
    something: [
      {
        long1: "longlonglonglonglonglonglonglonglonglonglonglong",
        long2: "longlonglonglonglonglonglonglonglonglonglonglong",
      }
    ]
  };
});

// Output (Prettier 1.15, --range-start 100 --range-end 120)
something("something", () => {
  const something = { something: [{ long1: "longlonglonglonglonglonglonglonglonglonglonglong", long2: "longlonglonglonglonglonglonglonglonglonglonglong" }] };
});

// Output (Prettier 1.16, --range-start 100 --range-end 120)
something("something", () => {
  const something = {
    something: [
      {
        long1: "longlonglonglonglonglonglonglonglonglonglonglong",
        long2: "longlonglonglonglonglonglonglonglonglonglonglong",
      }
    ]
  };
});

API​

Permitir pasar instancias de plugins en el campo plugins de opciones de formato (#5763 by @Kingwl)​

Anteriormente, las instancias de plugins estaban extrañamente prohibidas en el campo plugins de opciones de formato, pero deberían estar permitidas. Hemos corregido este problema en Prettier 1.16.

const prettier = require("prettier");
const fooPlugin = require("./path/to/foo-plugin");
const formatted = prettier.format("foo-code", {
  plugins: [fooPlugin],
  parser: "foo-parser",
});
// Prettier 1.15: Error
// Prettier 1.16: No error

Standalone​

Eliminación de la llamada dinámica require() en el paquete standalone (#5612 por @j-f1)​

Anteriormente, existía una llamada require() dinámica en el archivo standalone.js diseñado para uso en navegadores. Aunque no se ejecutaba realmente, herramientas como webpack generaban advertencias por su presencia. En Prettier 1.16 ajustamos el script de compilación para eliminar esta llamada require() en el paquete standalone.

TypeScript​

Manejo correcto de // en TSX (#5728 por @JamesHenry)​

Anteriormente, incluir // como hijo de un elemento JSX en TypeScript causaba errores al interpretarse incorrectamente como comentario. Prettier 1.16 soluciona este problema.

// Input
const link = <a href="example.com">http://example.com</a>

// Output (Prettier 1.15)
// Error: Comment location overlaps with node location

// Output (Prettier 1.16)
const link = <a href="example.com">http://example.com</a>;

Eliminación de paréntesis redundantes en anotaciones de tipo (#5724 por @flurmbo)​

// Input
class Foo {
  bar: (() => boolean);
}

// Output (Prettier 1.15)
class Foo {
  bar: (() => boolean);
}

// Output (Prettier 1.16)
class Foo {
  bar: () => boolean;
}

JavaScript​

No tratar something.connect() como composición funcional (#5739 por @makepost)​

Versiones anteriores introdujeron un formato especial para llamadas connect() orientado a Redux, pero existen muchos otros usos de funciones llamadas connect que no deben formatearse así. Como la mayoría de estos casos corresponden a métodos connect, ahora evitamos aplicar composición funcional a llamadas como foo.connect().

// Input
app.connect("activate", async () => {
  await data.load();
  win.show_all();
});
const ConnectedComponent = connect(
  bar,
  baz
)(foo);

// Output (Prettier 1.15)
app.connect(
  "activate",
  async () => {
    await data.load();
    win.show_all();
  }
);
const ConnectedComponent = connect(
  bar,
  baz
)(foo);

// Output (Prettier 1.16)
app.connect("activate", async () => {
  await data.load();
  win.show_all();
});
const ConnectedComponent = connect(
  bar,
  baz
)(foo);

Soporte para métodos privados de clases (#5637 por @existentialism)​

// Input
class Hello {
  #world() {}
}

// Output (Prettier 1.15)
// SyntaxError

// Output (Prettier 1.16)
class Hello {
  #world() {}
}

Indentación correcta para expresiones en plantillas raíz (#5607 por @ikatyang)​

// Input
if (a) {
  return `
hello
${foo({
  bar,
  baz
})}
world
`;
}

// Output (Prettier 1.15)
if (a) {
  return `
hello
${foo({
    bar,
    baz
  })}
world
`;
}

// Output (Prettier 1.16)
if (a) {
  return `
hello
${foo({
  bar,
  baz
})}
world
`;
}

Eliminación de saltos de línea innecesarios en literales de plantilla HTML (#5771 por @ikatyang)​

// Input
function HelloWorld() {
  return html`
    <h3>Bar List</h3>
    ${bars.map(bar => html`
       <p>${bar}</p>
    `)}
  `;
}

// Output (Prettier 1.15)
function HelloWorld() {
  return html`
    <h3>Bar List</h3>
    ${
      bars.map(
        bar => html`
          <p>${bar}</p>
        `
      )
    }
  `;
}

// Output (Prettier 1.16)
function HelloWorld() {
  return html`
    <h3>Bar List</h3>
    ${bars.map(
      bar => html`
        <p>${bar}</p>
      `
    )}
  `;
}

TypeScript/Flow​

Reconocimiento correcto de plantillas /* HTML */ (#5658 por @ikatyang)​

El soporte agregado para formateo de literales de plantilla HTML mediante la pseudoetiqueta /* HTML */ en Prettier 1.15 solo funcionaba en JavaScript debido a un error. Esta versión soluciona el problema.

CSS​

Corrección de salida rota en listas causada por comentarios (#5710 por @jsnajdr)​

// Input
$my-list2:
  a // a
  b
  c;

// Output (Prettier 1.15)
$my-list2: a// a
  bc;

// Output (Prettier 1.16)
$my-list2: a // a
  b c;

Manejo correcto de barras invertidas (#5597 por @sh7dm)​

// Input
.figcaption {
    .margin-top-1\/2;
    .large\:none;
}

// Output (Prettier 1.15)
.figcaption {
  .margin-top-1\ / 2;
  .large\: none;
}

// Output (Prettier 1.16)
.figcaption {
  .margin-top-1\/2;
  .large\: none;
}

MDX​

Manejo correcto de HTML inline (#5704 por @ikatyang)​

<!-- Input -->
| Column 1 | Column 2 |
|---|---|
| Text | <Hello>Text</Hello> |

<!-- Output (Prettier 1.15) -->
<!-- SyntaxError -->

<!-- Output (Prettier 1.16) -->
| Column 1 | Column 2            |
| -------- | ------------------- |
| Text     | <Hello>Text</Hello> |

HTML​

Formateo de scripts con tipo "application/ld+json" (#5642 por @ikatyang)​

<!-- Input -->
<script type="application/ld+json">
  {   "json":true  }
</script>

<!-- Output (Prettier 1.15) -->
<script type="application/ld+json">
  {   "json":true  }
</script>

<!-- Output (Prettier 1.16) -->
<script type="application/ld+json">
  { "json": true }
</script>

Tratar archivos .mjml como HTML (#5505 por @n1ru4l)​

MJML es un lenguaje de marcado que usa sintaxis idéntica a HTML. Añadimos la extensión .mjml a la lista de extensiones reconocidas como HTML para que Prettier pueda formatearlos.

Comillas inteligentes para atributos (#5590 por @ikatyang)​

Anteriormente, las comillas en valores de atributos HTML siempre eran dobles. Para mejorar la legibilidad, ahora usamos el tipo de comilla que minimice los caracteres de escape necesarios, igual que hacemos con otras cadenas.

<!-- Input -->
<div x='123"456'></div>
<div x="123'456"></div>

<!-- Output (Prettier 1.15) -->
<div x="123&quot;456"></div>
<div x="123'456"></div>

<!-- Output (Prettier 1.16) -->
<div x='123"456'></div>
<div x="123'456"></div>

Vue​

Los nombres de etiqueta distinguen mayúsculas y minúsculas (#5606 por @ikatyang)​

Anteriormente, convertíamos los nombres de etiquetas a minúsculas antes de consultar su definición durante el análisis, lo que hacía que el componente <Input> se reconociera como un elemento nativo <input>. Esto producía un error de sintaxis al encontrar </Input>, ya que <input> es un elemento vacío (void) que no puede tener etiqueta de cierre. Hemos corregido este problema en la versión 1.16.

<!-- Input -->
<template>
  <Input></Input>
</template>

<!-- Output (Prettier 1.15) -->
<!-- SyntaxError -->

<!-- Output (Prettier 1.16) -->
<template>
  <Input></Input>
</template>

Vue/Angular​

Agregar paréntesis para evitar }} inesperados en interpolaciones (#5657 por @ikatyang)​

}} no puede usarse en una interpolación porque se interpretaría como su cierre. Prettier 1.15 a veces generaba código que violaba esta regla. Prettier 1.16 ahora añade paréntesis para evitar que aparezca }} dentro de interpolaciones.

<!-- Input -->
<p>{{ foo({ bar: {} }) }}</p>

<!-- First Output (Prettier 1.15, --no-bracket-spacing) -->
<p>{{ foo({bar: {}}) }}</p>

<!-- Second Output (Prettier 1.15, --no-bracket-spacing) -->
<!-- SyntaxError -->

<!-- Output (Prettier 1.16, --no-bracket-spacing) -->
<p>{{ foo({bar: ({})}) }}</p>