@focus21/eslint-config

Focus21's ESLint configs.

[[TOC]]

Usage

Installation:

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

In .eslintrc.js:

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

You do not need to use the eslint --ext option 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:

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 to override options.

Minimal configuration example:

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:

// .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. You can override settings using the function defaults.mergeSettings.

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

Example usage:

// .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. You can override its settings using defaults.mergeRestrictedImports.

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

Example usage:

// .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. 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:

// .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.

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:

// .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,
    },
  ],
};