monorepo eslintのいい感じの設定方法見つけたい
とりあえずconfigを分割してみた
code:library.mjs
/** @type {import('@typescript-eslint/utils').TSESLint.FlatConfig.ConfigFile} */
export default [
...compat.extends('eslint-config-turbo'),
{
languageOptions: {
globals: {
...globals.node,
React: true,
JSX: true,
},
},
settings: {
'import/resolver': {
typescript: {
project,
},
},
},
ignores: [
// Ignore dotfiles
'.*.js',
'node_modules/',
'dist/',
],
},
];
code:eslint.config.mjs
// @ts-check
import js from '@eslint/js';
import prettier from 'eslint-config-prettier';
import tseslint from 'typescript-eslint';
import myjs from '@repo/eslint-config/library.mjs';
export default tseslint.config(
{
name: 'eslint/recomended',
...js.configs.recommended,
},
...myjs.map((config) => ({
name: 'custom/library',
...config,
})),
...tseslint.configs.recommended,
// nextjs,
{
name: 'prettier',
...prettier,
},
);
なんか適当にこんな感じで分割してこれをそのままrootのeslint.config.jsに読み込んでみたけど、配列になってるからinspectorで確認すると分裂して表示される。
https://gyazo.com/4174f97ebfaa6c8c234408f63095c5d5
微妙な点は、せっかくflat configにしているのにlibraryのconfigとしてまとまったものじゃなくて別のものになる。eslint-config-turboと他の設定はlibrary用みたいな感じにしたい。
それならeslint-config-turboを入れておいて、違うものを入れるみたいなのをconfigに直接書いた方がいい感ある。
なので、filesを指定して特定のものに当てたりとかの運用がめんどくさくてなんかコレジャナイ感。
この場合eslint-config-turboを他のプロジェクトでも対応したいってなった時にlibraryじゃないのにlibraryのものをimportしたりとかになりそう。
分割するのはちょっとベストプラクティスがわからない。
まとめるというか、一つのコンフィグをカスタムしてルールセット作るとかの方がいい?
あとは使う側でfilesで適用させたりさらにちゃうやつにして上書きして使う感じ?
eslint.recommendedとかを書いて適用するファイルを決めれば分けれるし確かにそれが良いんかもしれんなー。
何かカスタムしたいならそれように作ってもいいやろうけど、複数定義するってのがまずないはず。
どのプロジェクトに反映しているのかはパッとわかるようにしたいしな。
てかそもそも重ねがけしても別に問題ないんやったらつけといても良くない?
分けたいってなるのがいまいちわからん
でもarrayを展開してやる方法は別に悪い感じではないっぽいな。
code:js
...exampleConfigs.map(config => ({
...config,
})),
これでいいならlibrary.jsみたいなの作って分割して当てるファイルを決めてやるってのでもいいんかもねー。
一旦全部記載してまた考えようかな。
extendsとかちゃんとimportできない。
compat使ってもうまくいかねぇー。
ただ展開するだけじゃなくて、rulesの中に展開するとかも出来るからもうちょい考えてやった方が良い気がすんな
元々の設定の環境をimportしてパッケージごとの作ってみるか
vercel系のもimportしてrulesとかplugin入れれば良い?
settingsとかoutputされてるものをそのまま入れていけば良いんじゃない?
mapで適用してるそれがそうって感じでも良いのかな?
とりあえずやっぱこの記事みたいにextendsでなんかうまいこと出来へんかな。
typescript-eslintのextendsを使ってみた
code:js
{
name: 'hoge',
rules: {},
},
https://gyazo.com/933687c3af660e23a2e726fbe2669fb5
こんな感じで展開してくれてるけど、turboやprettierの名前まではつけてくれない。
これなら分割して名前つけてマージした方が個人的には好み。(他のignoresとかfilesとかは後から付与するでもいいきがする)
context.getScope is not a function
code:bash
TypeError: context.getScope is not a function
Occurred while linting playground/eslint.config.mjs:15
Rule: "react/no-unstable-nested-components"
なんかplugin側が対応してないとgetSopeは削除されたみたいなので使えないっぽい?