# @focus21/eslint-config

> Focus21's ESLint configs.

Latest version **7.1.0** (published 2023-07-15) · Apache-2.0 license · 0 weekly downloads

## Install

```sh
npm install @focus21/eslint-config
pnpm add @focus21/eslint-config
yarn add @focus21/eslint-config
bun add @focus21/eslint-config
```

## Health

**Score 15/100 (F)** — status: abandoned.

Positive: no vulnerabilities.

Warnings: low downloads; no types; no esm support.

Negative: abandoned; low maintenance score.

## Facts

| | |
|---|---|
| Version | 7.1.0 |
| Published | 2023-07-15 |
| First published | 2023-05-28 |
| Weekly downloads | 0 |
| License | Apache-2.0 |
| TypeScript types | none |
| Module format | CommonJS |
| Node | >=18 <19 |
| Dependencies | 21 |
| Unpacked size | 46.2 KB |
| Known vulnerabilities | 0 |
| Install scripts | no |
| Author | Focus21 |
| Maintainers | rbongersf21, ilyapeskov, rbong |

## Links

- npm: https://www.npmjs.com/package/@focus21/eslint-config
- Repository: https://git.focus21.io/focus21/node-packages
- npm.io page: https://npm.io/package/@focus21/eslint-config

## Dependencies (21)

