# ESLint Config Varnish

The files in this directory represent the `eslint` configuration settings for Varnish.
This version of the package is compatible with ESlint 10 and the new "flat" configs.

For more information about the new "flat" config format, see
[this documentation](https://eslint.org/docs/latest/use/configure/configuration-files).
For more information about migrating to version 10, see
[this documentation](https://eslint.org/docs/latest/use/migrate-to-10.0.0).

They will be published as a separate NPM module, `@allenai/eslint-config-varnish`.
This allows them to be shared easily across multiple AI2 projects.

For more information about publishing and using shared `eslint` configuration
definitions, see [this documentation](https://eslint.org/docs/user-guide/configuring).

## Usage

1. Install it and its peer dependencies:

    ```shell
    ~ yarn add -D \
    @allenai/eslint-config-varnish \
    @eslint-react/eslint-plugin \
    @eslint/js \
    @eslint/json \
    eslint \
    eslint-plugin-jsx-a11y \
    eslint-plugin-react-refresh \
    typescript \
    typescript-eslint \
    ```

    Optionally, you can also install Prettier deps, if you want to use the Prettier config included in this package:

    ```shell
    ~ yarn add -D \
    prettier \
    eslint-config-prettier \
    eslint-plugin-prettier \
    ```

2. Create a "flat" config file, and configure `eslint` to use this package as a base:

    ```js
    import { defineConfig, globalIgnores } from 'eslint/config';
    import varnish from '@allenai/eslint-config-varnish';

    export default defineConfig([
        // Remove any old .eslintignore files and add patterns here instead
        globalIgnores(['dist/**', 'build/**', 'playwright-report/**', 'playwright/.cache/**']),

        // Use the recommended Varnish config as a base, and add custom rules on top of it
        varnish.configs.recommendedWithReact, // or varnish.configs.strictWithReact for a stricter set of rules
        {
            /**
             * Add custom rules here, or override rules from the base config. For example:
             */

            rules: {
                'prettier/prettier': ['error', { singleQuote: true }],
            },
        },

        /**
         * if you have an older eslint config that you want to migrate into
         * this file, you may add more sections to this array, and copy
         * over rules from your old config, and remove any old config files.
         */

        varnishConfig.configs.prettier, // Prettier should be last (optional)
    ]);
    ```

3. Add targets for linting and reformatting code to your `package.json` file:

    ```json
    "scripts": {
        "lint": "eslint . && echo '💫  Lint complete.'",
        "lint:fix": "eslint . --fix && echo '🛠  Lint --fix complete.'",
    }
    ```

4. Try it out:

    ```bash
    # See what's wrong
    ~ yarn lint

    # Reformat and fix things
    ~ yarn lint:fix
    ```

## Documentation

[The documentation](https://varnish.apps.allenai.org)

## Contributing

See instructions at the monorepo root [CONTRIBUTING](https://github.com/allenai/varnish-mui/blob/main/CONTRIBUTING.md)