eslint-plugin-atomic-design

eslint-plugin-atomic-design

Installation

You'll first need to install ESLint:

$ npm i eslint --save-dev

Next, install eslint-plugin-atomic-design:

$ npm install eslint-plugin-atomic-design --save-dev

Note: If you installed ESLint globally (using the -g flag) then you must also install eslint-plugin-atomic-design globally.

Usage

Add atomic-design to the plugins section of your .eslintrc configuration file. You can omit the eslint-plugin- prefix:

{
  "plugins": ["atomic-design"]
}

Then configure the rules you want to use under the rules section.

{
  "rules": {
    "atomic-design/hierarchical-import": 2
  }
}

Rules

Hierarchical Dependencies (hierarchical-import)

Currently, this is the only rule of this plugin.

options

excludes Array<RegExpString>

Matching patterns ignore both target file paths and importing paths.

default: ['node_modules\/\\w']

levels Array<String|String[]>

Components levels in your projects listing up in order of size and starting with '=' are capable of the same level importing.
Additionally, this can be defined the same level components as an Array of strings:

{
  levels: [['elements', 'atoms'], 'molecules', ['=organisms', 'sections']],
},

default: ['atoms', 'molecules', '=organisms', 'templates', 'pages']

pathPatterns Array<RegExpString>

Patterns should contain a capturing group like (\\w+):

{
  pathPatterns: ['components/(\\w+)/', 'routes/(\\w+)/'],
},

or <DefaultParser> takes the last match of one of the levels in import paths.

default: <DefaultParser>

module 'strict' | 'loose' | 'off' | false

"module" mode allows to have children as module's "private" components.

in 'loose' mode (default setting):

// in './components/molecules/SuperDatepicker/SuperDatepickerCalender.js'

// valid
import CommonLabel from '@/components/atom/CommonLabel.js';
import SuperDatepickerCalenderInput from '@/components/molecules/SuperDatepicker/SuperDatepickerCalenderInput.js';

// invalid (Module children are "private")
import OtherModuleChildren from '@/components/molecules/OtherModule/OtherModuleChildren.js';

in 'strict' mode, "private" children are protected even if importing comes from the same module siblings:

// in './components/molecules/SuperDatepicker/SuperDatepickerCalender.js'

// valid
import CommonLabel from '@/components/atom/CommonLabel.js';

// invalid (Module children are "private")
import OtherModuleChildren from '@/components/molecules/OtherModule/OtherModuleChildren.js';

// invalid (Only the module root component can import its children)
import SuperDatepickerCalenderInput from '@/components/molecules/SuperDatepicker/SuperDatepickerCalenderInput.js';
// valid in the "root" component './components/molecules/SuperDatepicker/SuperDatepicker.js'

in non-module mode:

// in './components/molecules/SuperDatepicker/SuperDatepickerCalender.js'

// valid
import CommonLabel from '@/components/atom/CommonLabel.js';

// invalid (molecules -> molecules)
import OtherModuleChildren from '@/components/molecules/OtherModule/OtherModuleChildren.js';
import SuperDatepickerCalenderInput from '@/components/molecules/SuperDatepicker/SuperDatepickerCalenderInput.js';

default: loose

© RyoNkmr