language rules not applied in *.svelte script blocks?

[martaver]

Hi,

I'm probably misunderstanding how this plugin is supposed to work. I was expecting that the rules that are applied for vanilla *.ts files should also be applies in *.svelte files inside the <script lang="ts"> tag.

Currently, I'm seeing the no-var rule only being applied in *.ts files, but not inside a <script lang="ts"> tag.

If I explicitly add the no-var rule to the *.svelte override, then the rule does get applied in the script tag.

Is this a bug, or intended behaviour?

If it's intended behaviour, can someone explain to me what the rationale is behind not keeping the TS rules in sync in and out of svelte files?

[dummdidumm]

Please provide your eslint config. Does it look similar to the one in the docs?

[martaver]

Sure it's

module.exports = {
	root: true,
	parser: '@typescript-eslint/parser',
	extends: [
		'eslint:recommended', 
		'plugin:@typescript-eslint/recommended', 
		'plugin:@typescript-eslint/recommended-requiring-type-checking', 
		'prettier'
	],
	plugins: ['svelte3', '@typescript-eslint'],
	ignorePatterns: ['*.cjs', 'svelte.config.js'],
	overrides: [{ 
		files: ['*.svelte'], 
		processor: 'svelte3/svelte3'
	}],
	settings: {
		'svelte3/typescript': () => require('typescript')
	},
	parserOptions: {
		tsconfigRootDir: __dirname,
		project: ['./tsconfig.json'],
		extraFileExtensions: ['.svelte'],
		sourceType: 'module',
		ecmaVersion: 2019
	},
	env: {
		browser: true,
		es2017: true,
		node: true
	}
};

I'm running this on a fresh init of sveltekit with npm init svelte@next foo.

E.g. of the problem is: in src/lib/form.ts if I change let current_token to var current_token and lint fix, the var gets switched back to let, which is correct. If I do the same thing with let count in Counter.svelte it remains var.

[trihlord]

I did reproduce the issue on the project: https://github.com/Vlad1m1ru5/svegeo

Furthermore, running eslint with --fix flag breaks the following code:

<!-- hand written code -->
<button on:click={increment}>
  Clicks: {count}
</button>
<!-- formated code -->
<button on:click={increment}>
  Clicks: {count;}
</button>

@dummdidumm could this be caused by incompatibility of eslint-plugin-svelte3 with eslint-plugin-prettier?

[svenjacobs]

I'm facing the same issue. lint violations are not detected inside Svelte scripts though they work in plain .ts files.

This is my .eslintrc.cjs

module.exports = {
	root: true,
	parser: '@typescript-eslint/parser',
	extends: ['eslint:recommended', 'plugin:@typescript-eslint/recommended', 'prettier'],
	plugins: ['svelte3', '@typescript-eslint'],
	ignorePatterns: ['*.cjs'],
	overrides: [
		{
			files: ['*.svelte'],
			processor: 'svelte3/svelte3',
		},
		{
			files: ['*.ts'],
			extends: [
				'plugin:@typescript-eslint/recommended',
				'plugin:@typescript-eslint/recommended-requiring-type-checking',
			],
			parserOptions: {
				tsconfigRootDir: __dirname,
				project: ['./tsconfig.json'],
			},
		},
	],
	settings: {
		'svelte3/typescript': () => require('typescript'),
	},
	parserOptions: {
		sourceType: 'module',
		ecmaVersion: 2020,
		extraFileExtensions: ['.svelte'],
	},
	env: {
		browser: true,
		es2017: true,
		node: true,
	},
}

eslint: 8.10.0 eslint-config-prettier: 8.5.0 eslint-plugin-svelte3: 3.4.1 @typescript-eslint/eslint-plugin: 5.14.0 @typescript-eslint/parser: 5.14.0

[boojum]

I also was just bitten by this: none of the type-aware rules work in *.svelte files. Bear in mind that I'm talking here about Svelte, not SvelteKit project.

