Prettierで特定のコードをignoreする

小ネタ

Prettierの整形対象にしたくないコードを指定する

Prettierは近年注目のフロント向けコードフォーマッタ。

エディタ統合の自動整形やprecommit hookでの整形はとても重宝するが
特定のコードブロックに関しては可読性を上げるために整形対象外にしたいケースもある。

そんな時は「// prettier-ignore」コメントを使うといい。

matrix(
  1, 0, 0,
  0, 1, 0,
  0, 0, 1
)

// prettier-ignore
matrix(
  1, 0, 0,
  0, 1, 0,
  0, 0, 1
)

↓Prettier実行

matrix(1, 0, 0, 0, 1, 0, 0, 0, 1);

// prettier-ignore
matrix(
  1, 0, 0,
  0, 1, 0,
  0, 0, 1

こんな具合に「prettier-ignore」コメントの直後にあるコードのみignoreされる。
（関数、変数、コードブロックの単位）

react-routerのルーティングの一覧性を損ないたくない時に使えるなとおもった。

// prettier-ignore
export default (
  <App>
    <Switch>
      <Route exact path="/" component={Home}/>
      <Route exact path="/about" component={About}/>
      {/* ↓が改行されずにすむ */}
      <Route exact path="/hello-long-length-path-page" component={HelloLongLengthPathPage}/>
      <Route exact path="/login" component={Login}/>
      ...
    </Switch>
  </App>
)

参考:
https://prettier.io/docs/en/ignore.html

おためし用リポジトリ:
https://github.com/kashira2339/prettier-demo