Elevate Your TypeScript Codebase with Automated Import Sorting

🚀 Sort Imports Like a Pro with ESLint

Hello, fellow developers! 👋

Have you ever opened a GitHub repository and been greeted by a chaotic block of imports? It can be frustrating to quickly identify dependencies when imports are scattered all over the place.

While working on one of my personal projects, I wanted a simple way to keep my imports clean and consistent without manually organizing them every time I added a new one.

The solution? eslint-plugin-import.

With just a few configurations, ESLint can automatically organize your imports, making your codebase easier to read and maintain.

---

✨ Why Sort Your Imports?

Keeping imports organized provides several benefits:

• 📖 Improves code readability
• 🔍 Makes dependencies easier to locate
• 🤝 Maintains consistency across your team
• 🚀 Reduces noise in pull requests
• ⚡ Eliminates manual import organization

---

📦 Step 1: Install the Plugin

Run the following command:

npm install eslint-plugin-import

---

⚙️ Step 2: Configure ESLint

If you're already using ESLint (Flat Config), add the following rules to your eslint.config.js:

// Import plugin recommended rules
...importPlugin.flatConfigs.recommended.rules,
...importPlugin.flatConfigs.typescript.rules,

// Resolver-dependent rules are disabled due to TS resolver incompatibility
'import/namespace': 'off',
'import/default': 'off',
'import/named': 'off',
'import/no-unresolved': 'off',

// Custom rules
'import/order': [
  'warn',
  {
    groups: [
      'builtin',
      'external',
      'internal',
      'parent',
      'sibling',
      'index',
      'object',
      'type',
    ],
    'newlines-between': 'always',
    alphabetize: {
      order: 'asc',
      caseInsensitive: true,
    },
  },
],

'import/no-duplicates': 'error',
'import/first': 'error',
'import/newline-after-import': 'error',
'import/no-cycle': 'warn',

This configuration:

• Groups imports by type
• Inserts blank lines between groups
• Sorts imports alphabetically
• Prevents duplicate imports
• Ensures imports stay at the top of the file
• Warns about circular dependencies

---

🔄 Step 3: Integrate with lint-staged

To automatically organize imports before every commit, add ESLint to your lint-staged configuration.

This ensures that every commit follows the same import ordering without requiring any manual effort.

---

✅ Step 4: Verify

Create a new commit or run ESLint on one of your files.

You should now see your imports automatically organized into clean, readable groups.

---

🎉 Result

Instead of messy imports like this:

import Button from '@/components/Button';
import axios from 'axios';
import React from 'react';
import { useUser } from '@/hooks/useUser';
import './styles.css';
import { useState } from 'react';

You'll get something much cleaner:

import React, { useState } from 'react';

import axios from 'axios';

import { useUser } from '@/hooks/useUser';
import Button from '@/components/Button';

import './styles.css';

---

💡 Final Thoughts

Import sorting might seem like a small improvement, but it's one of those habits that significantly improves code quality over time.

When every file follows the same structure, navigating the codebase becomes easier, pull requests become cleaner, and your team spends less time worrying about formatting.

Happy coding! 🚀

---

🔗 Connect with me

LinkedIn: https://www.linkedin.com/in/harish-kumar-418a47237/

GitHub: https://github.com/harish-20

If this article helped you, consider leaving a ❤️ and sharing it with other developers.