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

Usage with .vue files

ESLint Flat Config

eslint.config.js
import { mergeProcessors } from 'eslint-merge-processors'; import pluginVue from 'eslint-plugin-vue'; import processorVueBlocks from 'eslint-processor-vue-blocks'; import js from '@eslint/js'; import graphqlPlugin from '@graphql-eslint/eslint-plugin'; export default [ { files: ['**/*.js'], processor: graphqlPlugin.processor, rules: js.configs.recommended.rules, }, ...pluginVue.configs['flat/recommended'], { files: ['**/*.vue'], // Vue still needs to be parsed by the Vue parser for normal linting. But GraphQL's lint needs to lint only the JS/TS part, // so extract those as blocks using eslint-processor-vue-blocks. This turns the script parts of Vue SFCs into virtual JS/TS // blocks inside ESLint. ESLint can then parse the JS/TS to find GraphQL parts. And finally, graphql-eslint can lint the resulting GraphQL processor: mergeProcessors([ pluginVue.processors.vue, processorVueBlocks({ blocks: { script: true, scriptSetup: true, customBlocks: true, }, }), ]), }, { files: ['**/*.graphql'], languageOptions: { parser: graphqlPlugin.parser, }, plugins: { '@graphql-eslint': graphqlPlugin, }, rules: { '@graphql-eslint/no-anonymous-operations': 'error', '@graphql-eslint/no-duplicate-fields': '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', '*.vue'], parser: 'vue-eslint-parser', processor: '@graphql-eslint/graphql', extends: ['eslint:recommended'], env: { es2022: true, }, }, { files: ['*.graphql'], parser: '@graphql-eslint/eslint-plugin', plugins: ['@graphql-eslint'], rules: { '@graphql-eslint/no-anonymous-operations': 'error', '@graphql-eslint/no-duplicate-fields': 'error', '@graphql-eslint/naming-convention': [ 'error', { OperationDefinition: { style: 'PascalCase', forbiddenPrefixes: ['Query', 'Mutation', 'Subscription', 'Get'], forbiddenSuffixes: ['Query', 'Mutation', 'Subscription'], }, }, ], }, }, ], };
Last updated on