Skip to main content

Command Palette

Search for a command to run...

Cómo hacer que Prettier no formatee código

Updated
2 min read

Prettier nos ayuda entre otras cosas a que nuestro código quede visualmente ordenado y homogéneo.

No obstante hay ocasiones donde puede que queramos que Prettier no formatee nuestro código.

Por ejemplo, imaginemos que tenemos un código en formato JSON que queremos meter dentro de un array:

[{
    "id": "5d86371f1efebc31def272e2",
    "about": "Ipsum duis incididunt ullamco tempor. Amet incididunt Lorem consequat labore culpa."
  },
  {
    "id": "5d86371f2343e37870b91ef1",
    "about": "Mollit officia ad excepteur anim proident incididunt eiusmod mollit consectetur id sit velit. Laborum ut magna officia qui laboris eiusmod do culpa."
  },
  {
    "id": "5d86371f25a058e5b1c8a65e",
    "about": "Laboris est duis eiusmod adipisicing cillum ut sit ea Lorem non laboris quis Lorem. Est culpa esse aliqua non labore dolor esse labore nulla mollit."
  }]

Prettier nos lo transformaría de tal modo que quitaría las comillas de las llaves, porque interpreta que son objetos de JavaScript:

[{
    id: "5d86371f1efebc31def272e2",
    about: "Ipsum duis incididunt ullamco tempor. Amet incididunt Lorem consequat labore culpa."
  },
  {
    id: "5d86371f2343e37870b91ef1",
    about: "Mollit officia ad excepteur anim proident incididunt eiusmod mollit consectetur id sit velit. Laborum ut magna officia qui laboris eiusmod do culpa."
  },
  {
    id: "5d86371f25a058e5b1c8a65e",
    about: "Laboris est duis eiusmod adipisicing cillum ut sit ea Lorem non laboris quis Lorem. Est culpa esse aliqua non labore dolor esse labore nulla mollit."
  }]

Para decirle a Prettier que no queremos que formatee esté código simplemente tenemos que agregar el comentario "prettier-ignore" encima del bloque de código en cuestión:

// prettier-ignore
[{
    "id": "5d86371f1efebc31def272e2",
    "about": "Ipsum duis incididunt ullamco tempor. Amet incididunt Lorem consequat labore culpa."
  },
  {
    "id": "5d86371f2343e37870b91ef1",
    "about": "Mollit officia ad excepteur anim proident incididunt eiusmod mollit consectetur id sit velit. Laborum ut magna officia qui laboris eiusmod do culpa."
  },
  {
    "id": "5d86371f25a058e5b1c8a65e",
    "about": "Laboris est duis eiusmod adipisicing cillum ut sit ea Lorem non laboris quis Lorem. Est culpa esse aliqua non labore dolor esse labore nulla mollit."
  }]

Así le haremos saber a Prettier que no debe formatear el código siguiente.