Conflict with @typescript-eslint/recommended-requiring-type-checking

Hello,

I enabled @typescript-eslint/recommended-requiring-type-checking which requires tsc behind the scene and it seems that the processor part of graphql-eslint in my overrides array is not working with it.

Here is the error :

Error: Error while loading rule '@typescript-eslint/non-nullable-type-assertion-style': You have used a rule which requires parserServices to be generated. You must therefore provide a value for the "parserOptions.project" property for @typescript-eslint/parser.
Occurred while linting /Users/admin/Documents/Code/Clovis-team/clovis-labs/clovis/src/client/screens/App/Organization/Project/Task/Task.tsx/0_document.graphql

And here is my eslint configuration :

module.exports = {
  env: {
    browser: true,
    es6: true,
    jest: true,
    node: true,
  },
  extends: [
    "eslint:recommended",
    "plugin:@typescript-eslint/recommended",
    "plugin:@typescript-eslint/recommended-requiring-type-checking",
    "plugin:prettier/recommended",
    "plugin:react/recommended",
    "plugin:sonarjs/recommended",
    "plugin:testing-library/recommended",
    "plugin:testing-library/react",
    "plugin:jest-dom/recommended",
  ],
  "ignorePatterns": ["/*.*", "src/**/generated/*", "src/**/*.graphql.ts"],
  overrides: [
    {
      files: ["*.tsx", "*.ts"],
      processor: "@graphql-eslint/graphql",
    },
    {
      files: ["*.graphql"],
      parser: "@graphql-eslint/eslint-plugin",
      plugins: ["@graphql-eslint"],
      rules: {
        "prettier/prettier": "off",
      },
    },
  ],
  parser: "@typescript-eslint/parser",
  parserOptions: {
    project: "./tsconfig.json",
    tsconfigRootDir: __dirname,
  },
  plugins: [
    "@typescript-eslint",
    "prettier",
    "simple-import-sort",
    "import",
    "sort-keys-fix",
    "sort-destructure-keys",
    "sonarjs",
    "testing-library",
    "jest-dom",
  ],
  root: true,
  rules: {
    "@typescript-eslint/consistent-type-imports": "error",
    "@typescript-eslint/explicit-function-return-type": "off",
    "@typescript-eslint/explicit-module-boundary-types": "off",
    "@typescript-eslint/non-nullable-type-assertion-style": "error",
    "@typescript-eslint/prefer-nullish-coalescing": "error",
    "@typescript-eslint/prefer-optional-chain": "error",
    "@typescript-eslint/prefer-ts-expect-error": "error",
    "@typescript-eslint/switch-exhaustiveness-check": "error",
    "import/first": "error",
    "import/newline-after-import": "error",
    "import/no-duplicates": "error",
    "react/react-in-jsx-scope": "off",
    "simple-import-sort/exports": "error",
    "simple-import-sort/imports": "error",
    "sort-destructure-keys/sort-destructure-keys": "error",
    "sort-imports": "off",
    "sort-keys-fix/sort-keys-fix": "error",
  },
  settings: {
    react: {
      version: "detect",
    },
  },
};

As you can see I already specified the parserOptions.project so I’m not sure what to do now. 😅

If I comment all the recommended-requiring-type-checking rules and the plugin, graphql-eslint is working :

module.exports = {
  env: {
    browser: true,
    es6: true,
    jest: true,
    node: true,
  },
  extends: [
    "eslint:recommended",
    "plugin:@typescript-eslint/recommended",
    // "plugin:@typescript-eslint/recommended-requiring-type-checking",
    "plugin:prettier/recommended",
    "plugin:react/recommended",
    "plugin:sonarjs/recommended",
    "plugin:testing-library/recommended",
    "plugin:testing-library/react",
    "plugin:jest-dom/recommended",
  ],
  "ignorePatterns": ["/*.*", "src/**/generated/*", "src/**/*.graphql.ts"],
  overrides: [
    {
      files: ["*.tsx", "*.ts"],
      processor: "@graphql-eslint/graphql",
    },
    {
      files: ["*.graphql"],
      parser: "@graphql-eslint/eslint-plugin",
      plugins: ["@graphql-eslint"],
      rules: {
        // "eol-last": "off",
        "prettier/prettier": "off",
      },
    },
  ],
  parser: "@typescript-eslint/parser",
  parserOptions: {
    project: "./tsconfig.json",
    tsconfigRootDir: __dirname,
  },
  plugins: [
    "@typescript-eslint",
    "prettier",
    "simple-import-sort",
    "import",
    "sort-keys-fix",
    "sort-destructure-keys",
    "sonarjs",
    "testing-library",
    "jest-dom",
  ],
  root: true,
  rules: {
    // "@typescript-eslint/consistent-type-imports": "error",
    "@typescript-eslint/explicit-function-return-type": "off",
    "@typescript-eslint/explicit-module-boundary-types": "off",
    // "@typescript-eslint/non-nullable-type-assertion-style": "error",
    // "@typescript-eslint/prefer-nullish-coalescing": "error",
    // "@typescript-eslint/prefer-optional-chain": "error",
    // "@typescript-eslint/prefer-ts-expect-error": "error",
    // "@typescript-eslint/switch-exhaustiveness-check": "error",
    "import/first": "error",
    "import/newline-after-import": "error",
    "import/no-duplicates": "error",
    "react/react-in-jsx-scope": "off",
    "simple-import-sort/exports": "error",
    "simple-import-sort/imports": "error",
    "sort-destructure-keys/sort-destructure-keys": "error",
    "sort-imports": "off",
    "sort-keys-fix/sort-keys-fix": "error",
  },
  settings: {
    react: {
      version: "detect",
    },
  },
};

I’m using the v0.7.2 👍

[jgoux]

@dotansimha

Not yet, but I do want to collect the recommend ones and make an “official” recommended set. The thing is - I don’t want to force users to provide schema or operations, and without these - the set of recommended rules won’t be effective.

Maybe you could do like typescript-eslint and provide both experiences :

• @graphql-eslint/recommended
• @graphql-eslint/recommended-requiring-schema
• @graphql-eslint/recommended-requiring-operations

So people can opt-in later to have the full awesomeness! 😄

Anyway, it’s now working, thanks a lot for the help, and I can’t wait for the recommanded rules. 😍

Have a great day. 🌞

[jgoux]

Right now I’m only using :

// Avoid issues with graphql-codegen
 "@graphql-eslint/no-anonymous-operations": "error",
// Avoid typos
"@graphql-eslint/validate-against-schema": "error"

This is purely technical, I don’t enforce any conventions. I’ll probably do it in the future when Hasura will provide conventional names to its generated GraphQL API. 😜

Also I opened an issue on the VSCode GraphQL extension now that this plugin is able to provide the same validation guarantees and more : graphql/graphiql#2363