import-order

@feature-sliced/import-order

Reference: Layers

Usage

Add "@feature-sliced/eslint-config/rules/import-order" to your extends section in ESLint config.

// 👎 Fail
import { getSmth } from "./lib";
import axios from "axios";
import { data } from "../fixtures";
import { authModel } from "entities/auth";
import { Button } from "shared/ui";
import { LoginForm } from "features/login-form";
import { Header } from "widgets/header";
import { debounce } from "shared/lib/fp";

// 👍 Pass
import axios from "axios";                           // 1) external libs
import { Header } from "widgets/header";             // 2.1) Layers: widgets
import { LoginForm } from "features/login-form";     // 2.2) Layers: features
import { authModel } from "entities/auth";           // 2.3) Layers: entities
import { Button } from "shared/ui";                  // 2.4) Layers: shared
import { debounce } from "shared/lib/fp";            // 2.4) Layers: shared
import { data } from "../fixtures";                  // 3) parent
import { getSmth } from "./lib";                     // 4) sibling

WARN: Rule supports layer-based imports, but its recommended to prefer more specified imports

import { ... } from "shared";                // Non-critical
import { ... } from "shared/ui";             // Better
import { ... } from "shared/ui/button";      // Perfect

Experimental

With reversed order ("from abstract to specific") and spaces between layers groups (why experimental?)

Add "@feature-sliced/eslint-config/rules/import-order/experimental" to your extends section in ESLint config.

^{Only for @^0.1.0-beta.4}

import axios from "axios";                           // 1) external libs

import { debounce } from "shared/lib/fp";            // 2.1) Layers: shared
import { Button } from "shared/ui";                  // 2.1) Layers: shared

import { authModel } from "entities/auth";           // 2.2) Layers: entities

import { LoginForm } from "features/login-form";     // 2.3) Layers: features

import { Header } from "widgets/header";             // 2.4) Layers: widgets

import { data } from "../fixtures";                  // 3) parent
import { getSmth } from "./lib";                     // 4) sibling