js-import-fixer

A script that cleans up javascript / typescript duplicates or unused imports in a deterministic way.

• JS Import Fixer - Official Home Page
• JS Import Fixer - Github Page

Background Information

• There are times where you worked on an existing TypeScript / JavaScript code base with a lot of unused imports. It causes eslint error to show a lot of warning. Removing the unused imports by hands is just not feasible.
• Another area is that people tend to have no convention when it comes to importing library. Sometimes we imported external libraries first, then we imported local modules.

That’s why I came up with this tool to clean up unused imports and organize imports in a way that are more deterministic.

Features

• Will look at the JavaScript / TypeScript code for import usages. And remove unused imports.
• Will also fix duplicate imports issue. Say if you have multiple lines of import react from 'react';. So it will consolidate that into a single import and will allow your script to compile and run.
• There is an option --groupImport that will consolidate multiple lines of imports from the same library into a single one.

Requirement

• Node 12+ (tested with Node 14.18.3)

How to use?

Run this script in your project root.

Run it directly

npx import-fixer

Run it as part of preformat in package.json

It’s best to use this script as part of your preformat script in node / frontend project

Say you if you have a format script like this

...
"format": "npx prettier --config ./.prettierrc --write **/*.{ts,tsx,js,jsx,scss,yml,html} *.{json,MD}",
...

Then it will become

...
"preformat": "npx import-fixer --groupImport",
"format": "npx prettier --config ./.prettierrc --write **/*.{ts,tsx,js,jsx,scss,yml,html} *.{json,MD}",
...

Flags

--groupImport

• --groupImport : to group imports from the same library into a single line.

When this flag is turned on, the following import lines

import { databaseActionScripts as RmdbDatabaseActionScripts } from 'src/scripts/rmdb';
import { tableActionScripts as RmdbTableActionScripts } from 'src/scripts/rmdb';

Will become

import {
  databaseActionScripts as RmdbDatabaseActionScripts,
  tableActionScripts as RmdbTableActionScripts,
} from 'src/scripts/rmdb';

When this flag is turned off (by default), imports will be separated into each individual line. So the following imports

import {
  databaseActionScripts as RmdbDatabaseActionScripts,
  tableActionScripts as RmdbTableActionScripts,
} from 'src/scripts/rmdb';

will become

import { databaseActionScripts as RmdbDatabaseActionScripts } from 'src/scripts/rmdb';
import { tableActionScripts as RmdbTableActionScripts } from 'src/scripts/rmdb';

--filter

• --filter : to perform the import changes on a set of files with matching filter (aka --filter=App.tsx). This param is a CSV, so if you have multiple files, you can add , in between them, for example something like this --filter=App.tsx,Header.tsx

The full command will look something like this

npx import-fixer --filter=App.tsx,Header.tsx

--ignored

• --ignored: similar to --filter but used to ignore certain files from being formatted --ignored=__mocks__

The full command will look something like this

npx import-fixer --ignored=__mocks__

--aggressive

• --aggressive : when turned on, the script will be more aggressive when checking for usages of the imports. By default this flag is turned off.

The full command will look something like this

npx import-fixer --aggressive

--transformRelativeImport

• --transformRelativeImport : when turned on, the script will transform relative imports such as import IDataAdapter from './IDataAdapter'; in a file to an absolute import such as import IDataAdapter from 'commons/adapters/IDataAdapter';

• You can add your own path prefix, by default, we will resolve the full path and add this path prefix to the front of the file.

For these examples, we will consider the original import line as followed

• The minimal command will be like this.

npx import-fixer --transformRelativeImport

• You can also pass in the path prefix for the resolved absolute import paths using --transformRelativeImport="<pathPrefix>".

npx import-fixer --transformRelativeImport="src/"

Refer to this table for more information:

Option	Original	After Transformation
--transformRelativeImport	import IDataAdapter from './IDataAdapter';	import IDataAdapter from 'commons/adapters/IDataAdapter';
--transformRelativeImport="src"	import IDataAdapter from './IDataAdapter';	import IDataAdapter from 'src/commons/adapters/IDataAdapter';

--importQuote

• --importQuote: can be used to set the import line quote. So it’s either double quote or single quote. The default behavior is using single quote.

• The minimal command will look like this.

npx import-fixer --importQuote=single

Refer to this table for more information:

Option	Output
--importQuote=single (Default)	import { SqluiCore } from 'typings';
--importQuote=double	import { SqluiCore } from "typings";

--parseLegacyImports

By default, we don’t parse legacy import lines (with require), ie. const fs = require('fs'). To enable this feature you need to pass in --parseLegacyImports parameter.

How to use this as a library?

The following code shows how to use this library programmatically.

npm install --save-dev import-fixer

const { fixImport } = require('import-fixer');

const actual = fixImport(
  'abc.js',
  `
import externalLib1 from 'externalLib1';
import {methodLib1} from 'externalLib1';
import {constant1, aliasMethodLib1 as myAliasMethod1, unUsedAliasMethod1 as unusedMethod1} from 'externalLib1';
import {aliasMethodLib1 as myAliasMethod1} from 'externalLib1';
import {unUsedAliasMethod1 as unusedMethod1} from 'externalLib1';
import externalLib2 from "externalLib2";
import {methodLib2, constant2} from "externalLib2";

var a1 = constant1;
methodLib1();
externalLib1();
myAliasMethod1();

var a2 = constant2;
var temp2 = externalLib2();
  `,
);

console.log(actual);

Limitations

• The script currently only supports import syntax, so if you have require syntax in your code base, it will skip those. In the future, I plan to combine the two and give users an option to consolidate the import as import or require syntax.
• The code that checks for usage of library uses contains, if your module contains a common name like Box / Button, there might be a false negative, so you might need to remove those manually.

TODO’s

• Potentially provides option to group imports (Using --groupImport).
• Run the script on a files with matching patterns (Using --filter).
• Added an option to do aggressive checks for import usages. This is an opt-in feature using --aggressive.
• Publish this package to npm registry.
• Make this package executable with npx (Using npx import-fixer).
• Respect the files in .gitignore and skip those files when running the script.
• Added an option to transform relative imports into absolute imports (Using --transformRelativeImport).
• Added an option to control what’s the output quote is in the import line. Either single quote or double quote. --importQuote
• Added an option to parse legacy import line with require (Using --parseLegacyImports)
• Maybe create a VS Code addon or a separate Electron standalone app that visualize the import transformation and allows user to fine tune the translation one by one.

Examples Run

I used this on my other project sqlui-native. You can refer to this Sample Pull Request with import-fix script run to see the detailed changes in action

Contributing?

If you are interested in contributing, you can refer to this doc to get started

• CONTRIBUTING.md