Svelte TypeScript code is not type checked

[romelperez]

Before You File a Bug Report Please Confirm You Have Done The Following...

• I have tried restarting my IDE and the issue persists.
• I have updated to the latest version of the packages.

What version of ESLint are you using?

8.28.0

What version of eslint-plugin-svelte are you using?

2.14.1

What did you do?

Configuration

module.exports = {
  root: true,
  plugins: ['svelte', '@typescript-eslint'],
  parser: '@typescript-eslint/parser',
  parserOptions: {
    tsconfigRootDir: __dirname,
    project: './tsconfig.json',
    extraFileExtensions: ['.svelte']
  },
  overrides: [
    {
      files: ['*.svelte'],
      parser: 'svelte-eslint-parser',
      parserOptions: {
        parser: '@typescript-eslint/parser'
      }
    }
  ],
  extends: [
    'eslint:recommended',
    'plugin:@typescript-eslint/recommended',
    'plugin:svelte/recommended'
  ],
  ignorePatterns: [
    'tests',
    'playwright.config.ts',
    'svelte.config.js',
    '*.cjs'
  ],
  settings: {
    svelte: {
      kit: {
        files: {
          routes: 'src/routes'
        }
      }
    }
  },
  env: {
    browser: true,
    node: true
  }
};

<script lang="ts">
  import Header from './Header.svelte';

  let myvar = 100;

  myvar = '100';

  console.log(myvar);
</script>

What did you expect to happen?

The linter should throw error in the Svelte component since there is a type check error.

What actually happened?

No error was thrown.

Link to GitHub Repo with Minimal Reproducible Example

SvelteKit project with ESLint, TypeScript, and eslint-plugin-svelte: https://github.com/romelperez/sveltekit-app-eslint-plugin-svelte

You can run:

npm install
npm run build
npm run lint

Additional comments

Thank you!

[ota-meshi]

Thank you for posting issue.

No error was thrown.

Which eslint rule did you expect to error?
As far as I know, I don't think there is an ESLint rule that checks for that type error. Because that's what TypeScript already checks.

Or are you talking about type checking in TypeScript? If so, this issue is not about this plugin as it is an ESLint plugin.

[ota-meshi]

It looks like you've already configured TypeScript to report those errors in your repository when you run npm run check.

[romelperez]

@ota-meshi, yes, I mean the basic type checking in TypeScript.

Oh my gosh, it was my bad for not understanding that TypeScript type checking was done with that NPM script.

Thank you for helping me out clarifying that one!

Arigatou hosaimasu, Ota-san!

[OJFord]

@ota-meshi Is my expectation wrong here too? I'm not using typescript at the moment, but I have a few rules in my eslint config:

import svelte from "eslint-plugin-svelte";

export default [
  "eslint:recommended",

  {
    ignores: [
      "**/target/*",
    ],
  },

  {
    languageOptions: {
      globals: {
        document: true,
        process: true,
      },
    },

    plugins: {
      svelte,
    },

    processor: svelte.processors.svelte,

    rules: {
      "comma-dangle": [
        "error", "always-multiline",
      ],
      "array-bracket-newline": [
        "error",
        {
          minItems: 1,
        },
      ],
      indent: [
        "error", 2,
      ],
      "object-curly-newline": [
        "error",
        {
          minProperties: 1,
        },
      ],
    },
  },
];

which seem only to be applied to .js files, not the <script>s in .svelte files. Is this expected behaviour, does the plugin only support the supplied svelte/* rules, not built-in eslint ones?