- [eslint-plugin-jsdoc](https://npm.io/package/eslint-plugin-jsdoc.md) ^39.3.6
- [eslint-plugin-mocha](https://npm.io/package/eslint-plugin-mocha.md) ^10.1.0
- [eslint-plugin-react](https://npm.io/package/eslint-plugin-react.md) ^7.30.1
- [@babel/eslint-parser](https://npm.io/package/@babel/eslint-parser.md) ^7.18.9
- [eslint-config-airbnb](https://npm.io/package/eslint-config-airbnb.md) ^19.0.4
- [eslint-plugin-import](https://npm.io/package/eslint-plugin-import.md) ^2.22.1
- [eslint-plugin-cypress](https://npm.io/package/eslint-plugin-cypress.md) ^2.12.1
- [eslint-config-prettier](https://npm.io/package/eslint-config-prettier.md) ^8.5.0
- [eslint-plugin-jsx-a11y](https://npm.io/package/eslint-plugin-jsx-a11y.md) ^6.6.1
- [eslint-config-react-app](https://npm.io/package/eslint-config-react-app.md) ^7.0.1
- [eslint-plugin-storybook](https://npm.io/package/eslint-plugin-storybook.md) ^0.6.4
- [@next/eslint-plugin-next](https://npm.io/package/@next/eslint-plugin-next.md) ^12.2.4
- [@typescript-eslint/parser](https://npm.io/package/@typescript-eslint/parser.md) ^5.33.0
- [eslint-config-airbnb-base](https://npm.io/package/eslint-config-airbnb-base.md) ^15.0.0
- [eslint-plugin-react-hooks](https://npm.io/package/eslint-plugin-react-hooks.md) ^4.6.0
- [eslint-plugin-tailwindcss](https://npm.io/package/eslint-plugin-tailwindcss.md) ^3.6.0
- [eslint-plugin-prefer-arrow](https://npm.io/package/eslint-plugin-prefer-arrow.md) ^1.2.3
- [eslint-plugin-chai-friendly](https://npm.io/package/eslint-plugin-chai-friendly.md) ^0.7.2
- [eslint-plugin-eslint-comments](https://npm.io/package/eslint-plugin-eslint-comments.md) ^3.2.0
- [eslint-plugin-testing-library](https://npm.io/package/eslint-plugin-testing-library.md) ^5.6.0
- [eslint-import-resolver-typescript](https://npm.io/package/eslint-import-resolver-typescript.md) ^3.5.0

## Recent versions

- 7.1.0 (latest) — 2023-07-15
- 7.0.0 — 2023-05-28

## README

# @focus21/eslint-config

Focus21's ESLint configs.

[[_TOC_]]

## Usage

Installation:

```bash
pnpm add --save-dev @focus21/eslint-config
```

In `.eslintrc.js`:

```javascript
module.exports = {
  extends: "@focus21",
};
```

You do not need to use [the eslint --ext option](https://eslint.org/docs/latest/user-guide/command-line-interface#--ext) when extending `@focus21`.
`.js`, `.jsx`, `.ts`, and `.tsx` files are included automatically.

## Advanced Usage

### Base Config Structure

Extending `@focus21` is equivalent to the following config:

```javascript
const { files, defaults } = require("@focus21/eslint-config/lib");

const { settings } = defaults;

module.exports = {
  overrides: [
    // Set the base rules
    {
      files: files.baseFiles,
      extends: [
        "@focus21/eslint-config/base",
        "@focus21/eslint-config/react",
        "@focus21/eslint-config/react-testing-library",
        "@focus21/eslint-config/jsdoc",
      ],
      settings,
    },
    // The overrides below target rules towards certain files
    {
      files: files.jestFiles,
      extends: "@focus21/eslint-config/jest",
      settings,
    },
    // The overrides below turn off settings for certain files
    {
      files: files.commonjsFiles,
      extends: "@focus21/eslint-config/commonjs",
      settings,
    },
    {
      files: files.testFiles,
      extends: "@focus21/eslint-config/test",
      settings,
    },
    {
      files: files.devFiles,
      extends: "@focus21/eslint-config/dev",
      settings,
    },
  ],
};
```

Use this default configuration as the basis for your own config.
You must use [overrides](https://eslint.org/docs/latest/user-guide/configuring/configuration-files#how-do-overrides-work) to override options.

Minimal configuration example:

```javascript
const { files, defaults } = require("@focus21/eslint-config/lib");

const { settings } = defaults;

module.exports = {
  overrides: [
    {
      files: files.baseFiles,
      extends: "@focus21/eslint-config/base",
      settings,
    },
    {
      files: files.commonjsFiles,
      extends: "@focus21/eslint-config/commonjs",
      settings,
    },
    {
      files: files.testFiles,
      extends: "@focus21/eslint-config/test",
      settings,
    },
    {
      files: files.devFiles,
      extends: "@focus21/eslint-config/dev",
      settings,
    },
  ],
};
```

### File Patterns

`files` are exported from `@focus21/eslint-config/lib` for your `.eslintrc.js`:

- `baseFiles`: All files.
- `srcFiles`: All files in the `src/` directory.
- `commonjsFiles`: Common patterns matching files which don't use ES6 import format.
- `jestFiles`: Common patterns matching Jest files.
- `cypressFiles`: Common patterns matching Cypress files.
- `mochaFiles`: Common patterns matching Mocha files.
- `testFiles`: All test patterns above.
- `storybookFiles`: Common patterns matching Storybook files.
- `svelteFiles`: Common patterns matching Svelte files.
- `devFiles`: Common patterns matching all dev utilities, test files, and configs.

`.js`, `.jsx`, `.ts`, and `.tsx` files are included explicitly in file patterns where appropriate.

Example usage:

```javascript
// .eslintrc.js

const files = require("@focus21/eslint-config/lib/files");

module.exports = {
  extends: "@focus21",
  overrides: [
    {
      files: files.baseFiles,
      rules: {
        "import/no-extraneous-dependencies": [
          "error",
          {
            devDependencies: devFiles,
            myExtraneousDependenciesSetting: true,
          },
        ],
      },
    },
    {
      files: files.commonjsFiles,
      rules: {
        "my-non-es6-rule": "error",
      },
    },
  ],
};
```

### Defaults

`defaults` are exported from `@focus21/eslint-config/lib` for your `.eslintrc.js`.

#### Default settings

`defaults.settings` is the internal default [settings object](https://eslint.org/docs/latest/user-guide/configuring/configuration-files#adding-shared-settings).
You can override settings using the function `defaults.mergeSettings`.

Also available is `defaults.preactSettings` and `defaults.mergePreactSettings` for Preact projects.

Example usage:

```javascript
// .eslintrc.js

const { defaults } = require("@focus21/eslint-config/lib");

const settings = defaults.mergeSettings({
  "import/resolver": {
    typescript: {
      "my-typescript-setting": true,
    },
  },
});

// ...rest of config...
```

#### Default Restricted Imports

`defaults.restrictedImports` is the internal default [no-restricted-imports param](https://eslint.org/docs/latest/rules/no-restricted-imports).
You can override its settings using `defaults.mergeRestrictedImports`.

Also available is `defaults.reactRestrictedImports` and `defaults.mergeRestrictedImports` for React projects.

Example usage:

```javascript
// .eslintrc.js

const { files, defaults } = require("@focus21/eslint-config/lib");

const restrictedImports = defaults.mergeRestrictedImports({
  paths: [
    {
      name: "my-path",
      message: "My message.",
    },
  ],
  // Enable importing `moment`, which normally gives a warning
  patterns: ["!moment"],
});

module.exports = {
  extends: "@focus21",
  overrides: [
    {
      files: files.baseFiles,
      rules: {
        "no-restricted-imports": ["error", restrictedImports],
      },
    },
  ],
};
```

#### Default No Unresolved Import Options

`defaults.unresolvedImportOptions` are the internal default [import/no-unresolved options](https://github.com/import-js/eslint-plugin-import/blob/main/docs/rules/no-unresolved.md#options).
The defaults include some ignore files.
You can merge options using `defaults.mergeUnresolvedImportOptions`.

Also available is `defaults.preactUnresolvedImportOptions` and `defaults.mergePreactUnresolvedImportOptions` for Preact projects.

Example usage:

```javascript
// .eslintrc.js

const { files, defaults } = require("@focus21/eslint-config/lib");

const unresolvedImportOptions = defaults.mergeUnresolvedImportOptions({
  commonjs: false,
});

module.exports = {
  extends: "@focus21",
  overrides: [
    {
      files: files.baseFiles,
      rules: {
        "import/no-unresolved": ["error", unresolvedImportOptions],
      },
    },
  ],
};
```

### Fixes

Some issues are not possible to fix in this package and must be fixed directly in your config.

#### Fix Dev Dependencies

The rule `import/no-extraneous-dependencies` may not work correctly when ESLint is run from subdirectories.

To fix this problem, extend the base config and use absolute paths in options.

```javascript
module.exports = {
  overrides: [
    {
      files: files.baseFiles,
      extends: "@focus21/eslint-config/base",
      rules: {
        "import/no-extraneous-dependencies": [
          "error",
          {
            devDependencies: files.devFiles.map(
              (pattern) => `${__dirname}/${pattern}`
            ),
          },
        ],
      },
      settings,
    },
  ],
};
```

## Additional Configs

- `@focus21/eslint-config/preact`:
  - Use on Preact projects.
  - Does _not_ conflict with `react`/`react-testing-library`.
  - Extend after `react` and before `commonjs`.
- `@focus21/eslint-config/svelte`:
  - Use on Svelte projects.
  - Extend after `base` and before `commonjs` with `svelteFiles`.
- `@focus21/eslint-config/typescript`:
  - Use on projects which use Typescript.
  - Conflicts with `flowtype` unless targetted towards custom files.
  - Extend after `react` and before `commonjs`.
- `@focus21/eslint-config/flowtype`:
  - Use on projects which use `flow`.
  - Conflicts with `typescript` unless targetted towards custom files.
  - Extend after `react` and before `commonjs`.
- `@focus21/eslint-config/next`:
  - Use on Next projects.
  - Extend after `react` and before `commonjs`.
- `@focus21/eslint-config/mocha`:
  - Use on projects which use Mocha/Chai.
  - Conflicts with `jest` unless targetted towards custom files.
  - Extend after `react` and before `commonjs` with `mochaFiles`.
- `@focus21/eslint-config/cypress`
  - Use on projects with Cypress.
  - Extend after `react` and before `commonjs` with `cypressFiles`.
- `@focus21/eslint-config/storybook`
  - Use on projects with Storybook.
  - Extend after `react` and before `commonjs`.
- `@focus21/eslint-config/tailwindcss`:
  - Use on projects which use TailwindCSS.
  - Extend after `base` and before `commonjs`.

Example usage:

```javascript
// .eslintrc.js

const { files, defaults } = require("@focus21/eslint-config/lib/files");

const { settings } = default;

module.exports = {
  overrides: [
    {
      files: files.baseFiles,
      extends: [
        "@focus21/eslint-config/base",
        "@focus21/eslint-config/react",
        "@focus21/eslint-config/react-testing-library",
        "@focus21/eslint-config/jsdoc",
        // Enable Preact
        // Requires `preactSettings` below.
        "@focus21/eslint-config/preact",
        // Enable Typescript
        "@focus21/eslint-config/typescript",
        // Enable Next
        "@focus21/eslint-config/next",
        // Enable Storybook
        "@focus21/eslint-config/storybook",
        // Enable TailwindCSS
        "@focus21/eslint-config/tailwindcss",
      ],
      // For preact projects, requires `preactSettings`.
      settings,
    },
    {
      files: files.jestFiles,
      extends: "@focus21/eslint-config/jest",
      settings,
    },
    // Enable Svelte
    {
      files: files.svelteFiles,
      extends: "@focus21/eslint-config/svelte",
      settings,
    },
    // Enable Flow with custom files so it doesn't conflict with Typescript
    {
      files: ["myFlowFiles"],
      extends: "@focus21/eslint-config/flowtype",
      settings,
    },
    // Enable Mocha with custom files so it doesn't conflict with Jest
    {
      files: ["myMochaFiles"],
      extends: "@focus21/eslint-config/mocha",
      settings,
    },
    // Enable Cypress
    {
      files: files.cypressFiles,
      extends: "@focus21/eslint-config/cypress",
      settings,
    },
    {
      files: files.commonjsFiles,
      extends: "@focus21/eslint-config/commonjs",
      settings,
    },
    {
      files: files.testFiles,
      extends: "@focus21/eslint-config/test",
      settings,
    },
    {
      files: files.devFiles,
      extends: "@focus21/eslint-config/dev",
      settings,
    },
  ],
};
```

---
_Source: https://npm.io/package/@focus21/eslint-config · Machine-readable twin of the npm.io package page. Health data is recomputed on every publish._