# eslint-plugin-architector-import > Eslint plugin for enforcing atomic design hierarchy Latest version **1.0.1** (published 2023-02-18) · ISC license · 0 weekly downloads ## Install ```sh npm install eslint-plugin-architector-import pnpm add eslint-plugin-architector-import yarn add eslint-plugin-architector-import bun add eslint-plugin-architector-import ``` ## Health **Score 15/100 (F)** — status: abandoned. Positive: no vulnerabilities. Warnings: low downloads; no types; no esm support. Negative: abandoned; low maintenance score. ## Facts | | | |---|---| | Version | 1.0.1 | | Published | 2023-02-18 | | First published | 2023-02-18 | | Weekly downloads | 0 | | License | ISC | | TypeScript types | none | | Module format | CommonJS | | Dependencies | 3 | | Unpacked size | 1.4 MB | | Known vulnerabilities | 0 | | Install scripts | no | | GitHub stars | 1 | | Author | Robin Alaerts | | Maintainers | artem.kuskin | | Keywords | eslint, atomic design, eslint plugin | ## Links - npm: https://www.npmjs.com/package/eslint-plugin-architector-import - Repository: https://github.com/artemkuskin/eslint-plagin-architector - Homepage: https://github.com/artemkuskin/eslint-plagin-architector#readme - Issues: https://github.com/artemkuskin/eslint-plagin-architector/issues - npm.io page: https://npm.io/package/eslint-plugin-architector-import ## Dependencies (3) - [tree-model](https://npm.io/package/tree-model.md) ^1.0.7 - [eslint-plugin-import](https://npm.io/package/eslint-plugin-import.md) ^2.27.5 - [eslint-plugin-require](https://npm.io/package/eslint-plugin-require.md) ^0.0.1 ## Alternatives - [eslint-plugin-sonarjs](https://npm.io/package/eslint-plugin-sonarjs.md) — 2.9M weekly downloads - [eslint-config-expo](https://npm.io/package/eslint-config-expo.md) — 1.5M weekly downloads - [@matter/protocol](https://npm.io/package/@matter/protocol.md) — 63.5K weekly downloads - [@eventcatalog/linter](https://npm.io/package/@eventcatalog/linter.md) — 24.8K weekly downloads - [@inrupt/eslint-config-base](https://npm.io/package/@inrupt/eslint-config-base.md) — 4.5K weekly downloads ## Recent versions - 1.0.1 (latest) — 2023-02-18 ## README # eslint-plugin-architector The Dependency Rule states that the source code dependencies can only point inwards. ![Image alt](https://github.com/artemkuskin/eslint-plugin-architector/blob/main/image/image.webp) This means nothing in an inner circle can know anything at all about something in an outer circle. i.e. the inner circle shouldn’t depend on anything in the outer circle. The Black arrows represented in the diagram show the dependency rule. This plugin helps to avoid dependency rule errors The plugin supports aliases that you specify in the "jsconfig.json" file and also works with require and asinc import. ![Image alt]() ## installation ``` npm i eslint-plugin-architector-import ``` ## Usage Add the plugin to your eslint config file ``` "plugins": [ "eslint-plugin-architector-import" ], ``` Next, enable the rule ```js "architector-import/architector-import": [ "error", { "errorPostfix": "see www.wiki for details.", "levels": [ { "level": "UILib", "independentChildren": true, "children": [ { "level": "UiLibA", "children": [ { "level": "UiLibD", "children": [] }, { "level": "UiLibE", "children": [] } ] }, { "level": "UiLibB", "children": [] } ] }, { "level": "Global", "children": [ { "level": "GlobalA", "children": [] }, { "level": "GlobalB", "children": [] } ] }, { "level": "Services", "children": [ { "level": "ServicesA", "children": [] }, { "level": "ServicesB", "children": [] }, { "level": "ServicesC", "children": [] } ] } ] }, "components" ] ``` You can change the hierarchy, both levels and child levels are configurable. The plugin will only check imports in these folders, located in the components folder. You can also change the name of the root component folder. The plugin will only check files and import in this folder. `"level"` - Folder name(Required field). `"children"` - Array with child folders (Required if there are no child levels- "children": []). `"errorPostfix"` - The message that will be shown with an error if the import is not correct (Optional field). `"independentChildren"`: true,- This setting will allow you to import all child levels into each other, regardless of the hierarchy, but not deeper than one level of nesting (Optional field). ## Case 1 `**/components/**/UILib/UILib.js` Level "UILib" is the highest in the tree, so only its children can be imported into it ```js // valid, UILiB can import childrens Level A import { UILibA } from "./UILibA/UILibA.js"; import { UILibB } from "./UILibB/UILibB.js"; // invalid, UILib cannot import Global, Services import { Global } from "../Global/Global.js"; import { Services } from "Services/Services.js"; -Aliase; // invalid, UILib can't import "children" Level B import { GlobalB } from "GlobalB/GlobalB.js"; -Aliase; ``` ## Case 2 `**/components/**/Global/GlobalB/GlobalB.js` Level "GlobalB" is a child of level "Global", level "Global" is above "Services", but below "UILib", so it can import "UILib" and its children ```js // valid, Global can import childrens Level UILib and Level UILib import { UILib } from "../../UILib/UILib.js"; import { UILibA } from "../../UILib/UILibA/UILibA.js"; // invalid, GlobalB can't import Level Global and Level Services import { Global } from "../Global.js"; import { Services } from "Services/Services.js"; ``` ## Case 3 `**/components/**/Services/Services.js` Level "Services" is below all levels in the rules tree, so you can import all levels into it ```js // valid import { GlobalB } from "GlobalB/GlobalB.js"; import { UILib } from "../UILib/UILib.js"; import { UILibA } from "../UILib/UILibA/UILibA.js"; import { Global } from "../Global/Global.js"; ``` --- _Source: https://npm.io/package/eslint-plugin-architector-import · Machine-readable twin of the npm.io package page. Health data is recomputed on every publish._