Basis Theory ESLint Config

Standardized Basis Theory ESLint and Prettier configurations.

Install

yarn add @basis-theory/eslint-config -D

Usage

Add it to extends property of your ESLint config file (i.e. .eslintrc.js):

module.exports = {
  extends: '@basis-theory',
  rules: {
    // disable/enable any rules
  },
};

Typescript

Instead of extending the root ruleset, point to the exported Typescript flavor:

module.exports = {
  extends: '@basis-theory/eslint-config/typescript',
  rules: {
    // disable/enable any rules
  },
};

Next.js

Instead of extending the root ruleset, point to the exported Next.js (Typescript) flavor:

module.exports = {
  extends: '@basis-theory/eslint-config/next',
  rules: {
    // disable/enable any rules
  },
};

Caveats

Since both eslint-config-get-off-my-lawn and eslint-config-next use same plugins with different versions, which leads to ESLint throwing the error:

ESLint couldn't determine the plugin "{pluginName}" uniquely.

So get over that, you must add Yarn resolutions field to your package.json:

{
  "resolutions": {
    "eslint-plugin-import": "2.24.2",
    "eslint-plugin-react": "7.25.1"
  }
}

Note: if you are using NPM, it is worth looking into (npm-force-resolutions)[https://www.npmjs.com/package/npm-force-resolutions] as an alternative to Yarn's deterministic dependency resolution.

Prettier

To use only the exported config in your project, you may set the prettier prop to your package.json:

{
  "prettier": "@basis-theory/eslint-config/prettier"
}

Or, if you want to expand on top it, create a .prettierrc.js file with following content:

module.exports = {
  ...require('@basis-theory/eslint-config/prettier'),
  // add your configuration here
};

Cheatsheet

@typescript-eslint/explicit-module-boundary-types and/or @typescript-eslint/explicit-module-boundary-types for a React component, add return type JSX.Element as follows:

Before:

export const MyComponent = ({}: Props) => {};

After:

export const MyComponent = ({}: Props): JSX.Element => {};