Skip to content

ramirezjag00/group-exports-last-autofix

Folders and files

NameName
Last commit message
Last commit date

Latest commit

Β 

History

90 Commits
Β 
Β 
Β 
Β 
Β 
Β 
Β 
Β 
Β 
Β 
Β 
Β 

Repository files navigation

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

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

About

Semi-automatic fix for eslint-plug-import: group exports at the bottom of js,ts related files using bash

Topics

Resources

License

Stars

Watchers

Forks

Releases

No releases published

Packages

No packages published

Languages