Wondering what’s next for npm?Check out our public roadmap! »

    import-reorder

    1.2.1 • Public • Published

    import-reorder

    Re-orders imports in JavaScript and TypeScript files, in-place. Usable with ES6-style import, as well as Node-style require. Handles multi-line imports, as well as interspersed comments.

    Important Notes

    • Requires use of semicolons.
    • Comments associated with imports must be placed above their associated imports, NOT to the right of their imports on the same line; otherwise, they will be associated with the next statement.

    What

    Alphabetizes members.

    import { fnB , fnC, fnA } from 'some-source';

    becomes:

    import { fnA, fnB , fnC } from 'some-source';

    Alphabetizes imports.

    import { fnD , fnF, fnE } from 'some-module';
    import { fnB , fnC, fnA } from 'some-source';

    becomes:

    import { fnA , fnB, fnC } from 'some-source';
    import { fnD , fnE, fnF } from 'some-module';

    Groups related imports.

    Example, grouped by /vendor/ and /homegrown/.

    import { fnD , fnF, fnE } from 'some-vendor-lib';
    import { ComponentX } from 'some-homegrown-module';
    import { fnB , fnC, fnA } from 'other-vendor-lib';
    import { ModuleY } from 'other-homegrown-module';

    becomes:

    import { fnA , fnB, fnC } from 'other-vendor-lib';
    import { fnD , fnE, fnF } from 'some-vendor-lib';
    
    import { ComponentX } from 'some-homegrown-module';
    import { ModuleY } from 'other-homegrown-module';

    Usage (WIP)

    Install

    npm install import-reorder

    Configure

    The CLI looks for a file named reorder.config.js in the current working directory. The config should export an object with the following shape (with examples):

    module.exports = {
      caseSensitive: false,
      defaultGroup: 'Components',
      fileTypes: /(\.js$|\.jsx$|\.ts$|\.tsx$)/,
      groups: {
        Vendor: /(react|mobx|vendor)/,
        Platform: /platform/,
        Toolkit: /toolkit/,
        'Models/Constants/Types': /(models|constants|types)/,
        Stores: /stores/,
        StdLib: /fs/,
        Config: /config/
      },
      ignoreFiles: /config/,
      importPattern: /(import.*from|const.*require)/,
      indentSpaces: 2,
      maxLineLength: 80,
      membersBegin: /(import \{|const \{)/
    };
    • caseSensitive: Whether to compare case sensitively. Defaults to false if unset (case insensitive).
    • defaultGroup: Name of the default group, should you want to label it.
    • fileTypes: The filetypes you want to read; regex of the file extensions.
    • groups: Defines the groups you want your imports to be in, groupName: /pattern/.
    • ignoreFiles: The files you want to ignore and not modify (for use cases like dynamic imports).
    • indentSpaces: Size of your indent.
    • maxLineLength: Length of your lines.

    CLI

    The CLI expects paths separated by \n if there are multiple, relative to the current working directory.

    echo 'fileA.js\nfileB.js\nAnotherDir/fileC.ts' | node_modules/import-reorder/reorder.js

    With staged files:

    git diff --name-only --cached | node_modules/import-reorder/reorder.js

    The above can be added as a git hook with tools like Husky. Example:

    // package.json
    {
      ...
      "husky": {
        "hooks": {
          "pre-commit": "git diff --name-only --cached | node_modules/import-reorder/reorder.js",
          ...
        }
      }
    }

    Module

    import-reorder exports the CLI as well as the ReOrderer class. The class requires as parameters a config object (see above) and the current working directory.

    const ReOrderer = require('./import-reorder');
    
    const config = require(`${process.cwd()}/reorder.config`);
    
    const reOrderer = new ReOrderer(config, process.cwd());
    
    const sortedText = reOrderer.processText(someBlobOfText);

    With the class, it's possible to make this tool part of more complex workflows.

    Install

    npm i import-reorder

    DownloadsWeekly Downloads

    1

    Version

    1.2.1

    License

    MIT

    Unpacked Size

    24 kB

    Total Files

    14

    Last publish

    Collaborators

    • avatar