Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Issue parsing .svelte files when using Flat Config #584

Closed
eagerestwolf opened this issue Sep 28, 2023 · 1 comment
Closed

Issue parsing .svelte files when using Flat Config #584

eagerestwolf opened this issue Sep 28, 2023 · 1 comment

Comments

@eagerestwolf
Copy link

eagerestwolf commented Sep 28, 2023

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\eslint-plugin-prettier@5.0.0_eslint-config-prettier@9.0.0_eslint@8.50.0_prettier@3.0.3\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.

@JounQin
Copy link
Member

JounQin commented Oct 14, 2023

close in favor of #588

@JounQin JounQin closed this as completed Oct 14, 2023
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Labels
None yet
Projects
None yet
Development

No branches or pull requests

3 participants
@eagerestwolf @JounQin and others