Auto-fixable import sorting rules for ESLint

26th November 2021

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()
})
}
Bart Stefański

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