# Advanced composition

If the default by project type configurations doesn't fits your needs, rather than writing your own configuration from scratch, you can compose a new one from the underlying configuration pieces of @workleap/eslint-plugin.

# Available pieces

Name	Description
core	Basic rules shared by every configuration.
typescript	Rules for TypeScript files.
react	Rules for React files.
jsx-a11y	Rules for testing accessibility in React files.
jest	Rules for Jest files.
testing-library	Rules for Jest files using Testing Library.
storybook	Rules for Storybook story files.
mdx	Rules for MDX files (used for Storybook MDX stories).
package-json	Rules for package.json files.
yaml	Rules for YAML files.

# Compose a configuration

Each configuration piece can be extended individually, or in combination with other pieces, to compose your own custom ESLint configuration.

# Single piece

To extend the configuration with a single piece:

.eslintrc.json
{
    "$schema": "https://json.schemastore.org/eslintrc",
    "root": true,
    "extends": "plugin:@workleap/typescript",
    "rules": {
        ...
    }
}

# Multiple pieces

To extend the configuration with multiple pieces:

.eslintrc.json
{
    "$schema": "https://json.schemastore.org/eslintrc",
    "root": true,
    "extends": ["plugin:@workleap/core", "plugin:@workleap/typescript"],
    "rules": {
        ...
    }
}

# Lint additional files

The configuration pieces already targets which file extensions their linting rules will be applied to. If you wish to lint additional file extensions for a given piece you can add an ESLint override block:

.eslintrc.json
{
    "$schema": "https://json.schemastore.org/eslintrc",
    "root": true,
    "extends": ["plugin:@workleap/react"],
    "overrides": [
        {
            "files": ["*.js", "*.jsx"],
            "extends": "plugin:@workleap/react"
        }
    ]
}