ESLint rules for Atomic Designed projects
Clone or download
Fetching latest commit…
Cannot retrieve the latest commit at this time.
Permalink
Type Name Latest commit message Commit time
Failed to load latest commit information.
.circleci
examples
lib
tests
.eslintignore
.eslintrc.js
.gitignore
.npmignore
.prettierrc.js
LICENSE
README.md
package-lock.json
package.json

README.md

eslint-plugin-atomic-design

npm version CircleCI Coverage Status david-dm

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 (\\w+):

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

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

default: <DefaultParser>

© RyoNkmr