Fix report lint issues not on first char of file for .svelte and support ESLint fixes and suggestions

.eslintrc.cjs

@@ -119,5 +119,11 @@ module.exports = {
         'no-undef': 'off',
       },
     },
+    {
+      files: ['website/**/*.mdx/**'],
+      rules: {
+        'import/no-default-export': 'off',
+      },
+    },
   ],
 };

examples/svelte-code-file/eslint.config.js

@@ -1,18 +1,28 @@
-import svelteParser from 'svelte-eslint-parser';
+import { mergeProcessors } from 'eslint-merge-processors';
+import eslintPluginSvelte from 'eslint-plugin-svelte';
+import processorVueBlocks from 'eslint-processor-vue-blocks';
 import js from '@eslint/js';
 import graphqlPlugin from '@graphql-eslint/eslint-plugin';
 
 export default [
   {
-    files: ['**/*.js', '**/*.svelte'],
+    files: ['**/*.js'],
     processor: graphqlPlugin.processor,
     rules: js.configs.recommended.rules,
   },
+  ...eslintPluginSvelte.configs['flat/recommended'],
   {
     files: ['**/*.svelte'],
-    languageOptions: {
-      parser: svelteParser,
-    },
+    // `eslint-plugin-svelte` will set a default processor for `.svelte` files
+    // we use `eslint-merge-processors` to extend it
+    processor: mergeProcessors([
+      eslintPluginSvelte.processors.svelte,
+      processorVueBlocks({
+        blocks: {
+          script: true,
+        },
+      }),
+    ]),
   },
   {
     files: ['**/*.graphql'],

examples/svelte-code-file/package.json

@@ -13,8 +13,8 @@
   "devDependencies": {
     "@graphql-eslint/eslint-plugin": "workspace:*",
     "eslint": "9.14.0",
-    "svelte": "5.2.4",
-    "svelte-eslint-parser": "0.43.0",
-    "svelte2tsx": "0.7.26"
+    "eslint-merge-processors": "^0.1.0",
+    "eslint-plugin-svelte": "^2.46.0",
+    "eslint-processor-vue-blocks": "^0.1.2"
   }
 }

examples/svelte-code-file/test.svelte

@@ -1,6 +1,4 @@
 <script>
-/* eslint-disable no-unused-vars */
-
 const GET_USER = /* GraphQL */ `
   query {
     user {

examples/vue-code-file/eslint.config.js

@@ -1,18 +1,31 @@
-import vueParser from 'vue-eslint-parser';
+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', '**/*.vue'],
+    files: ['**/*.js'],
     processor: graphqlPlugin.processor,
     rules: js.configs.recommended.rules,
   },
+  ...pluginVue.configs['flat/recommended'],
   {
     files: ['**/*.vue'],
-    languageOptions: {
-      parser: vueParser,
-    },
+    // `eslint-plugin-vue` will set a default processor for `.vue` files
+    // we use `eslint-merge-processors` to extend it
+    processor: mergeProcessors([
+      pluginVue.processors.vue,
+      processorVueBlocks({
+        blocks: {
+          styles: false,
+          customBlocks: true,
+          script: true,
+          template: false,
+        },
+      }),
+    ]),
   },
   {
     files: ['**/*.graphql'],

examples/vue-code-file/package.json

@@ -12,8 +12,9 @@
   },
   "devDependencies": {
     "@graphql-eslint/eslint-plugin": "workspace:*",
-    "@vue/compiler-sfc": "3.5.13",
     "eslint": "9.14.0",
-    "vue-eslint-parser": "9.4.3"
+    "eslint-merge-processors": "^0.1.0",
+    "eslint-plugin-vue": "^9.31.0",
+    "eslint-processor-vue-blocks": "^0.1.2"
   }
 }

examples/vue-code-file/test.vue

@@ -2,8 +2,6 @@
   <span>test</span>
 </template>
 <script>
-/* eslint-disable no-unused-vars */
-
 const GET_USER = /* GraphQL */ `
   query {
     user {

package.json

@@ -45,7 +45,7 @@
     "prettier": "3.3.3",
     "prettier-plugin-tailwindcss": "0.6.9",
     "rimraf": "6.0.1",
-    "tsup": "^8.0.0",
+    "tsup": "^8.3.5",
     "tsx": "4.19.2",
     "turbo": "2.3.0",
     "typescript": "5.6.3",

packages/plugin/__tests__/__snapshots__/examples.spec.md

@@ -572,21 +572,71 @@ exports[`Examples > should work in svelte 1`] = `
     filePath: examples/svelte-code-file/test.svelte,
     messages: [
       {
-        column: 0,
-        line: 1,
+        column: 8,
+        endColumn: 16,
+        endLine: 2,
+        line: 2,
+        message: 'GET_USER' is assigned a value but never used.,
+        messageId: unusedVar,
+        nodeType: Identifier,
+        ruleId: no-unused-vars,
+        severity: 2,
+      },
+      {
+        column: 4,
+        endColumn: 9,
+        endLine: 3,
+        line: 3,
         message: Anonymous GraphQL operations are forbidden. Make sure to name your query!,
         messageId: no-anonymous-operations,
         nodeType: null,
         ruleId: @graphql-eslint/no-anonymous-operations,
         severity: 2,
+        suggestions: [
+          {
+            desc: Rename to \`user\`,
+            fix: {
+              range: [
+                40,
+                40,
+              ],
+              text:  user,
+            },
+          },
+        ],
       },
       {
-        column: 0,
-        line: 1,
+        column: 8,
+        endColumn: 24,
+        endLine: 10,
+        line: 10,
+        message: 'GET_ANOTHER_USER' is assigned a value but never used.,
+        messageId: unusedVar,
+        nodeType: Identifier,
+        ruleId: no-unused-vars,
+        severity: 2,
+      },
+      {
+        column: 10,
+        endColumn: 19,
+        endLine: 11,
+        line: 11,
         message: Operation "UserQuery" should not have "Query" suffix,
         nodeType: Name,
         ruleId: @graphql-eslint/naming-convention,
         severity: 2,
+        suggestions: [
+          {
+            desc: Rename to \`User\`,
+            fix: {
+              range: [
+                128,
+                137,
+              ],
+              text: User,
+            },
+          },
+        ],
       },
     ],
   },
@@ -615,6 +665,28 @@ exports[`Examples > should work in svelte 2`] = `
         ruleId: @graphql-eslint/naming-convention,
         severity: 2,
       },
+      {
+        column: 7,
+        endColumn: 15,
+        endLine: 2,
+        line: 2,
+        message: 'GET_USER' is assigned a value but never used.,
+        messageId: unusedVar,
+        nodeType: Identifier,
+        ruleId: no-unused-vars,
+        severity: 2,
+      },
+      {
+        column: 7,
+        endColumn: 23,
+        endLine: 10,
+        line: 10,
+        message: 'GET_ANOTHER_USER' is assigned a value but never used.,
+        messageId: unusedVar,
+        nodeType: Identifier,
+        ruleId: no-unused-vars,
+        severity: 2,
+      },
     ],
   },
 ]
