Monorepo Alpha linting setup is kinda borked

[davestewart]

Just some feedback on running the monorepo linting setup:

• the root eslint config file is the older eslint.rc format (also, I don't think it needs to be here; Turbo seems to run all the linting)
• the package eslint configs are the newer flat-file format
• the root eslint points to a non-existent library.js file
• the package base file imports the recommended, prettier and tseslint packages
• the react and next packages both import and merge base, then also import and re-merge the same packages mentioned above (this nukes any user rules you add to the end of base)
• the next package mainly repeats the same setup in the react package (where it could potentially reuse some portions of it?)
• imports in the next package are the same other than one file, but ordered differently, so you can't tell to start with, which makes it more confusing to maintain
• file comparison / checking is annoying as there's no naming pattern, and package.json sits in the middle (could solve by moving to src especially as package.json has named exports

I'm no React or linting expert (Vue guy jumping into React development) but this does not feel at all like it's had the same TLC as the rest of the framework; in fact, quite the opposite!

[davestewart]

FWIW, this was my final – simplified and deduped – setup:

1. remove the root eslint.rc file

2. refactor eslint-config/base.js and the dupes in react and next files to eslint-config/src/base.js:

import js from '@eslint/js'
import eslintConfigPrettier from 'eslint-config-prettier'
import onlyWarn from 'eslint-plugin-only-warn'
import turboPlugin from 'eslint-plugin-turbo'
import tseslint from 'typescript-eslint'

/**
 * A shared ESLint configuration for the repository.
 *
 * @type {import('eslint').Linter.Config}
 * */
export const baseConfig = [
  js.configs.recommended,
  eslintConfigPrettier,
  ...tseslint.configs.recommended,
  {
    files: [
      '**/*.{js,mjs,cjs,jsx,ts,tsx,mts,cts}',
      '**/.eslintrc.{js,cjs,mjs}',
    ],
    plugins: {
      turbo: turboPlugin,
    },
    rules: {
      'turbo/no-undeclared-env-vars': 'warn',
      'brace-style': ['warn', 'stroustrup'],
      'comma-dangle': ['warn', 'always-multiline'],
      'quotes': ['warn', 'single'],
      'semi': ['warn', 'never'],
      'multiline-ternary': ['error', 'always-multiline'],
    },
  },
  {
    plugins: {
      onlyWarn,
    },
  },
  {
    ignores: [
      'dist/**',
    ],
  },
]

3. refactor and consolidate eslint-config/next.js and eslint-config/react-internal.js to eslint-config/src/react.js:

import pluginReact from 'eslint-plugin-react'
import pluginReactHooks from 'eslint-plugin-react-hooks'
import pluginNext from '@next/eslint-plugin-next'
import globals from 'globals'

import { baseConfig } from './base.js'

const reactHooksConfig = {
  plugins: {
    'react-hooks': pluginReactHooks,
  },
  settings: { react: { version: 'detect' } },
  rules: {
    ...pluginReactHooks.configs.recommended.rules,
    // React scope no longer necessary with new JSX transform.
    'react/react-in-jsx-scope': 'off',
    'react/prop-types': 'off',
  },
}

/**
 * A custom ESLint configuration for libraries that use React.
 * Applies base config, React config, then adds both service worker 
 * and browser globals, and finally React hooks rules.
 *
 * @type {import("eslint").Linter.Config}
 */
export const reactConfig = [
  ...baseConfig,
  pluginReact.configs.flat.recommended,
  {
    languageOptions: {
      ...pluginReact.configs.flat.recommended.languageOptions,
      globals: {
        ...globals.serviceworker,
        ...globals.browser,
      },
    },
  },
  reactHooksConfig,
]

/**
 * A custom ESLint configuration for libraries that use Next.js.
 * Applies base config, React config with service worker globals only,
 * Next.js specific rules, and React hooks rules.
 *
 * @type {import("eslint").Linter.Config}
 */
export const nextConfig = [
  ...baseConfig,
  {
    ...pluginReact.configs.flat.recommended,
    languageOptions: {
      ...pluginReact.configs.flat.recommended.languageOptions,
      globals: {
        ...globals.serviceworker,
      },
    },
  },
  {
    plugins: {
      "@next/next": pluginNext,
    },
    rules: {
      ...pluginNext.configs.recommended.rules,
      ...pluginNext.configs["core-web-vitals"].rules,
    },
  },
  reactHooksConfig,
]

4. modify eslint-config/package.json exports to point at the new files:

{
  "exports": {
    "./base": "./src/base.js",
    "./react": "./src/react.js"
  },
}

5. modify packages/ui/eslint.config.js to point at the new react config:

import { reactConfig } from '@workspace/eslint-config/react'

/** @type {import("eslint").Linter.Config} */
export default reactConfig

6. modify apps/web/eslint.config.js to point at the new next config:

import { nextConfig } from '@workspace/eslint-config/react'

/** @type {import('eslint').Linter.Config} */
export default nextConfig

7. add a lint:fix script to the main package.json:

{
  "scripts": {
    "lint:fix": "turbo lint -- --fix",
  },
}

Note

For some reason, pnpm lint:fix still won't lint the root files in web.

Improvements welcome (as mentioned, I'm not a react guy!) and I'll probably look to migrate this to Standard JS if possible (it's currently not compatible with ESLint 9).

Or, maybe there are better off the shelf (from Next / React) linting setups which could be used here.

[davestewart]

Also, it seems that the workspaces use .mjs for both next.config.mjs and postcss.config.mjs which is not necessary as the package.json type is module. Just more messiness, really.

[Kevinminh]

Hi, i am still having problems with the linting for shadcn ui monorepo.