✨ Auto-fixable import sorting rules for ESLint

ESLint config snippet for sorting imports automatically on file save. Works well with Next.js

over 1 year ago

The pretty much standard way of sorting imports in JavaScript:

  • 3rd party imports first
  • then local default exports
  • and then local exports

And here's the snippet that sorts them in this exact order and satisfies my needs completely!

$ npm i --save-dev eslint-plugin-import  
  
# or    
  
$ yarn add -D eslint-plugin-import
// .eslintrc.js  
const fs = require('fs')  
  
const ignoredSortingDirectories = ['.git', '.next', '.vscode', 'node_modules']  
  
module.exports = {  
  /// ... some other configurations  
  rules: {  
    // ... your rules  
    'sort-imports': ['error', { ignoreCase: true, ignoreDeclarationSort: true }],  
    'import/order': [  
      1,   
      {  
        groups: ['external', 'builtin', 'internal', 'sibling', 'parent', 'index'],  
        pathGroups: [  
          ...getDirectoriesToSort().map((singleDir) => ({ pattern: `${singleDir}/**`, group: 'internal' })),  
          { pattern: 'env', group: 'internal' },  
          { pattern: 'theme', group: 'internal' },  
          { pattern: 'public/**', group: 'internal', position: 'after' },  
        ],  
        pathGroupsExcludedImportTypes: ['internal'],  
        alphabetize: {  
          order: 'asc',  
          caseInsensitive: true,  
        },  
      },  
    ],  
    // ... your rules  
  },  
}  
  
function getDirectoriesToSort() {  
  return getDirectories(process.cwd()).filter((f) => !ignoredSortingDirectories.includes(f))  
}  
  
function getDirectories(path) {  
  return fs.readdirSync(path).filter(function (file) {  
    return fs.statSync(path + '/' + file).isDirectory()  
  })  
}
Similar blog posts
⛔ How to ban imports with ESLint
(3 min read)
👨‍⚖️ How to assign ref in forwardRef component
(4 min read)
🌟 Automate React Component Smoke Testing with Storybook
(3 min read)
Bart Stefański

A self-taught full-stack software engineer based in Poland, working in Next.js & Nest.js Stack. Passionate about Clean Code, Object-Oriented Architecture and fast web.

GithubGoodreadsTwitter