@@ -626,21 +698,71 @@ exports[`Examples > should work in vue 1`] = `
     filePath: examples/vue-code-file/test.vue,
     messages: [
       {
-        column: 0,
-        line: 1,
+        column: 8,
+        endColumn: 16,
+        endLine: 5,
+        line: 5,
+        message: 'GET_USER' is assigned a value but never used.,
+        messageId: unusedVar,
+        nodeType: Identifier,
+        ruleId: no-unused-vars,
+        severity: 2,
+      },
+      {
+        column: 4,
+        endColumn: 9,
+        endLine: 6,
+        line: 6,
         message: Anonymous GraphQL operations are forbidden. Make sure to name your query!,
         messageId: no-anonymous-operations,
         nodeType: null,
         ruleId: @graphql-eslint/no-anonymous-operations,
         severity: 2,
+        suggestions: [
+          {
+            desc: Rename to \`user\`,
+            fix: {
+              range: [
+                40,
+                40,
+              ],
+              text:  user,
+            },
+          },
+        ],
       },
       {
-        column: 0,
-        line: 1,
+        column: 8,
+        endColumn: 24,
+        endLine: 13,
+        line: 13,
+        message: 'GET_ANOTHER_USER' is assigned a value but never used.,
+        messageId: unusedVar,
+        nodeType: Identifier,
+        ruleId: no-unused-vars,
+        severity: 2,
+      },
+      {
+        column: 10,
+        endColumn: 19,
+        endLine: 14,
+        line: 14,
         message: Operation "UserQuery" should not have "Query" suffix,
         nodeType: Name,
         ruleId: @graphql-eslint/naming-convention,
         severity: 2,
+        suggestions: [
+          {
+            desc: Rename to \`User\`,
+            fix: {
+              range: [
+                128,
+                137,
+              ],
+              text: User,
+            },
+          },
+        ],
       },
     ],
   },
@@ -669,6 +791,28 @@ exports[`Examples > should work in vue 2`] = `
         ruleId: @graphql-eslint/naming-convention,
         severity: 2,
       },
+      {
+        column: 7,
+        endColumn: 15,
+        endLine: 5,
+        line: 5,
+        message: 'GET_USER' is assigned a value but never used.,
+        messageId: unusedVar,
+        nodeType: Identifier,
+        ruleId: no-unused-vars,
+        severity: 2,
+      },
+      {
+        column: 7,
+        endColumn: 23,
+        endLine: 13,
+        line: 13,
+        message: 'GET_ANOTHER_USER' is assigned a value but never used.,
+        messageId: unusedVar,
+        nodeType: Identifier,
+        ruleId: no-unused-vars,
+        severity: 2,
+      },
     ],
   },
 ]

packages/plugin/__tests__/examples.spec.ts

@@ -109,12 +109,12 @@ describe('Examples', () => {
 
   it('should work in svelte', () => {
     const cwd = path.join(CWD, 'examples', 'svelte-code-file');
-    testESLintOutput(cwd, 2);
+    testESLintOutput(cwd, 4);
   });
 
   it('should work in vue', () => {
     const cwd = path.join(CWD, 'examples', 'vue-code-file');
-    testESLintOutput(cwd, 2);
+    testESLintOutput(cwd, 4);
   });
 
   it('should work in multiple projects', () => {

packages/plugin/src/graphql-config.ts

@@ -1,3 +1,4 @@
+import fs from 'node:fs';
 import path from 'node:path';
 import debugFactory from 'debug';
 import { GraphQLConfig, GraphQLExtensionDeclaration, loadConfigSync } from 'graphql-config';
@@ -7,10 +8,21 @@ import { ParserOptions } from './types.js';
 const debug = debugFactory('graphql-eslint:graphql-config');
 let graphQLConfig: GraphQLConfig;
 
+/**
+ * Filepath can be a virtual file, so we need to find the first existing path
+ *
+ */
+export function getFirstExistingPath(filePath: string): string {
+  while (!fs.existsSync(filePath)) {
+    filePath = path.dirname(filePath);
+  }
+  return filePath;
+}
+
 export function loadOnDiskGraphQLConfig(filePath: string): GraphQLConfig {
   return loadConfigSync({
     // load config relative to the file being linted
-    rootDir: path.dirname(filePath),
+    rootDir: getFirstExistingPath(path.dirname(filePath)),
     throwOnMissing: false,
     extensions: [codeFileLoaderExtension],
   });