Add eslint-plugin-material-ui

[oliviertassinari]

Summary 💡

This issue is mostly here as an opportunity to evaluate the opposite to have a linter for Material UI, Base UI, Pigment CSS, etc. This linter would very likely be implemented with eslint.

Examples 🌈

• https://www.npmjs.com/package/eslint-plugin-react-hooks
• https://nextjs.org/docs/app/building-your-application/configuring/eslint#eslint-plugin
• https://baseweb.design/getting-started/setup/#eslint-plugin-baseui
• https://tailwindcss.com/blog/introducing-linting-for-tailwindcss-intellisense

Motivation 🔦

Ideas:

1. When using the unitless API, error with all non-integer or half-integer usage: sx: { p: 1.4, m: 1.6 }

2. Warn when using an invalid import path, e.g. breaking https://mui.com/material-ui/guides/minimizing-bundle-size/

   • https://github.com/mui/mui-toolpad/pull/3417/files#r1572992179

3. styled(Box) should really be styled('div')

4. Providing render functions to slots, this is wrong:

  <TimePicker
    defaultValue={time}
    slots={{
      textField: (props) => (
        <TextField sx={{ width: 100 }} {...props} size='small' />
      ),
    }}
  />

Explored with a warning in #14748 but has false-positive, false-negative.

[lewxdev]

I've been looking for this for some time. Could MUI just swallow the existing plugins currently available so it can be maintained by the core team and have greater recognition from the community so we can help support as well:

• https://github.com/kajirikajiri/eslint-plugin-mui-path-imports
• https://www.npmjs.com/package/eslint-plugin-mui
• https://www.npmjs.com/package/@saswatb/eslint-plugin-sort-sx-prop
• https://www.npmjs.com/package/eslint-plugin-mui-unused-classes

[Janpot]

Other rules ideas:

• Some of the components have an accessibility section that we could potentially build eslint rules around.
• Error when an unstable component is passed to a slot.
• Error when styled is called within a component.
• Error when importing internal modules (e.g. @mui/utils or @mui/x-data-grid/internal)