eslint-plugin-import-order-aesthetic

---

Forget alphabetical or chronological ordering, the future is in bringing aesthetic order to import and require statements 🌺

Installation

You'll first need to install ESLint:

npm i eslint --save-dev

Next, install eslint-plugin-import-order-aesthetic:

npm install eslint-plugin-import-order-aesthetic --save-dev

View the package on NPM

---

Requirements

As this rule is linting es6 modules, you are required to add es6 to the env object in your .eslintrc configuration.

You will also need to add sourceType: 'module' to the parserOptions object.

env: {
  es6: true
},
parserOptions: {
  sourceType: 'module'
}

---

Usage

Add import-order-aesthetic to the plugins section of your .eslintrc configuration file. You can omit the eslint-plugin- prefix:

{
  "plugins": ["import-order-aesthetic"]
}

Configure the rules you want to use under the rules section of your .eslintrc configuration file:

{
  "rules": {
    "import-order-aesthetic/order-import-by-length": ['error', { reverseOrder: true }],
    "import-order-aesthetic/order-require-by-length": ['error', { reverseOrder: false }],
  }
}

Example .eslintrc.js file:

module.exports = {
  env: {
    es6: true,
  },
  parserOptions: {
    parser: "babel-eslint",
    sourceType: "module",
  },
  plugins: ["import-order-aesthetic"],
  rules: {
    "import-order-aesthetic/order-import-by-length": [
      "error",
      { reverseOrder: true },
    ],
    "import-order-aesthetic/order-require-by-length": [
      "error",
      { reverseOrder: false },
    ],
  },
};

Using --fix with your eslint command will auto-arrange your import/require statements.

The fix functionality should work automatically with ESLint extensions in your code editor if you have it configured to fix on save etc.

---

Rules

order-import-by-length

Organise import statements aesthetically by ordering them according to line length and then alphabetically.

order-require-by-length

Organise require statements aesthetically by ordering them according to line length and then alphabetically.

---

Options

reverseOrder

The default behaviour of both rules rule is a 'top-heavy' order. Set reverseOrder to true to use a 'bottom-heavy' order.

• false (default)
• true

Usage:

"import-order-aesthetic/order-import-by-length": ['error', { reverseOrder: true }],

Default:

const c = require("testing");
const b = require("tester");
const a = require("test");
require("test");

Reversed:

require("test");
const a = require("test");
const b = require("tester");
const c = require("testing");

---

Issues

At the moment the two rules are interpreted separately so will assess import and require statements independently. If you mix these two in a single file they will be ordered as normal, but not in relation to each other.

This is on the roadmap, PRs welcome.

---

When Not To Use It

If you want to order your import/require statements by something sensible... :)

---

Roadmap

1. Add support for mixed import & require statement (see issues).
2. Potentially improve the ExpressionStatement type validation.