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 change the design hierarchy, both names and levels are configurable. The plugin will only check imports in these folders located under the components folder.
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'