Skip to Content
This is documentation for v4 of the plugin. For v3 click here.
ESLGraphQL-ESLint

Usage with code files .js/.jsx

You need to add a new configuration object in your eslint.config.js to setup GraphQL-ESLint processor for .js files.

eslint.config.js
import graphqlPlugin from '@graphql-eslint/eslint-plugin'; export default [ + { + files: ['**/*.js'], + processor: graphqlPlugin.processor + }, { files: ['**/*.graphql'], languageOptions: { parser: graphqlPlugin.parser }, plugins: { '@graphql-eslint': graphqlPlugin }, rules: { '@graphql-eslint/known-type-names': 'error' } } ]
💡
Tip

Under the hood, the processor extracts schema and operation files from files: ['**/*.js'] and treats them as virtual GraphQL documents with .graphql extensions. This enables the overrides you define for .graphql files, under files: ['**/*.graphql'], to be applied to the definitions within your code files.


GraphQL Config

graphql.config.js
export default { schema: 'schema.graphql', };

ESLint Flat Config

eslint.config.js
import js from '@eslint/js'; import graphqlPlugin from '@graphql-eslint/eslint-plugin'; export default [ { files: ['**/*.js'], processor: graphqlPlugin.processor, rules: { ...js.configs.recommended.rules, 'no-console': 'error', }, }, { files: ['**/*.graphql'], languageOptions: { parser: graphqlPlugin.parser, }, plugins: { '@graphql-eslint': graphqlPlugin, }, rules: { '@graphql-eslint/no-anonymous-operations': 'error', '@graphql-eslint/naming-convention': [ 'error', { OperationDefinition: { style: 'PascalCase', forbiddenPrefixes: ['Query', 'Mutation', 'Subscription', 'Get'], forbiddenSuffixes: ['Query', 'Mutation', 'Subscription'], }, }, ], }, }, ];

ESLint Legacy Config

⚠️
Warning

An eslintrc configuration file, is deprecated and support will be removed in ESLint v10.0.0. Migrate to an eslint.config.js file

.eslintrc.cjs
/** * Legacy config example, should be run with `ESLINT_USE_FLAT_CONFIG=false` environment variable in ESLint 9 */ module.exports = { root: true, // ❗️ It's very important that you don't have any rules configured at the top-level config, // and to move all configurations into the overrides section. Since JavaScript rules // can't run on GraphQL files and vice versa, if you have rules configured at the top level, // they will try to also execute for all overrides, as ESLint's configs cascade overrides: [ { files: ['*.js'], processor: '@graphql-eslint/graphql', extends: ['eslint:recommended'], env: { es2022: true, }, parserOptions: { sourceType: 'module', }, rules: { 'no-console': 'error', }, }, { files: ['*.graphql'], parser: '@graphql-eslint/eslint-plugin', plugins: ['@graphql-eslint'], rules: { '@graphql-eslint/no-anonymous-operations': 'error', '@graphql-eslint/naming-convention': [ 'error', { OperationDefinition: { style: 'PascalCase', forbiddenPrefixes: ['Query', 'Mutation', 'Subscription', 'Get'], forbiddenSuffixes: ['Query', 'Mutation', 'Subscription'], }, }, ], }, }, ], };
Last updated on