Error when used with eslint-plugin-graphql in v2.5.0

What version of eslint are you using? 4.15.0

What version of prettier are you using? 1.10.2

What version of eslint-plugin-prettier are you using? 2.5.0

Please paste any applicable config files that you’re using (e.g. .prettierrc or .eslintrc files) Relevant rules:

{
    'prettier/prettier': [
      1,
      {
        printWidth: 120,
        trailingComma: 'es5',
        singleQuote: true,
        semi: false,
      },
    ],
    'graphql/template-strings': [
      2,
      {
        env: 'literal',
        schemaJson: require('./graphql/schema.json'),
      },
    ],
}

What source code are you linting? This seems to happen for any .graphql file while using eslint-plugin-graphql (I’m on version 1.4.1).

What did you expect to happen? It should lint correctly.

What actually happened? In eslint-plugin-prettier 2.4.0 everything works, but since 2.5.0 I get the following error:

Syntax Error: Unexpected Name "ESLintPluginGraphQLFile" (1:1)
> 1 | ESLintPluginGraphQLFile`#import "./redacted-file-name.graphql"
    | ^

Assuming this has to do with the plugin now passing the filename to prettier, and eslint-plugin-graphql causes graphql files to have a weird filename reported somehow?

[BPScott]

After doing some deep pondering trying to wrangle this. I believe I understand what is going on and the best way for fix this.

I don’t think there needs to be a processedFileExtensions option. Instead people can disable the prettier rule for a subset of files using eslint overrides. Add an overrides section to the bottom of your eslint config, after your rules: {} like so:

{
  "rules": {},
  "overrides": [
    {
      "files": ["*.graphql", "*.gql"],
      "rules": {
        "prettier/prettier": "off"
      }
    }
  ]
}

This shall disable the prettier rules for graphql, instead of forcing the parser to be potentially incorrect for all files.

---

The problem occurs because eslint-plugin-graphql registers an eslint processor that runs over .graphql and .gql files which transforms those files into a block of JS that eslint can understand (basically wrapping the file content in a tagged template literal so it becomes valid JS). This processor runs for all files before all rules, and there is no way to say “only allow this parser for a subset of rules”. This is reasonable as processors are designed to extract javascripty parts from a file rather than teach eslint about a whole new language and you’d want all existing rules to run over those pieces of extracted JS.

I don’t think there is any value in forcing the parser for graphql files as the processor is not considered autofixable and the processor currently swallows up all linting issues that aren’t their own rules. Thus issues raised by the prettier/prettier rule would never be visible and would never be autofixed. There is no point in running prettier over these files if the results will never be exposed. If eslint-plugin-graphql fixes their code to expose rule violations other than their own then it would be straightforward to enable prettier, but forcing the ‘babylon’ parser, for graphql and gql:

{
  "rules": {},
  "overrides": [
    {
      "files": ["*.graphql", "*.gql"],
      "rules": {
        "prettier/prettier": ["error", {"parser": "babylon"}]
      }
    }
  ]
}

[hedgepigdaniel]

I found that its also possible to work around this problem without downgrading eslint-plugin-prettier by instead using its configuration option to specify the parser:

rules: {
  'prettier/prettier': [1, {
    parser: 'babylon',
  }],
},

Not sure if this has any unintended side effects - I assume not, since you would not need to use anything except a javascript parser from within eslint (which only deals with javascript).