Skip to content

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

Open
@vrishtrix

Description

@vrishtrix

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)

Metadata

Metadata

Assignees

No one assigned

    Type

    No type

    Projects

    No projects

    Milestone

    No milestone

    Relationships

    None yet

    Development

    No branches or pull requests

    Issue actions