eslint flat config 導入 with alloy
状況
eslint config は alloy を使っている
eslintrc => eslint.config に変更したい
スクリプト
// .eslintrc.js
module.exports = {
extends: ["alloy", "alloy/typescript"]
};
eslint.configにはextendsプロパティがなく
importして使う必要がある
こんな感じか?
import alloy from "eslint-config-alloy/base.js";
import alloyts from "eslint-config-alloy/typescript.js";
export default tseslint.config(
alloy.rules,
alloyts.rules
);
なんかうまくいかない
色々調べたけどよくわからなくて方針変更
別のconfigに乗り換える
今一番勢いがあるantfuを使うことにする
antfu
import antfu from "@antfu/eslint-config";
export default antfu(
{
type: "lib",
typescript: {
tsconfigPath: "tsconfig.json",
},
stylistic: {
indent: 2,
quotes: "double",
},
jsonc: false,
yaml: false,
ignores: ["dist/*", "build/*"],
},
{
// Without `files`, they are general rules for all files
rules: {
"style/semi": ["off"],
},
},
);
できたんだけど、気に入らない点が多い
prettierをやめて、eslintだけでフォーマットしようという方針らしいが
今までのprettierのデフォルト動作とあまりに違う動作なので見慣れないし、そんな簡単にprettier手放そうと思えないので、併用できるように試行錯誤していたが
という謎のエラーが出てきた
ビルドスクリプトが、メインスクリプトから参照を受けてないのが原因と思われるが
ついに解決方法が分からなかったので、再度方針変更
がんばってalloyでflat configify する
結果
内部のデータ構造なども見てやっとわかった
どうやらalloyは、flat config 対応していないので
flat configでは存在しないプロパティを所有していて、それが原因でエラーになっていたので
解決方法は下記の通り
import alloy from "eslint-config-alloy/base.js";
import alloyts from "eslint-config-alloy/typescript.js";
import eslint from "@eslint/js";
import tseslint from "typescript-eslint";
export default tseslint.config(
eslint.configs.recommended,
{ rules: alloy.rules },
...tseslint.configs.recommended,
{ rules: alloyts.rules },
);
reactの場合
import alloy from "eslint-config-alloy/base.js";
import alloyts from "eslint-config-alloy/typescript.js";
import eslint from "@eslint/js";
import tseslint from "typescript-eslint";
import react from "eslint-plugin-react";
export default tseslint.config(
eslint.configs.recommended,
{ rules: alloy.rules },
{
plugins: {
react,
},
rules: alloyreact.rules,
},
...tseslint.configs.recommended,
{ rules: alloyts.rules },
);