graphql-eslint does not work with VSCode ESLint extension

[TimoWilhelm]

Issue workflow progress

Progress of the issue based on the Contributor Workflow

• 1. The issue provides a reproduction available on GitHub, Stackblitz or CodeSandbox

Please make sure the graphql-eslint version under package.json matches yours.

• 2. A failing test has been provided
• 3. A local solution has been provided
• 4. A pull request is pending review

---

Describe the bug

Rules that try to access the schema via url-loader are broken when invoked by the VSCode eslint extension.

It seems like this line in sync-fetch expects to be called by Node.js, but in my case it's the VSCode executable when invoked by the VSCode eslint extension (dbaeumer.vscode-eslint).

To Reproduce
Steps to reproduce the behavior:

This is my settings.json (I have fixAll onSave enabled):

  "eslint.validate": [
    "javascript",
    "javascriptreact",
    "typescript",
    "typescriptreact",
    "graphql"
  ],
  "eslint.options": {
    "extensions": [
      ".js",
      ".jsx",
      ".ts",
      ".tsx",
      ".graphql"
    ]
  },
  "eslint.workingDirectories": [
    {
      "mode": "auto"
    }
  ],
  "editor.codeActionsOnSave": {
    "source.fixAll": true
  },

The section from my .eslintrc.json

 {
      "files": [
        "*.graphql"
      ],
      "extends": "plugin:@graphql-eslint/schema-recommended",
      "parserOptions": {
        "operations": "./**/*.graphql"
      },
      "rules": {
        "@graphql-eslint/description-style": [
          "off"
        ],
        "@graphql-eslint/known-directives": [
          "off"
        ],
        "@graphql-eslint/naming-convention": [
          "off"
        ],
        "@graphql-eslint/strict-id-in-types": [
          "off"
        ]
      }
    }

Expected behavior

I would expect it to work with the VSCode extension.

Environment:

• OS: Windows
• @graphql-eslint/eslint-plugin: ^3.10.4
• Node.js: v16.15.1

Additional context

If I invoke it with eslint . in the command line it works without any issues.

[dimaMachina]

Hi @TimoWilhelm, can you provide a reproduction repo of your problem? This will be helpful 🙏

[TimoWilhelm]

Hi @B2o5T, I created an MRE at https://github.com/TimoWilhelm/mre-graphql-eslint-vscode.

To reproduce:

1. Clone the repo and open it with VSCode.
2. Run npm install.
3. Make sure the dbaeumer.vscode-eslint extension is installed.
4. Open the sample.graphql file.
5. Edit anything and there should be a pop-up in the notification corner.

Otherwise you can check the ESLint output window for errors.

Please let me you know if you were able to reproduce the issue or if you need anything else.

Thanks in advance!

[dimaMachina]

1. You should use parserOptions.operations or graphql-config file but not a both in same time, remove parserOptions.operations from eslint config and add documents: ./**/*.graphql in your graphql-config.
2. Why do you extend plugin:@graphql-eslint/schema-recommended if your schema is remote? Actually for your project is make sense to lint operations but not schema types
3. I added some public remote schema in your graphql-config - https://countries.trevorblades.com. And replaced your eslint config with

{
  "root": true,
  "overrides": [
    {
      "files": "*.graphql",
      "extends": "plugin:@graphql-eslint/operations-recommended"
    }
  ]
}

and received expected output

/Users/dimitri/Desktop/mre-graphql-eslint-vscode/sample.graphql
  2:3  error  Cannot query field "sample_item" on type "Query"  @graphql-eslint/fields-on-correct-type

✖ 1 problem (1 error, 0 warnings)

❗️So everything works as expected in terminal but not in VSCode-ESLint extension and you pointed a right line

Because process.execPath equals /Users/dimitri/.nvm/versions/node/v16.14.2/bin/node via terminal but via VSCode - /Applications/Visual Studio Code - Insiders.app/Contents/Frameworks/Code - Insiders Helper.app/Contents/MacOS/Code - Insiders Helper
And when I replaced process.execPath with /Users/dimitri/.nvm/versions/node/v16.14.2/bin/node (for debugging), I got errors in my VSCode also

[TimoWilhelm]

In my repo I actually have a mix between a remote schema and client-only schema, so the linter setup in the example doesn't really make sense, I agree!
And I also didn't really check if the eslint command works in the MRE, which I should have. In my main repo, invoking ESLint with the CLI works just fine.

There seems to be some activity about this issue @ larsgw/sync-fetch#23.

[dimaMachina]

to fix the incorrect process.execPath, add .vscode/settings.json file with the following content (node path you can get by which node in terminal)

{
  "eslint.runtime": "/Users/dmytro/.nvm/versions/node/v18.16.1/bin/node"
}

that I described in #1721 (comment)