Bart Stefanski
Published on

✨ Auto-fixable import sorting rules for ESLint

Authors

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()
  })
}