no-restricted-imports: Allow only certain styles of imports (default / named / namespace)

What rule do you want to change?

no-restricted-imports

Does this change cause the rule to produce more or fewer warnings?

Same (the change is non-breaking)

How will the change be implemented? (New option, new default behavior, etc.)?

New option: importStyles: Array<"default" | "named" | "namespace">

Please provide some example code that this change will affect:

/*eslint no-restricted-imports: ["error", { paths: [{
    name: "react",
    importStyles: ["default", "named"],
    message: "Please use `import * as React from "react"` instead."
}]}]*/

// ❌
import React from "react";
import { useState } from "react";

// ✅
import * as React from "react";

What does the rule currently do for this code?

Currently, the rule does not help code collaborators to stick with only one specific style for imports for a given library. Thus, neighbouring files end up with a variety of import styles.

What will the rule do after it’s changed?

Codebase owners will be able to limit imports styles for specific libraries. Thus, the ecosystem can get prepared to an upcoming removal of the default export in React.

For context, see:

• https://twitter.com/dan_abramov/status/1308739731551858689
• https://epicreact.dev/importing-react-through-the-ages/

Are you willing to submit a pull request to implement this change?

Yep

[mdjermanovic]

Speaking of adding importStyle to "no-restricted-imports", which drawbacks do you see?

It looks to me more like a separate rule than an enhancement in no-restricted-imports, since it’s about style rather than restricting the use of certain modules. Curious to hear opinions from other team members.

An alternative to plugin rules is the core no-restricted-syntax rule, which can be configured for this case:

/* eslint no-restricted-syntax: ["error",
  {
      selector: "ImportDeclaration[source.value='react'] > :matches(ImportSpecifier, ImportDefaultSpecifier)",
      message: "Please use `import * as React from 'react'` instead."
  }
]*/

// ❌
import React from "react";
import { useState } from "react";

// ✅
import * as React_ from "react";

Online Demo

[nzakas]

Closing, as we won’t be moving forward with this issue.