|
1 | 1 | # Usage with `.vue` files |
| 2 | + |
| 3 | +`graphql-eslint` can lint GraphQL documents inside Vue Single-File Components (.vue files). It does |
| 4 | +this in two steps: (1) extract the GraphQL documents from the Vue (or js/ts) file, and (2) lint the |
| 5 | +extracted GraphQL documents. |
| 6 | + |
| 7 | +If you don't embed GraphQL documents in your Vue files, you can skip this page. |
| 8 | + |
| 9 | +<Callout type="warning"> |
| 10 | + Due to [a limitation in |
| 11 | + graphql-tag-pluck](https://github.com/dimaMachina/graphql-eslint/issues/2103), lint violations |
| 12 | + will show up at the top of the Vue document, on the first character, not inline. |
| 13 | +</Callout> |
| 14 | + |
| 15 | +## Configuration |
| 16 | + |
| 17 | +Add the following configuration to your `eslint.config.js` file to setup `@graphql-eslint` plugin. |
| 18 | +The intermediate graphql files always have the .graphql extension. Make sure the second block |
| 19 | +matches those files, even if you use another extension for your project's GraphQL (e.g. .gql). |
| 20 | + |
| 21 | +<Callout type="warning"> |
| 22 | + Make sure the first section, which extracts GrahpQL from Vue files, comes **before** any other Vue |
| 23 | + rules. Otherwise, eslint may incorrectly rewrite all error messages to say only "clear." |
| 24 | +</Callout> |
| 25 | + |
| 26 | +```js filename="eslint.config.js" |
| 27 | +import graphqlPlugin from '@graphql-eslint/eslint-plugin' |
| 28 | + |
| 29 | +export default [ |
| 30 | + { |
| 31 | + // NOTE: Order matters! This has to happen FIRST, before any block that |
| 32 | + // includes the Vue parser (including e.g. recommended Vue ESLint rules). |
| 33 | + // It also has to be before the .graphql block, below |
| 34 | + // |
| 35 | + // Extract GraphQL from files for linting -- this creates .graphql files |
| 36 | + // that are then linted below |
| 37 | + // |
| 38 | + // graphql-eslint scans all files (using the processor lsited) and outputs |
| 39 | + // an intermediate file with the extracted GraphQL. That intermediate file |
| 40 | + // is then linted, generating the errors we see. The intermediate file has |
| 41 | + // a fixed .graphql extension, so you need to include that extension below |
| 42 | + // or these files won't be linted. |
| 43 | + files: ['**/*.js', '**/*.ts', '**/*.vue'], |
| 44 | + processor: graphqlPlugin.processor |
| 45 | + // NOTE: While you CAN put rules here to affect JS/TS/Vue files, those |
| 46 | + // rules won't affect GraphQL. To modify rules that effect GrahpQL inside |
| 47 | + // these files, add those to the block for .graphql files, below. |
| 48 | + }, |
| 49 | + // ...other config |
| 50 | + { |
| 51 | + // Lint all GraphQL files, including the intermediate ones above. If you |
| 52 | + // want to tune the rules that appear in your files, even Vue/JS/TS files, |
| 53 | + // put those rule changes HERE |
| 54 | + files: ['**/*.graphql'], // Add .gql extension if you use that |
| 55 | + languageOptions: { |
| 56 | + parser: graphqlPlugin.parser |
| 57 | + }, |
| 58 | + |
| 59 | + // Any rule overrides for GraphQL go HERE. For example, to enable |
| 60 | + // recommended operations rules |
| 61 | + plugins: { '@graphql-eslint': graphqlPlugin }, |
| 62 | + rules: { |
| 63 | + ...graphqlESLint.configs['flat/operations-recommended'].rules |
| 64 | + // Can also override the recommended rules here, e.g.: |
| 65 | + // "@graphql-eslint/naming-convention": ["off"], |
| 66 | + } |
| 67 | + } |
| 68 | +] |
| 69 | +``` |
0 commit comments