背景

prettier や .editorconfig を導入していた時、package-lock.json のインデントが npm のデフォルトの挙動の 2 から 4 に変わってしまい、npm install で再生成しても 4 のままだったのでちょっと調べた。

原因

When npm creates or updates package-lock.json, it will infer line endings and indentation from package.json so that the formatting of both files matches.

より、package-lock.json の改行とインデントは package.json から推論されて設定される。

今回、prettier で一度 package.json のインデントを 4 に書き換えてしまったため、package-lock.json のインデントも 4 に設定されたようである。

package.json のインデントを 2 に変更して再度 package-lock.json を生成したところ、2 に戻った。

対応

.prettierignore で package-lock.json は無視する。

.prettierignore

# Ignore package-lock.json
package-lock.json

もし、プロジェクトの基本のインデント幅が 4 なら prettier の設定で package.json の tabWidth を2にオーバーライドしておく。
参考：https://prettier.io/docs/en/configuration#configuration-overrides

prettier.config.js

    overrides: [
        files: "package.json",
        options: {
            tabWidth: 2
        }
    ]

prettier の 2017年ごろのIssue package.json 2+ spacing / tabs #3533 では、package.json は .prettierignore で無視したほうがよい、という議論もある。

→ npm バージョン 5 未満ではインデント幅 2 以外は使用できなかったり、npm/yarn 間でフォーマットが異なる、のこと。

前者は現在(2024年時点)では殆ど気にしなくて良さそう。後者については yarn の Issue Package.json indent #1091 で、package.json のインデントを検出し変更しないようにする修正が入っているため、こちらも気にしなくて良さそう。

package.json のインデント以外のスタイルを統一するためのにも、個人的には overrides のメリットが大きいと考える。