explaingit

import-js/eslint-plugin-import

5,911JavaScriptAudience · developerComplexity · 2/5Setup · easy

TLDR

An ESLint plugin that catches broken imports before your app runs, missing files, non-existent named exports, unlisted packages, circular dependencies, and messy import ordering.

Mindmap

mindmap
  root((repo))
    Error Detection
      Typos in file paths
      Missing named exports
      Unlisted packages
    Code Organization
      Import ordering
      Blank line enforcement
      No duplicate imports
    Circular Dependencies
      File A imports B
      File B imports A
    Module Systems
      ES modules support
      CommonJS detection
      Mixed usage flagging
    Setup
      npm install
      ESLint config
      TypeScript preset
Click or tap to explore — scroll the page freely

Code map

Detail Auto

An interactive map of this repo's files and how they connect — its source is parsed live in your browser. Click Visualize to build it.

filefunction / class

Things people build with this

USE CASE 1

Catch broken file path imports and missing named exports during development before your app crashes at runtime.

USE CASE 2

Enforce a consistent, readable order for all import statements across your entire JavaScript or TypeScript project.

USE CASE 3

Prevent circular dependencies between files that can cause hard-to-debug loading errors.

USE CASE 4

Flag packages used in code but missing from your package.json dependencies list.

Tech stack

JavaScriptTypeScriptESLintNode.jsnpm

Getting it running

Difficulty · easy Time to first run · 5min

Install via npm, add plugin to your ESLint config, and extend the recommended preset. A TypeScript config preset is included for TS projects.

License type not mentioned in the explanation.

In plain English

eslint-plugin-import is an add-on for ESLint, a tool that checks JavaScript code for problems while you write it. This plugin focuses specifically on the import and export statements that modern JavaScript uses to share code between files. It adds a collection of rules that catch mistakes your editor would not otherwise flag, before those mistakes reach a running application. The most practical rules handle things like typos in file paths, importing a named export that does not actually exist in the source file, and importing packages that are not listed in your project's dependencies. These are errors that tend to appear only at runtime without this kind of static analysis, and they can be confusing to trace back to the source. A second category of rules covers code organization. The plugin can enforce a consistent order for import statements at the top of a file, require a blank line between third-party imports and your own project files, forbid duplicate imports of the same module, and prevent circular dependencies, where file A imports from file B while file B also imports from file A. There is also a group of rules about module system consistency. Projects that are migrating from older CommonJS-style code to modern ES module syntax can use these rules to flag mixed usage, such as a file that uses both require() and import at the same time. Installation involves adding the package from npm and referencing it in your ESLint configuration file. Most rules can be turned on or off individually, and the plugin ships with a recommended configuration that enables a sensible starting set. It works with JavaScript and TypeScript projects and includes a typescript configuration preset for TypeScript users.

Copy-paste prompts

Prompt 1
I'm using eslint-plugin-import in my JavaScript project. Write an ESLint config snippet that enables the recommended rules plus enforces import order with third-party packages before local files.
Prompt 2
Using eslint-plugin-import, how do I configure a rule that flags any circular dependency between my files? Show me the .eslintrc config entry and explain what the error output looks like.
Prompt 3
I'm migrating a Node.js project from require() to ES module import syntax. Which eslint-plugin-import rules should I enable to catch files that mix both styles, and how do I add them to my config?
Prompt 4
Set up eslint-plugin-import for a TypeScript project using the TypeScript preset. Show me the full ESLint flat config file including the parser and plugin setup.
Prompt 5
Explain what the 'import/no-extraneous-dependencies' rule in eslint-plugin-import does and give me an example of the error it catches, then show me how to allow devDependencies in test files.
Open on GitHub → Explain another repo

← import-js on gitmyhub — every repo by this author, as a profile.

Verify against the repo before relying on details.