前提

ejsは、HTMLと<% %>を混在させて使用する。だが、Prettierはejsのフォーマットに対応していないため、htmlフォーマットをかける必要がある。

prettier --parser html --write src/**/*.ejs

ejsをhtmlフォーマットする問題

HTMLのみの記述であれば全く問題ない。ただ、<% %>記法が混在する時に問題が起きるケースがある。

下記のような1行の記述であれば問題ないのだが、

<%- include('components/_page-title); %>

下記のような複数行に渡る記述の場合に問題が起こる。

<%- 
  include('components/_page-title', {
    title: 'Multi-size item to choose by height and weight',
    description: 'Popular brand items at your ideal size',
    link: {
      url: 'https://example.com/',
      title: 'View all',
    },
  });
%>

上記を--parse htmlでフォーマットすると下記のようになってしまう。

<%- include('components/_page-title', { title: 'Multi-size item to choose by height and weight', description: 'Popular
brand items at your ideal size', link: { url: 'https://example.com/', title: 'View all', }, }); %>

記述を分断されて改行などが入ってしまうため、ejsとしてビルドができなくなってしまう。

回避策

を利用する。

ignoreコメントをejs記法の前に記述しても意味をなさない。そのため、下記のようにHTML要素をラップして記述する必要がある。

<!-- prettier-ignore -->
<div>
<%- 
  include('components/_page-title', {
    title: 'Multi-size item to choose by height and weight',
    description: 'Popular brand items at your ideal size',
    link: {
      url: 'https://example.com/',
      title: 'View all',
    },
  });
%>
</div>

こうすることでejsの記述をフォーマットさせることなく、--parse htmlを実行することができる。

課題

<%
const foo = 1;
let bar = foo;

bar = 9;
%>

こういったHTMLをラップする必要が皆無の場合、HTMLを記述する箇所がほぼ皆無だったため、.prettierignoreに記述して回避した。