Merge pull request #433 from Shopify/eslint-flat-config

Switch to Eslint "Flat" Config format

.changeset/smooth-balloons-change.md

@@ -0,0 +1,5 @@
+---
+'@shopify/eslint-plugin': major
+---
+
+Switching to Eslint flat config format for v9

eslint.config.js

@@ -0,0 +1,21 @@
+const shopifyEslintPlugin = require('@shopify/eslint-plugin');
+
+module.exports = [
+  {
+    ignores: [
+      'eslint.config.js',
+      'node_modules',
+      '/coverage',
+
+      // The eslint plugin test fixtures contain files that deliberatly fail linting
+      // in order to test that the plugin reports those errors. We don't want the
+      // normal eslint run to complain about those files though so ignore them here.
+      'packages/eslint-plugin/tests/fixtures',
+    ],
+  },
+  ...shopifyEslintPlugin.configs.typescript,
+  ...shopifyEslintPlugin.configs.react,
+  ...shopifyEslintPlugin.configs.prettier,
+  ...shopifyEslintPlugin.configs.node,
+  ...shopifyEslintPlugin.configs.jest,
+];

packages/eslint-plugin/README.md

@@ -38,40 +38,47 @@ $ npm install @shopify/eslint-plugin --save-dev
 
 ## Usage
 
-Shopify’s ESLint configs come bundled in this package. In order to use them, you simply extend the relevant configuration in your project’s `.eslintrc`. For example, the following will extend the ESNext (ES2015 and later) config:
+As of version 46.0.0, this package uses Eslint's "Flat Config" format, not the legacy "eslintrc" format. To upgrade your Eslint configuration, follow the [Configuration Migration Guide](https://eslint.org/docs/latest/use/configure/migration-guide).
 
-```json
-{
-  "extends": "plugin:@shopify/esnext"
-}
+---
+
+Shopify’s ESLint configs come bundled in this package. In order to use them, you include the relevant configurations in your project’s `eslint.config.js`. For example, the following will use the ESNext (ES2015 and later) config:
+
+```js
+import shopifyEslintPlugin from '@shopify/eslint-plugin';
+
+export default [...shopifyEslintPlugin.configs.esnext];
 ```
 
-If you are working on an ES5 project, extend the ES5 version of the configuration:
+If you are working on an ES5 project, use the ES5 version of the configuration:
+
+```js
+import shopifyEslintPlugin from '@shopify/eslint-plugin';
 
-```json
-{
-  "extends": "plugin:@shopify/es5"
-}
+export default [...shopifyEslintPlugin.configs.es5];
 ```
 
-You can also add some "augmenting" configs on top of the "core" config by extending an array of linting configs. For example, the following configuration would provide a base ESNext config that is augmented by a React config:
+You can also add some "augmenting" configs on top of the "core" config by using an array of linting configs. For example, the following configuration would provide a base ESNext config that is augmented by a React config:
 
-```json
-{
-  "extends": ["plugin:@shopify/esnext", "plugin:@shopify/react"]
-}
+```js
+import shopifyEslintPlugin from '@shopify/eslint-plugin';
+
+export default [
+  ...shopifyEslintPlugin.configs.esnext,
+  ...shopifyEslintPlugin.configs.react,
+];
 ```
 
-Likewise, if you are using TypeScript and React, the following configuration extends the TypeScript base config with the React-specific rules provided by the React configuration file. To demonstrate multiple augmentations, we've also added the Prettier config, which disables rules that will conflict in projects using prettier.
+Likewise, if you are using TypeScript and React, the following configuration uses the TypeScript base config with the React-specific rules provided by the React configuration file. To demonstrate multiple augmentations, we've also added the Prettier config, which disables rules that will conflict in projects using prettier.
+
+```js
+import shopifyEslintPlugin from '@shopify/eslint-plugin';
 
-```json
-{
-  "extends": [
-    "plugin:@shopify/typescript",
-    "plugin:@shopify/react",
-    "plugin:@shopify/prettier"
-  ]
-}
+export default [
+  ...shopifyEslintPlugin.configs.typescript,
+  ...shopifyEslintPlugin.configs.react,
+  ...shopifyEslintPlugin.configs.prettier,
+];
 ```
 
 ## Provided configurations
@@ -86,21 +93,25 @@ This plugin also provides the following tool-specific configurations, which can
 
 - [typescript-type-checking](lib/config/typescript-type-checking.js) Use this config to augment the `typescript` config to enable all TypeScript rules, including those that require type checking. These rules are slower to run and and you will need to specify a path to your tsconfig.json file in the "project" property of "parserOptions". The following example would provide all of the TypeScript rules, assuming the tsconfig.json is in the same directory as you ESlint configuration.
 
