PrettierがEditorconfigを読まない時に確認すること
JavaScriptPrettier は .editorconfig
ファイルの一部の設定を読み込めるけど、
それがとある DefinitelyTyped の pre-commit で機能せず、レビュイーの方にご迷惑をかけたので確認した。
(現在、DefinitelyTyped で該当の現象は修正されている)
結論
- CLI は自動で
.editorconfig
を読み込む - API から呼び出す時は
editorconfig: true
の設定が必要
検証
Prettier をインストールし .editorconfig
を作成する。
shell
npm install -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
npm run 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