@daisypayments/eslint-config

@daisypayments/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 @daisypayments/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: ["@daisypayments/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: ["@daisypayments/eslint-config/babel"],
};

Configure for Typescript

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

// .eslintrc.js

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

Add to the package.json file the following arguments to the lint script:

{
  "scripts": {
    "lint": "eslint --ext .js --ext .ts"
  },
}

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: ["@daisypayments/eslint-config/react"],
};

Usage

To lint the files run:

yarn lint

To lint the files and auto-format run:

yarn lint --fix

To run in a specific file or directory (eg: src):

yarn lint --fix src

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 .ts",
  },
  "husky": {
    "hooks": {
      "pre-commit": "yarn lint"
    },
  },
}

Custom rules

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

// .eslintrc.js

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

Setup Visual Studio Code

Create file .vscode/settings.json

mkdir -p .vscode
touch .vscode/settings.json

Add the following:

{
  "eslint.enable": true,
  "eslint.validate": [
    "javascript",
    "javascriptreact",
    {
      "language": "typescript",
      "autoFix": true,
    },
    {
      "language": "typescriptreact",
      "autoFix": true,
    },
  ],
}

Publishing

To publish and update of this package run:

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

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