@bam.tech/eslint-plugin

ESLint plugin by BAM

This project is an ESLint plugin that gathers all the rules, plugins and parsers that should be used in any new react-native BAM project.

Quick Setup

Install the plugin and its peer dependencies:

yarn add @bam.tech/eslint-plugin --dev
npx install-peerdeps @bam.tech/eslint-plugin --dev --yarn

Then update your .eslintrc config file:

// .eslintrc
{
  "extends": "plugin:@bam.tech/recommended",
  "overrides": [
    {
      "files": ["*.test.tsx", "*.test.ts"],
      "extends": "plugin:@bam.tech/tests"
    }
  ]
}

Shareable configurations

This plugin exports multiple configurations that can be used in your .eslintrc config file:

Name	Description
@bam.tech/recommended	The recommended config for all projects
@bam.tech/tests	The recommended config for test files. By default this applies to every file: put it in an overrides to filter on your test files.
@bam.tech/a11y	[beta] Eslint config to check for accessibility. Still in beta to not break existing projects, but will be merged into the recommended config in the future.

These configs need some peer dependencies. You can list them with:

npm info "@bam.tech/esling-plugin" peerDependencies

If you use npm >= 5 you can automatically install them by running:

npx install-peerdeps @bam.tech/eslint-config -D

Eslint rules

This plugin exports some custom rules that you can optionally use in your project:

💼 Configurations enabled in.
♿ Set in the a11y configuration.
🔧 Automatically fixable by the --fix CLI option.
💡 Manually fixable by editor suggestions.

Name	Description	💼	🔧	💡
accessibility-props-require-accessible	Requires accessible prop when accessibility props are defined	♿	🔧
do-not-use-role-on-image	Disallow role prop on Image component	♿	🔧
image-requires-accessible-prop	Require accessible prop on image components	♿	🔧	💡
require-named-effect	Enforces the use of named functions inside a useEffect
requires-accessibility-label	Enforces label when component accessible	♿		💡
requires-accessibility-role-when-accessible	Enforces accessibilityRole or role when component is accessible	♿		💡

To use a rule, just declare it in your .eslintrc:

// .eslintrc
{
  "plugins": ["@bam.tech"],
  "rules": {
    "@bam.tech/require-named-effect": "error"
  }
}

Tip: if your config is already extended from a @bam.tech config, you don't need to declare the plugin.

How to customize?

You can still customize your ESLint config by adding other configurations, plugins and rules to your .eslintrc config file.

Contribute

If you find a useful rule that you feel every project at BAM should use, feel free to contribute.