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

JavaScript

Prettier は .editorconfig ファイルの一部の設定を読み込めるけど、
それがとある DefinitelyTyped の pre-commit で機能せず、レビュイーの方にご迷惑をかけたので確認した。
(現在、DefinitelyTyped で該当の現象は修正されている)

結論

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

検証

Prettier をインストールし .editorconfig を作成する。

shell

yarn add -D prettier
touch .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"
};

原因

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

src/index.js

const Hoge = {
  foo: "bar",
  fuga: "piyo"
};

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

このライブラリは、内部的に Prettier を API として呼び出している。
その際、resolveConfig 内で Prettier の設定をしているけど…。

該当の部分

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自体は執筆時点からメンテが止まっているので、修正するなら Folk したものを使うしかない)

参考

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

Share

カテゴリー

年月別

grgr-dkrkのアイコン

grgr-dkrk

Web エンジニア新人です。