Formatowanie HTML w JS za pomocą prettiera

General
1

Od wersji 1.15 prettier wspiera formatowanie HTML!

Najlepiej, że to nowe formatowanie działa nie tylko na pliki .html, ale także html zawarty w js-owych templatkach - coś, co bardzo nam się przyda do budowanych przez nas w JS statycznych stron.

Aby powiedzieć prettierowi, aby tany string template formatował jak HTML, trzeba dodać komentarz /* HTML */ tuż przed nim:

module.exports = () => `<div class="segment-1">
<div class="segment-1__body">
<div class="segment-1__body__bg-wrapper">
<img src="/assets/visual.png"
   srcset="/assets/visual@0.5.png  400w, /assets/visual.png 805w, /assets/visual@2x.png  1610w, /assets/visual@3x.png  2415w"
   sizes="(max-width: 66rem) 100vw, 66rem" alt=""  />
</div>
</div>
</div>
`;

module.exports = () => /* HTML */ `
  <div class="segment-1">
    <div class="segment-1__body">
      <div class="segment-1__body__bg-wrapper">
        <img
          src="/assets/visual.png"
          srcset="
            /assets/visual@0.5.png  400w,
            /assets/visual.png      805w,
            /assets/visual@2x.png  1610w,
            /assets/visual@3x.png  2415w
          "
          sizes="(max-width: 66rem) 100vw, 66rem"
          alt=""
        />
      </div>
    </div>
  </div>
`;

Od teraz stosujmy to we wszystkich projektach. Trzeba zaktualizować prettiera!

sudo npm install -g prettier
3 Likes