Autofix for eslint-plugin-import: group export syntaxes at the bottom using Bash

Why? 🤔

You're dealing with thousands of js/ts files with these syntaxes and just want to make things prettier by putting exports at the bottom but there's no autofix from the library yet

Rules to fix

for mixed export list + an export default: check ./examples/src/mixedExports*.js or create your own mixed export syntaxes based off of Before section to test

• import/exports-last
• import/no-anonymous-default-export
• import/group-exports
• make aggregating modules valid in group-exports
• import/prefer-default-export

Before

• export const foo = 'foo';
  export const bar = 'bar';
  export const fizz = 'fizz\n';
  export const buzz = 'buzz';

• export default () => { // file name: HelloComponent.js
    console.log('Hello World!');
  };

• import foo from './foo';
  
  export { foo };

• import { one, two, three } from './number';
  
  export default { // file name: numbers.js
    1: one,
    2: two,
    3: three,
  };

• export { default as HelloWorld } from '../HelloWorld';
  export { default as FooBar } from '../../FooBar';
  export { default as FizzBuzz } from '../../../FizzBuzz';

• export const singleFoo = 'singleFoo';

• export { default as HelloWorld } from '../HelloWorld';

• export { default } from './SingleFoo'

• export default async () => { // file name: exportDefaultAnonymousAsync.js
    console.log('Default Export Async');
    await getComments();
    console.log('Default Export Async');
  };

• import SingleFoo from './SingleFoo';
  
  export const foo = 'foo';
  export const bar = 'bar';
  export const fizz = 'fizz\n';
  export const buzz = 'buzz';
  
  export default SingleFoo;

• export default params => { // file name: exportDefaultAnonymousSingleParam.js
    console.log(params);
  };

• export default payload => ({ // file name: exportDefaultAnonSingleParam2.js
    type: 'UPDATE_FOO',
    payload,
  });

• export function foo() {
    console.log('hello');
  };
  
  export function bar(hello = '') {
    console.log(hello);
  };
  
  export function fizz(
    hello = '',
    world = ''
  ) {
    console.log(`${hello} ${world}`);
  };
  
  export function buzz({
    hello = '',
    world = ''
  }) {
    console.log(`${hello} ${world}`);
  };

• export default function Foo() {
    console.log('hello');
  };

• export default function () { // file name: exportDefaultUnnamedFunction.js
    console.log('hello');
  };

After

Usage / Testing

current supported files [.js,jsx,ts,tsx]

for a single file

./export_fix.sh ./examples/src/exportNamed.js

sanitize supported file

./export_fix.sh ./examples/src/sampleDir/mixedExports1.js

sanitize file with mixed syntaxes of export

./export_fix.sh ./examples/src/sampleDir/exportNamedSingle.js

sanitize file with single named export to prefer default

for all files in a directory

./export_fix.sh ./examples/src/sampleDir

sanitize supported files available in specified directory

for all files and all subdirectories in a directory

./export_fix.sh ./examples/src

sanitize supported files and subdirectories available in src

reset script

• to reset examples/src/* files after overwriting: ./reset.sh
• just don't mess with the files from examples/backup/* 🤷

Notes

• will skip any unsupported files or empty directories
• will notify if a file is already sanitized with the given syntaxes in Before section
• supports parsing codebase with lowercase/uppercase const/function naming convention
• supports parsing codebase with or without semicolon (by default, generated bottom export will have a semicolon)
• supports parsing codebase with single quotes or double quotes
• to avoid infinite loop, do not call ./export_fix.sh .
• if permission denied: chmod 777 ./export_fix.sh which is the only file you need for your codebase located in the root
• if available, execute your eslint then prettier in your codebase after running the script for additional 💅

For enhancement

• export default SomeLibrary.configure({ foo, bar, fizz, buzz, })
• export type fooType = string
• export interface IFoo { foo: string }

• // merge
  export { getFoo } from './getFoo';
  export { buzz } from './buzz';

• // Fix duplicate
  import Fizz from './Fizz';
  
  export default Fizz;
  export { Fizz };

• // merge
  import foo from './foo';
  import bar from './bar';
  import Fizz from './Fizz';
  
  export { foo };
  export { bar, Fizz };

• export async function foo() {
    ...
  }

Sample - execute script for all files and subdirectories

unsanitized

sanitized