javascriptreactjstypescripteslintjavascript-import

Enable linter rules to use `useEffect` instead of `React.useEffect` (named export instead of full export)

In our codebase we always wanna use

import { useEffect } from 'react';

instead of

import React from 'react';
// use in code as `React.useEffect`

Is it possible to achieve it with eslint longer rules? If yes then how?

Are there existing solutions? And if there isn't existing solution then how to write a custom one?

We wanna use such rules only for the react dependency.

Solution

  • use no-restricted-imports to limit the import of React (default):

    "no-restricted-imports": [
  "error",
  {
    "paths": [
      {
        "name": "react",
        "importNames": ["default"],
        // "message": "some messages for who import 'React' accidentally"
      }
    ]
  }
],