Thanks to visit codestin.com
Credit goes to github.com

Skip to content

Issue parsing .svelte files when using Flat Config #584

@eagerestwolf

Description

@eagerestwolf

What version of eslint are you using?: 8.50.0

What version of prettier are you using?: 3.0.3

What version of eslint-plugin-prettier are you using?: 5.0.0

Please paste any applicable config files that you're using (e.g. .prettierrc or .eslintrc files)

prettier.config.js

/** @type {import("prettier").Config} */
export default {
  arrowParens: "always",
  bracketSameLine: true,
  bracketSpacing: true,
  endOfLine: "lf",
  htmlWhitespaceSensitivity: "css",
  overrides: [
    {
      files: "*svelte",
      options: {
        parser: "svelte"
      }
    }
  ],
  plugins: ["prettier-plugin-svelte", "prettier-plugin-tailwindcss"],
  printWidth: 100,
  proseWrap: "preserve",
  quoteProps: "as-needed",
  semi: true,
  singleAttributePerLine: false,
  singleQuote: false,
  svelteStrictMode: true,
  tabWidth: 2,
  trailingComma: "none",
  useTabs: false
};

eslint.config.js

For the sake of brevity, I didn't include all of my local includes and rules. This is an abbreviated version of the shared config I am using. Ignore the random trailing commas, I don't use trailing commas, but I copy and pasted parts of the shared config I use and VS Code insisted on putting in trailing commas.

import typescriptESLint from "@typescript-eslint/eslint-plugin";
import typescriptParser from "@typescript-eslint/parser";
import eslintConfigPrettier from "eslint-config-prettier";
import prettier from "eslint-plugin-prettier";
import svelte from "eslint-plugin-svelte";
import globals from "globals";
import svelteParser from "svelte-eslint-parser";

/** @type {import("eslint").Linter.FlatConfig[]} */
export default [
  {
    ignores: globalIgnores,
    languageOptions: {
      ecmaVersion: "latest",
    },
    linterOptions: {
      reportUnusedDisableDirectives: true,
    },
  },
  {
    ignores: globalIgnores,
    languageOptions: {
      ecmaVersion: "latest",
    },
    plugins: { prettier },
    rules: {
      ...prettier.configs.recommended.rules,
      "prettier/prettier": "error",
    },
  },
  {
    files: svelteFiles,
    ignores: svelteIgnores,
    languageOptions: {
      ecmaVersion: "latest",
      globals: {
        ...globals.browser,
        ...globals.es2017
      },
      parser: svelteParser,
      parserOptions: {
        extraFileExtensions: [".svelte"],
        parser: typescriptParser,
        project: "./tsconfig.json"
      }
    },
    plugins: {
      "@typescript-eslint": typescriptESLint,
      svelte
    },
    rules: {
      ...baseRules,
      ...typescriptBaseRules,
      ...typescriptOverrideRules,
      ...svelteRules
    }
  },
  {
    files: javascriptFiles,
    ignores: javascriptIgnores,
    languageOptions: {
      globals: {
        ...globals.es2017,
        ...globals.node
      }
    },
    rules: {
      ...baseRules,
      ...javascriptRules
    }
  },
  {
    files: typescriptFiles,
    ignores: typescriptIgnores,
    languageOptions: {
      ecmaVersion: "latest",
      globals: { ...globals.es2017, ...globals.node },
      parser: typescriptParser,
      parserOptions: {
        extraFileExtensions: [".svelte"],
        project: "./tsconfig.json"
      }
    },
    plugins: {
      "@typescript-eslint": typescriptESLint
    },
    rules: {
      ...baseRules,
      ...typescriptBaseRules,
      ...typescriptOverrideRules
    }
  },
  eslintConfigPrettier,
  {
    languageOptions: {
      parserOptions: {
        project: "./tsconfig.node.json"
      }
    }
  }
];

If you wish to see my actual eslint.config.js, this is it

import { garavest } from "@garavest/eslint-config";

/** @type {import("eslint").Linter.FlatConfig[]} */
export default [
  ...garavest.default,
  {
    languageOptions: {
      parserOptions: {
        project: "./tsconfig.node.json"
      }
    }
  }
];

What source code are you linting?

.svelte files in a SvelteKit project.

What did you expect to happen?

I expected to get a report of any code format issues in my code base.

What actually happened?

I got an error from ESLint :(

website on  main [✘!?] via  v18.17.1 took 17s
❯ pnpm eslint .

Oops! Something went wrong! :(

ESLint: 8.50.0

TypeError: Cannot read properties of undefined (reading 'includes')
    at C:\Users\Seth Murphy\sources\website\node_modules\.pnpm\[email protected][email protected][email protected][email protected]\node_modules\eslint-plugin-prettier\worker.js:115:27

Crazy thing is, I don't know why this error is being thrown. The plugin is reading context.parserPath which is correct for a flat config. For reference, this is the line that is causing the error. Everything else works fine, but then again Svelte is the only case I have where this plugin specifically needs to check which parser is used. I know ESLint is reading the config correctly because everything else works fine, just not this. If I change the config to remove Prettier, everything is fine. I'm kinda stumped, but I don't know much about creating ESLint plugins.

I now know the issue. Everyone say it with me now..."Flat Config". Ugh. I hate paying the early adopter tax sometimes. I don't really know how to get around this one either. I guess, I'll just have to tell this plugin to avoid .svelte files for the time being.

Metadata

Metadata

Assignees

No one assigned

    Labels

    No labels
    No labels

    Type

    No type

    Projects

    No projects

    Milestone

    No milestone

    Relationships

    None yet

    Development

    No branches or pull requests

    Issue actions