PrettierがEditorconfigを読まない時に確認すること

Prettierは.editorconfigファイルの一部の設定を読み込めるのですが、
それがとあるレポジトリのpre-commitで機能せず、レビュイーの方にご迷惑をかけたので確認してみました。

結論

CLIは自動で.editorconfigを読み込む
APIで呼び出す時はeditorconfig: trueの設定が必要

検証

Prettierをインストールしてみます。

shell
yarn add -D prettier

.editorconfigを設置します。
インデントのサイズを、Prettierデフォルトの2から4に変更したものです。

.editorconfig
root = true

[*]
indent_style = space
indent_size = 4

試すコードはこちらです。

src/index.js
const Hoge = {
    foo: 'bar',
  fuga: "piyo"
}

const Foo = {
  hoge: "fuga",
  bar: "baz"
}

Prettierにかけます。

shell
yarn prettier src/index.js

.editorconfigの設定が反映され、インデントは4スペースで統一されます。

src/index.js
const Hoge = {
    foo: "bar",
    fuga: "piyo"
};

const Foo = {
    hoge: "fuga",
    bar: "baz"
};

ESLintでやった場合も同様です。(configなどは省略)

shell
yarn add -D eslint eslint-config-prettier

やはり4スペースで整形されます。

src/index.js
const Hoge = {
    foo: "bar",
    fuga: "piyo"
};

const Foo = {
    hoge: "fuga",
    bar: "baz"
};

普通に使う分には問題なさそうです。

原因

該当のレポジトリと同じ環境を再現したところ、precise-commitsが原因でした。
従来の2スペースで整形されてしまっています。

src/index.js
const Hoge = {
  foo: "bar",
  fuga: "piyo"
};

const Foo = {
  hoge: "fuga",
  bar: "baz"
}

precise-commitshuskyと用いられるpre-commitのライブラリです。
Commit時、編集した部分に整形を反映させることができます。

このライブラリは、内部的にPrettierをAPIとして呼び出しています。
その際、resolveConfig内でいくつか設定できる項目があります。

該当の部分

precise-commits/src/precise-formatters/prettier.tsより
resolveConfig(modifiedFilePath: string): PrettierOptions | null {
  return {
    ...resolveConfig.sync(modifiedFilePath, {
      useCache: false,
    }),
    filepath: modifiedFilePath,
  };
},

CLIの時と違って、API経由で呼び出す場合はここにeditorconfig: trueの設定が必要です。

precise-commits/src/precise-formatters/prettier.tsより
resolveConfig(modifiedFilePath: string): PrettierOptions | null {
  return {
    ...resolveConfig.sync(modifiedFilePath, {
      useCache: false,
      editorconfig: true,    }),
    filepath: modifiedFilePath,
  };
},

これで.editorconfigの設定を反映させることができました。

src/index.js
const Hoge = {
    foo: "bar",
    fuga: "piyoa"
};

const Foo = {
    hoge: "fuga",
    bar: "baz"
};

もし、プラグイン経由で.editorconfigの設定が反映されない場合、上記のようにeditorconfig: trueが設定されているか確認してみると良さそうです。
(precise-commits自体は2年前からメンテが止まっているので、Forkしたのを使うしかなさそうです)

参考

https://prettier.io/docs/en/api.html#prettierresolveconfigfilepath-options