Support ESLint v9 with flat configuration

Note:

• ESLint v9.0.0 and later versions support the new flat config format (eslint.config.js), which has become the default configuration, replacing the legacy .eslintrc formats.
  • Ref: https://eslint.org/docs/latest/use/migrate-to-9.0.0
• If you try to install our eslint-config-helpshift in a project using ESLint v9 or above (with flat config support), the installation will work. However, we won’t be able to extend our configuration alongside the existing one because eslint-config-helpshift does not support the flat config format.
• Consumer using our shareable ESLint configuration, if their project supports using legacy config, which is on < ESLint v9, then they can use eslint-config-helpshift@2.0.0, but if your project uses ESLint v9, then you will have to wait for eslint-config-helpshift to support ESLint v9.
• Once we have successfully support ESlint v9, we will upgrade eslint-config-helpshift package to v3.0.0 (Major version upgrade)
• Here's a detailed breakdown of the compatible versions of peer dependencies that support ESLint v9 with flat config (eslint.config.js).

1. eslint-plugin-prettier

• Compatible Version: ^5.0.0 (latest recommended)
  • Supports ESLint v9's flat config via eslint-plugin-prettier/recommended in eslint.config.js.
  • Requires explicit installation of eslint-config-prettier to disable conflicting ESLint formatting rules.
  • Configuration Example:

    import eslintPluginPrettierRecommended from 'eslint-plugin-prettier/recommended';
    export default [
      // Other configs
      eslintPluginPrettierRecommended,
    ];
    

---

2. eslint-plugin-react

• Compatible Version: ^7.37.5 (supports flat config from v8.21.0+)
  • Provides flat.recommended and flat['jsx-runtime'] configs for ESLint v9.
  • Requires manual setup of JSX parsing and React version detection in eslint.config.js.
  • Configuration Example:

    import reactPlugin from 'eslint-plugin-react';
    export default [
      reactPlugin.configs.flat.recommended,
      {
        languageOptions: {
          parserOptions: { ecmaFeatures: { jsx: true } },
        },
        settings: { react: { version: 'detect' } },
      },
    ];
    

---

3. eslint-plugin-react-hooks

• Compatible Version: ^5.2.0
  • Explicitly supports ESLint v9 via recommended-latest config in flat format.
  • Configuration Example:

    import reactHooks from 'eslint-plugin-react-hooks';
    export default [
      reactHooks.configs['recommended-latest'],
    ];
    

  • Rules like rules-of-hooks and exhaustive-deps are enabled by default.

---

4. prettier

• Compatible Version: ^3.2.0+ (latest stable)
  • Works independently but requires integration with eslint-plugin-prettier and eslint-config-prettier.
  • Configure via .prettierrc and .prettierignore files, avoiding ESLint-based Prettier options for editor consistency.

---

5. @stylistic/eslint-plugin-js

• The ESLint author removed some of the formatting-related rules from the core and created a separate plugin for them, since the core was getting bloated with formatting-specific rules.
• The author recommended to use @stylistic/eslint-plugin-js for JavaScript. This packages contain the deprecated formatting rules from the ESLint core.
  • Read more at: https://eslint.org/blog/2023/10/deprecating-formatting-rules/
• Compatible Version: ^4.0.0+
  • Part of @stylistic/eslint-plugin, which fully supports ESLint v9's flat config.
  • Replaces deprecated ESLint stylistic rules (e.g., indent, quotes) with @stylistic/-prefixed rules.
  • Configuration Example:

    import stylistic from '@stylistic/eslint-plugin';
    export default [
      {
        plugins: { '@stylistic': stylistic },
        rules: { '@stylistic/indent': ['error', 2] },
      },
    ];