-```json
-{
-  "extends": [
-    "plugin:@shopify/typescript",
-    "plugin:@shopify/typescript-type-checking"
-  ],
-  "parserOptions": {
-    "project": "tsconfig.json"
-  }
-}
+```js
+import shopifyEslintPlugin from '@shopify/eslint-plugin';
+
+export default [
+  ...shopifyEslintPlugin.configs.typescript,
+  ...shopifyEslintPlugin.configs['typescript-type-checking'],
+  {
+    languageOptions: {
+      parserOptions: {
+        project: 'tsconfig.json',
+      },
+    },
+  },
+];
 ```
 
 - [react](lib/config/react.js): Use this for React projects.
 - [polaris](lib/config/polaris.js): Use this for projects that use [Shopify’s React Polaris components](https://polaris.shopify.com/components).
-- [prettier](lib/config/prettier.js): Use [prettier](https://github.com/prettier/prettier) for consistent formatting. Extending this Shopify's prettier config will [override](https://github.com/prettier/eslint-config-prettier/blob/master/index.js) the default Shopify eslint rules in favor of prettier formatting. Prettier must be installed within your project, as @shopify/eslint-plugin does not provide the dependency itself.
+- [prettier](lib/config/prettier.js): Use [prettier](https://github.com/prettier/prettier) for consistent formatting. Using this Shopify's prettier config will [override](https://github.com/prettier/eslint-config-prettier/blob/master/index.js) the default Shopify eslint rules in favor of prettier formatting. Prettier must be installed within your project, as @shopify/eslint-plugin does not provide the dependency itself.
 - [webpack](lib/config/webpack.js): Use this for projects built by [webpack](https://webpack.js.org/).
 
 ### node
@@ -109,10 +120,13 @@ If you are working on a node module, we also provide the [node configuration](li
 
 A node project that will use Babel for transpilation would need the following ESLint config:
 
-```json
-{
-  "extends": ["plugin:@shopify/esnext", "plugin:@shopify/node"]
-}
+```js
+import shopifyEslintPlugin from '@shopify/eslint-plugin';
+
+export default [
+  ...shopifyEslintPlugin.configs.esnext,
+  ...shopifyEslintPlugin.configs.node,
+];
 ```
 
 ### Supported Typescript version

packages/eslint-plugin/index.js

@@ -1,39 +1,6 @@
 module.exports = {
-  rules: {
-    'binary-assignment-parens': require('./lib/rules/binary-assignment-parens'),
-    'class-property-semi': require('./lib/rules/class-property-semi'),
-    'images-no-direct-imports': require('./lib/rules/images-no-direct-imports'),
-    'jest/no-all-mocks-methods': require('./lib/rules/jest/no-all-mocks-methods'),
-    'jest/no-snapshots': require('./lib/rules/jest/no-snapshots'),
-    'jsx-no-complex-expressions': require('./lib/rules/jsx-no-complex-expressions'),
-    'jsx-no-hardcoded-content': require('./lib/rules/jsx-no-hardcoded-content'),
-    'jsx-prefer-fragment-wrappers': require('./lib/rules/jsx-prefer-fragment-wrappers'),
-    'no-ancestor-directory-import': require('./lib/rules/no-ancestor-directory-import'),
-    'no-debugger': require('./lib/rules/no-debugger'),
-    'no-namespace-imports': require('./lib/rules/no-namespace-imports'),
-    'no-useless-computed-properties': require('./lib/rules/no-useless-computed-properties'),
-    'no-fully-static-classes': require('./lib/rules/no-fully-static-classes'),
-    'polaris-prefer-sectioned-prop': require('./lib/rules/polaris-prefer-sectioned-prop'),
-    'polaris-no-bare-stack-item': require('./lib/rules/polaris-no-bare-stack-item'),
-    'prefer-class-properties': require('./lib/rules/prefer-class-properties'),
-    'prefer-early-return': require('./lib/rules/prefer-early-return'),
-    'prefer-module-scope-constants': require('./lib/rules/prefer-module-scope-constants'),
-    'prefer-twine': require('./lib/rules/prefer-twine'),
-    'react-hooks-strict-return': require('./lib/rules/react-hooks-strict-return'),
-    'react-initialize-state': require('./lib/rules/react-initialize-state'),
-    'react-no-multiple-render-methods': require('./lib/rules/react-no-multiple-render-methods'),
-    'react-prefer-private-members': require('./lib/rules/react-prefer-private-members'),
-    'react-require-autocomplete': require('./lib/rules/react-require-autocomplete'),
-    'react-type-state': require('./lib/rules/react-type-state'),
-    'restrict-full-import': require('./lib/rules/restrict-full-import'),
-    'sinon-no-restricted-features': require('./lib/rules/sinon-no-restricted-features'),
-    'sinon-prefer-meaningful-assertions': require('./lib/rules/sinon-prefer-meaningful-assertions'),
-    'strict-component-boundaries': require('./lib/rules/strict-component-boundaries'),
-    'typescript/prefer-pascal-case-enums': require('./lib/rules/typescript/prefer-pascal-case-enums'),
-    'typescript/prefer-singular-enums': require('./lib/rules/typescript/prefer-singular-enums'),
-    'typescript/prefer-build-client-schema': require('./lib/rules/typescript/prefer-build-client-schema'),
-    'webpack/no-unnamed-dynamic-imports': require('./lib/rules/webpack/no-unnamed-dynamic-imports'),
-  },
+  // Imported separately to allow configs to reference it and avoid circular reference
+  ...require('./plugin'),
 
   configs: {
     // Core configs - When extending, one of these should go first