sveltejs / prettier-plugin-svelte

Format your svelte components using prettier.
MIT License
735 stars 95 forks source link

Usage with eslint-plugin-prettier/svelte and @typescript-eslint/parser treats .svelte files as JSX #441

Open vrishtrix opened 4 months ago

vrishtrix commented 4 months ago

Following is the list of all dependencies and their versions:

"@typescript-eslint/eslint-plugin": "^7.8.0",
"@typescript-eslint/parser": "^7.8.0",
"eslint": "8.57.0",
"eslint-config-prettier": "^9.1.0",
"eslint-plugin-prettier": "^5.1.3",
"eslint-plugin-svelte": "^2.39.0",
"prettier-plugin-svelte": "^3.2.3",
"prettier-plugin-tailwindcss": "^0.5.14",

and following is the .eslintrc.json file:

{
    "parser": "@typescript-eslint/parser",
    "plugins": ["prettier"],
    "extends": [
        "eslint:recommended",
        "plugin:@typescript-eslint/recommended",
        "plugin:@typescript-eslint/recommended-requiring-type-checking",
        "plugin:svelte/prettier",
        "prettier"
    ],
    "parserOptions": {
        "project": "./tsconfig.json",
        "extraFileExtensions": [".svelte"]
    },
    "overrides": [
        {
            "files": ["*.svelte"],
            "parser": "svelte-eslint-parser",
            "parserOptions": {
                "parser": "@typescript-eslint/parser"
            }
        }
    ],
    "rules": {
        "prettier/prettier": [
            "error",
            {
                "plugins": [
                    "prettier-plugin-svelte",
                    "prettier-plugin-tailwindcss"
                ],
                "overrides": [
                    { "files": "*.svelte", "options": { "parser": "svelte" } }
                ],
                "printWidth": 120,
                "useTabs": true,
                "tabWidth": 4,
                "trailingComma": "all",
                "singleQuote": true,
                "semi": true,
                "importOrder": [
                    "<THIRD_PARTY_MODULES>",
                    "^@/(.*)$",
                    "^$env/(.*)$",
                    "^[./]"
                ],
                "endOfLine": "lf",
                "importOrderSeparation": true,
                "importOrderSortSpecifiers": true
            }
        ]
    }
}

and here's what happens when you lint:

image

Example +page.svelte:

<h1>Welcome to SvelteKit</h1>
<p>Visit <a href="https://kit.svelte.dev">kit.svelte.dev</a> to read the documentation</p>

and here's a workaround:

<div>
    <h1>Welcome to SvelteKit</h1>
    <p>
        Visit <a href="https://kit.svelte.dev">kit.svelte.dev</a> to read the documentation
    </p>
</div>;

(also note the ; at the end because of "semi": true)

dummdidumm commented 3 months ago

Please provide a reproduction repository so we can properly look into this