Switch to Eslint "Flat" Config format

[ryanwilsonperkin]

Description

https://eslint.org/blog/2022/08/new-config-system-part-1/
https://eslint.org/docs/latest/use/configure/migration-guide
https://shopify.workplace.com/groups/555269966105760/posts/847569046875849

Corresponding PR testing these changes in internal repo: https://github.com/Shopify/web/pull/135110

The Eslint team has been working on a new config format for a couple of years now and have announced that it will be the default in v9 and the only supported option in v10. This change adopts the flat config format for our @shopify/eslint-plugin and drops support for the old .eslintrc format.

Consumers of the @shopify/eslint-plugin library that want to use this version will need to run the migration tool to convert their .eslintrc to an eslint.config.js file.

Additionally, there is a breaking change in the name of some rules to ensure naming works correctly in the new plugin system, we're just replacing the / with a -:

Old Name	New Name
jest/no-all-mocks-methods	jest-no-all-mocks-methods
jest/no-snapshots	jest-no-snapshots
typescript/prefer-pascal-case-enums	typescript-prefer-pascal-case-enums
typescript/prefer-singular-enums	typescript-prefer-singular-enums
typescript/prefer-build-client-schema	typescript-prefer-build-client-schema
webpack/no-unnamed-dynamic-imports	webpack-no-unnamed-dynamic-imports

Test it out with @shopify/eslint-plugin@0.0.0-snapshot-20240725171647

[BPScott]

It's possibly a little cheeky, but something I've been wanting to do for ages is to lean on the recommended presets of the various plugins that we use.

Instead of enabling a giant pile of single rules from a plugin, could we extend from their recommended presets, and omit any cases where the rule is already enabled. e.g. for jest we could do:

const jest = require('eslint-plugin-jest');

module.exports = [
  {
    ...jest.configs['flat/recommended'],
    rules: {
      ...jest.configs['flat/recommended'].rules
      // No need to specify jest/no-alias-methods as it is already enabled in the recommended config
      // delete this line
      // 'jest/no-alias-methods': 'error',
    }
  },
];

[ryanwilsonperkin]

It's possibly a little cheeky, but something I've been wanting to do for ages is to lean on the recommended presets of the various plugins that we use.

Great idea, I don't think we need to be in the business of re-defining all of these ourselves, and allows us to get new rules by default. I'll hold off on doing that as part of this change though because I'm going to try hard to make this 1:1 with the existing configuration for testability and ease of updating

[ryanwilsonperkin]

/snapit

[github-actions]

🫰✨ Thanks @ryanwilsonperkin! Your snapshot has been published to npm.

Test the snapshot by updating your package.json with the newly published version:

"@shopify/eslint-plugin": "0.0.0-snapshot-20240725171647"