Eslint plugin for enforcing atomic design hierarchy
npm install eslint-plugin-atomic-design-hierarchy

!david-dm

A simplistic plugin that enforces atomic design hierarchy.
The plugin allows you to define a components folder containing component level divisions (e.g. atoms, molecules, ...).
The plugin will check each file in the components folder for imports that don't follow the design hierarchy.
`npm i eslint-plugin-atomic-design-hierarchy
Add the plugin to your eslint config file
``
"plugins": [
"atomic-design-hierarchy"
],
Next, enable the rule
"atomic-design-hierarchy/hierarchical-import": "error"
component folder: 'components'
design hierarchy:
* atoms = 0
* molecules = 1
* organisms = 2
* templates = 3
* pages = 4
You can also change the root components folder name.
The plugin will only check files and imports within this folder.
``
"atomic-design-hierarchy/hierarchical-import": [
"error",
{
"atoms": 0,
"molecules": 1,
"organisms": 2,
"templates": 3,
"pages": 4,
},
"components"
]
from /components//molecules/ComponentX
`
// valid, molecules can import atoms
import { ComponentA } from '../atoms/ComponentA'
// valid, molecules can import molecules
import { ComponentY } from './ComponentY'
// invalid, molecules can't import organisms
import { ComponentB } from '../organisms/ComponentB'
``