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

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

Open
vrishtrix opened this issue May 13, 2024 · 1 comment

Comments

@vrishtrix
Copy link

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
Copy link
Member

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

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Projects
None yet
Development

No branches or pull requests

2 participants