For example, in the following snippet

<script lang="ts">
  export let foo = 'bar'
  export let bar: string = 0
</script>

only unused-export-let is being flagged, there's nothing about string / number mismatch.

Relevant configs:

// .eslintrc.cjs
module.exports = {
  root: true,
  env: {
    browser: true,
    es2022: true,
    node: true,
  },
  parser: '@typescript-eslint/parser',
  parserOptions: {
    sourceType: 'module',
    tsconfigRootDir: __dirname,
    project: ['./tsconfig.json'],
    extraFileExtensions: ['.svelte'],
    ecmaVersion: 2021,
    ecmaFeatures: {
      impliedStrict: true,
    },
  },
  extends: [
    'eslint:recommended',
    'plugin:@typescript-eslint/recommended',
    'plugin:@typescript-eslint/recommended-requiring-type-checking',
    'prettier',
  ],
  plugins: ['svelte3', '@typescript-eslint'],
  ignorePatterns: ['*.cjs'],
  overrides: [{ files: ['*.svelte'], processor: 'svelte3/svelte3' }],
  settings: { 'svelte3/typescript': true },
}

// tsconfing.json
{
  "compilerOptions": {
    "baseUrl": ".",

    "target": "esnext",
    "module": "esnext",
    "moduleResolution": "node",

    "lib": ["esnext", "dom", "dom.iterable"],

    "declaration": true,
    "declarationDir": "types",
    "typeRoots": ["./node_modules/@types"],

    "noEmitOnError": true,
    "noErrorTruncation": true,

    "resolveJsonModule": true,
    "allowSyntheticDefaultImports": true,

    "useDefineForClassFields": true,
    "stripInternal": true,

    "strict": true,

    "allowJs": true,
    "checkJs": true
  },
  "include": ["**/*.ts", "src/**/*.d.ts", "src/**/*.js", "src/**/*.svelte"]
}

And for good measure also svelte and vite:

// svelte.config.ts
import sveltePreprocess from 'svelte-preprocess'

export default {
  preprocess: sveltePreprocess({ typescript: true, postcss: true }),
}

// vite.config.ts
import { defineConfig } from 'vite'
import { resolve } from 'path'
import { svelte } from '@sveltejs/vite-plugin-svelte'
import sveltePreprocess from 'svelte-preprocess'

export default defineConfig({
  root: resolve(__dirname, 'src'),
  publicDir: resolve(__dirname, 'public'),
  build: { outDir: resolve(__dirname, 'dist'), emptyOutDir: true },
  plugins: [
    svelte({
      preprocess: [sveltePreprocess({ typescript: true, postcss: true })],
    }),
  ],
})

[gurumaxi]

Same issue here, any updates on how to fix this bug?

[7nik]

To make it work in VSCode, but not just console, you need to set up the ESLint plugin - in the settings add "svelte" to the eslint.validate list.

But still, fixes produce incorrect code. So I switched to eslint-plugin-svelte which works much better in this sense.

[romelperez]

Hello! Any update on this issue?

I created a fresh SvelteKit project with ESLint and TypeScript and still the Svelte components source code in language TypeScript are not type checked.

This is an example repository: https://github.com/romelperez/sveltekit-app

To reproduce:

npm install
npm run build
npm run lint

There must be an error in this line code but it isn't.

I removed the ESLint Prettier plugin and added the added the NPM script to lint like eslint . --ext .ts,.svelte but still doesn't work.

For large Svelte/TypeScript components, this is a considerable limitation.

Thank you for your work!

[romelperez]

Hi @7nik , I tried eslint-plugin-svelte but the same issue happens there. I created a bug report there about this: https://github.com/ota-meshi/eslint-plugin-svelte/issues/340. Please let me know if you made it work. Thank you!

[romelperez]

Ahh, it looks like TypeScript type checking is checked with the NPM scripts: svelte-kit sync && svelte-check --tsconfig ./tsconfig.json, not with the linter.