Not seeing errors in VSCode editor

[AaronWatson2975]

Description

Hey all, thanks for taking the time to read this. I was trying to set up @graphql-eslint in a new React project created using CRA and I can’t seem to get errors to display in my editor (VSCode).

It seems like ESLint, and GraphQL Language Server all seem to be working correctly. Also if I run ESLint using npx eslint --ext .graphql src/test/test.graphql it seems to work fine and I can see the error.

  1:1  error  Anonymous GraphQL operations are forbidden. Make sure to name your query!  @graphql-eslint/no-anonymous-operations

The Problem

The issue I’m having is I’m not seeing any errors or red underlines in VSCode for any rules from @graphql-eslint. I only see them for errors from the GraphQL Language Server.

I’m wondering if there’s something I’m missing.

Steps Taken

• 

Create a new React app
• Installed graphql and @graphql-eslint/eslint-plugin.
• Added `graphqlrc.yml


schema: "https://api.spacex.land/graphql/"
documents: "src/**/*.graphql"

Added .eslintrc

{
  "extends": ["react-app", "react-app/jest"],
  "overrides": [
    {
      "files": ["*.graphql"],
      "parser": "@graphql-eslint/eslint-plugin",
      "plugins": ["@graphql-eslint"],
      "rules": {
        "@graphql-eslint/no-anonymous-operations": "error",
        "@graphql-eslint/no-duplicate-fields": "error"
      }
    }
  ],
  "rules": {
    "no-unused-vars": "error"
  }
}

• Added GraphQL VSCode extension
• Restarted VSCode

Also, I'm not seeing any errors or anything weird in my output for ESLint and GraphQL Language Server.

Any help at all would be greatly appreciated! 🙏

lint_test.zip

[dimaMachina]

Hi @AaronWatson2975 , which version of vscode eslint extension do you use?

[AaronWatson2975]

Here's all the dependency versions from the package.json

  "dependencies": {
    "@graphql-eslint/eslint-plugin": "3.10.3",
    "graphql": "^16.5.0",
    "react": "18.0.0",
    "react-dom": "18.0.0",
    "react-scripts": "4.0.0"
  },
  "devDependencies": {
    "@babel/runtime": "7.13.8"
  },

VSCode ESLint extension v2.2.2. I've also tried v2.2.3 pre-release with no change in behaviour. I'm wondering if I should try it on a different computer with a fresh install of VSCode to confirm it's not another extension wreaking havoc on it. 🤔

[dimaMachina]

Try to add this field in your settings.json https://github.com/B2o5T/graphql-eslint/blob/37c1579ae1a29c804fdca2baa1541e4e158d1631/.vscode/settings.json#L20

[dimaMachina]

If it’s still not works for you, try to add a reproduction repo and I’ll try on my VSCode, but this field is no longer mandatory for vscode eslint extension starting from v2.0.4

[AaronWatson2975]

That did the trick! Thank you so much! 😄

[mike-4040]

Try to add this field in your settings.json https://github.com/B2o5T/graphql-eslint/blob/37c1579ae1a29c804fdca2baa1541e4e158d1631/.vscode/settings.json#L20

@dimaMachina, Please, please add this to the Documentation, I've spent two whole days trying to figure this out.

[AaronWatson2975]

Just a note for anyone that runs into this in the future. After doing some thinking, I think this might have been caused by my NPM setup, not VSCode. I'm not sure how you automatically set those values in settings.json but I do know NPM post-install scripts are blocked on this computer, so that could have been the reason I ran into this.