Zenn
Open3

eslint-plugin-consistent-default-export-name 試したログ

kondeikondei

next.jsの pages/hoge.tsx と相性が悪い
ファイル名がそのままパス名になるので基本的に小文字だが、中のComponentはReact的には大文字推奨のため
[slug].tsx なんかも扱いづらい

なので

.eslintrc.js
  overrides: [
    {
      files: ['src/pages/**/*'],
      rules: {
        'consistent-default-export-name/default-export-match-filename': 'off',
      },
    },
  ],

こんな風に無効化

kondeikondei

redux-toolkitのsliceのexample通りの書き方 と相性が悪い

slice.ts
import { createSlice, PayloadAction } from '@reduxjs/toolkit'

export interface CounterState {
  value: number
}

const initialState: CounterState = {
  value: 0,
}

export const counterSlice = createSlice({
...
})

export const { increment, decrement, incrementByAmount } = counterSlice.actions

export default counterSlice.reducer
store.ts
import { configureStore } from '@reduxjs/toolkit'
import counterReducer from ./slice.ts

export const store = configureStore({
  reducer: counterReducer,
})

export type RootState = ReturnType<typeof store.getState>
export type AppDispatch = typeof store.dispatch

これはslice.tsで

export const { increment, decrement, incrementByAmount } = counterSlice.actions
export default counterSlice.reducer

してるのが変であり、storeで名前衝突させたくないがためだけにdefault exportしてるだけに思える
sliceが色んなものの集合体である以上、reducerだけがdefault exportするべき主な処理であるとも思えないので、
いっそ全部objectで囲ってdefault exportするか、全部named exportすりゃ良いと思う

export default { ...counterSlice.actions, reducer: counterSlice.reducer };

とはいえexample通りのやり方から外れるのもデメリットがあるので、もちろんstoreだけ無効化してもいい