Eslint: How Can I Restrict Certain Paths With "no-restricted-imports" But Allow Subpaths?

I am using Material-UI and I am switching all my imports from import { Button } from '@material-ui/core'; to import Button from '@material-ui/core/Button'; I wanted to add a lint

Solution 1:

I wanted to do the same thing with lodash.

For Treeshaking, I wanted to restrict

import {get} from 'lodash';

but allow

import get from 'lodash/get';

eslint config for this,

'no-restricted-imports': [
      'error',
      {
        paths: [
          {
            name: 'lodash',
            message:
              "Please use `import [package] from 'lodash/[package]'` instead."
          }
        ],
        patterns: ['!lodash/*']
      }
    ]

You can try similar for your package.

Solution 2:

You can use overrides for some filepaths

"no-restricted-imports": ["error", "@material-ui/core"],
"overrides": [{
  "files": [...],
  "rules: {
    "no-restricted-imports": ["error", {
      "patterns": ["@material-ui/core"]
    }]
  },
}],