eslint-plugin-unused-imports

What is eslint-plugin-unused-imports?

The eslint-plugin-unused-imports npm package is designed to help developers identify and remove unused imports in their JavaScript or TypeScript code. This can help to keep codebases clean and reduce the size of the final bundle by eliminating unnecessary code.

What are eslint-plugin-unused-imports's main functionalities?

Removing unused variables

This feature automatically detects and removes variables that are imported but never used in the code. The code sample shows how an unused import would be identified.

/* eslint-disable no-unused-vars */
import { usedFunction, unusedFunction } from 'my-module';
usedFunction();

Removing unused imports

This feature detects and suggests the removal of entire import statements when none of the imported bindings are used. In the code sample, 'useState' would be identified as an unused import.

import React, { useState } from 'react';
const MyComponent = () => {
  return <div>Hello World</div>;
};
export default MyComponent;

Auto-fixing on save

The plugin can be configured to automatically fix issues on save, removing unused imports without manual intervention. The code sample shows the ESLint configuration to enable this feature.

// .eslintrc.js
module.exports = {
  plugins: ['unused-imports'],
  rules: {
    'unused-imports/no-unused-imports': 'error',
  },
};

Other packages similar to eslint-plugin-unused-imports

eslint-plugin-import

This package includes a variety of linting rules for import/export syntax, including a rule to detect unused imports. It is more comprehensive than eslint-plugin-unused-imports, offering a wider range of import-related linting features.

eslint-plugin-tree-shaking

This package provides linting rules to help ensure that tree shaking is effective by marking side-effectful module imports. It is similar in its goal to reduce bundle size but focuses more on the side effects rather than just unused imports.

README

eslint-plugin-unused-imports

Find and remove unused es6 modules

Typescript

If running typescript-eslint please use the -ts extension on your rules to make this also leverage type information (otherwise the autofixer will remove imports only used for type information).

Installation

You'll first need to install ESLint:

$ npm i eslint --save-dev

Next, install eslint-plugin-unused-imports:

$ npm install eslint-plugin-unused-imports --save-dev

Note: If you installed ESLint globally (using the -g flag) then you must also install eslint-plugin-unused-imports globally.

Usage

Add unused-imports to the plugins section of your .eslintrc configuration file. You can omit the eslint-plugin- prefix:

{
	"plugins": ["unused-imports"]
}

Then configure the rules you want to use under the rules section.

e.g.

{
	"rules": {
		"no-unused-vars": "off",
		"unused-imports/no-unused-imports": 2,
		"unused-imports/no-unused-vars": 1
	}
}

Supported Rules

• no-unused-imports
• no-unused-vars
• no-unused-imports-ts
• no-unused-vars-ts