# Custom configuration

If you are in the process of migrating an existing project to use @workleap/eslint-configs or encountering a challenging situation that is not currently handled by this library, you might want to customize the default shared configurations.

For a list of the rules included with the default shared configurations, refer to the configuration files in the following folder on GitHub.

# Disable a default rule

Each define function accepts an object literal as its second argument. This object allows you to configure options for every rule category. You can disable a default rule by redefining it locally and setting its value to "off":

eslint.config.ts
import { defineWebApplicationConfig } from "@workleap/eslint-configs";

export default defineWebApplicationConfig(import.meta.dirname, {
    core: {
        "no-var": "off"
    }
});

# Change a default rule severity

Each define function accepts an object literal as its second argument. This object allows you to configure options for every rule category. You can update the severity of a rule by defining the rule locally with either the "warn" or "error" severity:

eslint.config.ts
import { defineWebApplicationConfig } from "@workleap/eslint-configs";

export default defineWebApplicationConfig(import.meta.dirname, {
    jsxAlly: {
        "jsx-a11y/alt-text": "error"
    }
});

# Change a default rule value

Each define function accepts an object literal as its second argument. This object allows you to configure options for every rule category. You can update a default rule value by defining the rule locally with its new value:

eslint.config.ts
import { defineWebApplicationConfig } from "@workleap/eslint-configs";

export default defineWebApplicationConfig(import.meta.dirname, {
    typescript: {
        "@stylistic/quote-props": "off"
    }
});

# Add a plugin

You can configure additional rules from a third-party ESLint plugin using the plugin's extends option, if the plugin supports it:

eslint.config.ts
import { defineWebApplicationConfig } from "@workleap/eslint-configs";
import { defineConfig } from "eslint/config";
import myPlugin from "eslint-plugin-myplugin";

export default defineConfig([
    {
        extends: [
            myPlugin
        ],
        rules: {
            "myPlugin/rule": "warn" 
        }
    },
    defineWebApplicationConfig(import.meta.dirname)
]);

Or by registering manually the plugin:

eslint.config.ts
import { defineWebApplicationConfig } from "@workleap/eslint-configs";
import { defineConfig } from "eslint/config";
import myPlugin from "eslint-plugin-myplugin";

export default defineConfig([
    {
        plugins: {
            myPlugin
        },
        rules: {
            "myPlugin/rule": "warn" 
        }
    },
    defineWebApplicationConfig(import.meta.dirname)
]);

# Ignore files and folders

You can ignore certain files and folders by specifying one or more glob patterns:

eslint.config.ts
import { defineWebApplicationConfig } from "@workleap/eslint-configs";
import { defineConfig, globalIgnores } from "eslint/config";

export default defineConfig([
    globalIgnores([
        "packages",
        "samples",
        "docs"
    ]),
    defineWebApplicationConfig(import.meta.dirname)
]);

# Enable rules for Jest

By default, the Vitest ESLint rules are enabled. If your project uses Jest instead of Vitest, disable the Vitest rules and enable the Jest rules:

eslint.config.ts
import { defineWebApplicationConfig } from "@workleap/eslint-configs";

export default defineWebApplicationConfig(import.meta.dirname, {
    testFramework: "jest"
});

# Rules by category

Category	Description
Core	Core rules shared across all configurations. Includes most of the ESLint recommended rules, along with the rules from `eslint-plugin-import`.
Jest	Includes most of the recommended rules from `eslint-plugin-jest`.
JSON	Includes the rules from `eslint-plugin-jsonc`.
JSX A11y	Includes most of the recommended rules from `eslint-plugin-jsx-a11y`.
Package JSON	Includes most of the recommended rules from `eslint-plugin-package-json`.
React	Includes most of the React recommended rules from `eslint-plugin-react`, most of the React Hooks recommended rules from `eslint-plugin-react-hooks` and most of the JSX recommended rules from `@stylistic/eslint-plugin`.
Storybook	Includes most of the recommended rules from `eslint-plugin-storybook`.
Testing library	Includes the React rules from `eslint-plugin-testing-library`.
TypeScript	Includes most of the recommended and stylistic rules from `typescript-eslint`, and most of the recommended rules from `@stylistic/eslint-plugin`.
Vitest	Includes most of the recommended rules from `@vitest/eslint-plugin`.
YAML	Includes most of the recommended rules from `eslint-plugin-yaml`.