ESLint 8.53 Flat Config + prettier + typescript-eslint

@aqzhyi _ esling-config _ eslint.config.js + prettier

import antfu from '@antfu/eslint-config'
import react from 'eslint-plugin-react'
import reactHooks from 'eslint-plugin-react-hooks'
import valtio from 'eslint-plugin-valtio'
import jest from 'eslint-plugin-jest'
import jestDom from 'eslint-plugin-jest-dom'
import testingLibrary from 'eslint-plugin-testing-library'
import nextjs from '@next/eslint-plugin-next'
import ts from '@typescript-eslint/eslint-plugin'
import tsParser from '@typescript-eslint/parser'
import { mapKeys } from 'lodash-es'
import asyncRules from './rules/async.mjs'
import tsRules from './rules/typescript.mjs'

// @ts-check
const root = import.meta.url.replace(/\/[\d\w-\@_\.]+?\/eslint-config\/eslint.config[\s\S]+/i, '/')

// @ts-check
export default antfu(
  {
    jsonc: false,
    typescript: true,
    markdown: true,
    yaml: false,
    stylistic: false,
    ignores: ['**/*.scss.d.ts', '**/types/eslint.config.d.ts'],
  },
  {
    plugins: { ts, '@typescript-eslint': ts },
    languageOptions: {
      parser: tsParser,
      parserOptions: {
        project: true,
        tsconfigRootDir: root,
      },
    },
    files: ['**/*.{tsx,ts,cjs,mjs}', '**/*.{tsx,ts,cjs,mjs}'],
    rules: {
      ...mapKeys(
        {
          ...asyncRules,
          ...tsRules,
          ...ts.configs.recommended.rules,
          ...ts.configs['recommended-type-checked'].rules,
          ...ts.configs['recommended-requiring-type-checking'].rules,
        },
        (value, key) => key.replace(`@typescript-eslint`, 'ts'),
      ),

      /** 此風格交給開發者自行決定 */
      curly: 'off',

      /** 避免 console.log 留上去 production */
      'no-console': ['error', { allow: ['info', 'warn', 'error'] }],

      /** Warn: 方便 debug 之用；但不可以推上 git */
      'no-unreachable': 'warn',

      /** Off: 我須要它留著，方便快速檢視可用的 props */
      'unused-imports/no-unused-vars': 'off',
      /** Off: 我須要它留著，方便快速檢視可用的 props */
      'ts/no-unused-vars': 'off',
      /**
       * @example
       *   // { allowString: true, allowNullableString: true }
       *   // lint pass
       *   const foo: null | string = ''
       *   if (!foo) return
       */
      'ts/strict-boolean-expressions': ['error', { allowString: true, allowNullableString: true }],
    },
  },
  {
    files: ['**/*.test.{tsx,ts}', '**/*.spec.{tsx,ts}'],
    plugins: { jest, 'jest-dom': jestDom, 'testing-library': testingLibrary },
    rules: {
      ...jest.configs.recommended.rules,
      ...jestDom.configs.recommended.rules,
      ...testingLibrary.configs.dom,
      ...testingLibrary.configs.react,
    },
  },
  {
    plugins: { '@next/next': nextjs },
    rules: {
      ...nextjs.configs.recommended.rules,

      /** 以下 'off' 當處於 app dir 時 */
      '@next/next/no-html-link-for-pages': 'off',
      '@next/next/no-head-element': 'off',
    },
  },
  {
    plugins: { react },
    settings: {
      react: { version: 'detect' },
    },
    rules: {
      ...react.configs.recommended.rules,
      ...react.configs['jsx-runtime'].rules,

      /**
       * `ignore: ['css']`: 如果你確實有安裝 emotionjs，那麼實際上 ComponentType 預期應該會有 css 這個 props
       *
       * See
       * https://github.com/emotion-js/emotion/blob/5fa2d54a9bbd8361e2561f876f1d0b81d0b6bcd7/docs/eslint-plugin-react.mdx
       */
      'react/no-unknown-property': ['error', { ignore: ['css'] }],
    },
  },
  {
    plugins: { 'react-hooks': reactHooks },
    rules: { ...reactHooks.configs.recommended.rules },
  },
  {
    plugins: { valtio },
    rules: { ...valtio.configs.recommended.rules },
  },
)