🔧

WindowsでPrettierを使うと大量のファイルがgit diffに出る問題の解決方法

に公開
Git
Windows
Prettier
tech

問題

普段MacやLinuxで開発しているプロジェクトをWindowsで開いたら、Prettierを実行するたびに変更していないはずのファイルが大量にgit statusに表示されてしまいました。

$ git status
M src/App.tsx
M src/components/Button.tsx
M src/utils/index.ts
# ... 大量のファイルが変更として表示される

実際にdiffを見ると、内容は同じで改行コードだけが変わっています。

原因

この問題はOSによる改行コードの違いとPrettierのデフォルト設定の組み合わせで発生します。

OS 改行コード 表記
Mac/Linux LF \n
Windows CRLF \r\n

MacやLinuxで開発・コミットされたファイルはLFで保存されています。WindowsのGitはデフォルトでcore.autocrlf=trueに設定されていることが多く、チェックアウト時に作業ディレクトリのファイルをCRLFに変換します（コミット時には自動的にLFに戻すため、Git自体は差分として認識しません）。

一方、PrettierはデフォルトでendOfLine: "lf"が設定されており、フォーマット時にすべてのファイルをLFに変換します。

つまり、GitがCRLFに変換した作業ディレクトリのファイルを、Prettierが再びLFに変換してしまうため、Gitが「ファイルが変更された」と認識してしまいます。

解決方法

.prettierrcにendOfLine: "auto"を追加します。

{
  "semi": false,
  "singleQuote": true,
  "trailingComma": "es5",
  "tabWidth": 2,
  "printWidth": 100,
  "endOfLine": "auto"
}

"auto"を指定すると、Prettierは既存のファイルの改行コードを維持します。これにより、Gitが変換した改行コードがそのまま保持され、不要な差分が発生しなくなります。

まとめ

Windows + Prettier環境での改行コード問題は、.prettierrcに"endOfLine": "auto"を追加するのが最もシンプルな解決方法かと思います。

Discussion