@tokenfoundry/eslint-config

Please use this configuration to maintain a common and homogeneous code base.

Install

Install this package as any other package with:

yarn add --dev eslint @tokenfoundry/eslint-config

Create a .eslintignore and add any files that are bundled, builded and/or transpiled:

!.eslintrc.js # allow self-formating

dist
lib

In the package.json file add the following in the "scripts" section:

 {
   // ...
   "scripts": {
     // ...
     "lint": "eslint src __tests__ .eslintrc.js  --ext .js --ext .jsx"
   },
 }

Assuming that the main code is in the src directory, change as needed.

Configure for Node.js

Create a .eslintrc.js file in the root of your project and add the following:

// .eslintrc.js

module.exports = {
  extends: ["@tokenfoundry/eslint-config"],
};

Configure for ESNext (Babel) projects

Create a .eslintrc.js file in the root of your project and add the following:

// .eslintrc.js

module.exports = {
  extends: ["@tokenfoundry/eslint-config/babel"],
};

Configure for React.js and React-Native

Create a .eslintrc.js file in the root of your project and add the following:

// .eslintrc.js

module.exports = {
  extends: ["@tokenfoundry/eslint-config/react"],
};

Configure stylelint for styled-components

If you are using styled-components you should use stylelint to lint the inlined CSS code.

Install it with:

yarn add --dev stylelint

Then create a .stylelintrc.js file with this content:

// .stylelintrc.js

module.exports = {
  extends: ["@tokenfoundry/eslint-config/stylelint"],
};

In the package.json file add the following in the "scripts" section:

 {
   // ...
   "scripts": {
     // ...
     "lint:css": "stylelint '{src,__tests__}/**/*.{js,jsx}'",
   },
 }

Usage

To lint the files run:

yarn lint

To lint the files and auto-format run:

yarn lint --fix

Do not run yarn lint:css --fix it will break your component file.

Recommended usage

Install typicode/husky so you always have to run the linter before committing:

yarn add --dev husky@next

And add to the package.json:

 {
  // ...
  "scripts": {
    // ...
    "lint": "eslint src __tests__ .eslintrc.js  --ext .js --ext .jsx"
  },
  "husky": {
    "hooks": {
      "pre-commit": "yarn lint"
    }
  },
}

Use yarn lint && yarn lint:css instead if did setup stylelint.

Custom rules

Modify the .eslintrc.js and add a "rules" field:

// .eslintrc.js

module.exports = {
  extends: ["@tokenfoundry/eslint-config/react"],
  rules: [
    "react/prop-types": 0, // disabled
    "react/display-name": 1, // warning
    "react/jsx-boolean-value": 2, // throw error
  ],
};

Publishing

To publish and update of this package run:

# git add ...
# git commit ...

yarn publish --access=public
git push --follow-tags