ESLint misses broken imports, incorrectly reports $lib imports as broken or reports nothing at all

Describe the bug I had the problem that my ESLint configuration throws errors on $lib/... imports so I created a new SvelteKit project to find out how that should be handled. However there I have the opposite problem that ESLint import checking is not working at all, as it doesn’t even warn me when an import does not exist.

Logs and To Reproduce There is no output from eslint even though ‘thisdoesnot/exist.js’ is not there and fails in the npm run dev step:

npm init svelte@next sveltetest
cd sveltetest
npm install
echo "<script>import doesnotexist from 'thisdoesnot/exist.js'</script>" >> src/routes/index.svelte
$ npm run lint      

> ~TODO~@0.0.1 lint
> prettier --check --plugin-search-dir=. . && eslint --ignore-path .gitignore .

Checking formatting...
[warn] package-lock.json
[warn] package.json
[warn] src/routes/index.svelte
[warn] Code style issues found in the above file(s). Forgot to run Prettier?
sveltetest$ eslint --ignore-path .gitignore .

/tmp/sveltetest/src/routes/index.svelte
  3:16  warning  'doesnotexist' is defined but never used  @typescript-eslint/no-unused-vars

✖ 1 problem (0 errors, 1 warning)

npm run dev -- --open
> ~TODO~@0.0.1 dev
> svelte-kit dev

  SvelteKit v1.0.0-next.109

  local:   http://localhost:3000
  network: not exposed

  Use --host to expose server to other devices on this network

Failed to resolve import "thisdoesnot/exist.js" from "src/routes/index.svelte". Does the file exist?

Expected behavior

1. Correct imports should not be shown as errors, even if they contain $lib.
2. Incorrect imports should cause errors.
3. ESLint output should always be visible when calling npm run lint.

Information about your SvelteKit Installation:

Diagnostics

• The output of npx envinfo --system --npmPackages svelte,@sveltejs/kit,vite --binaries --browsers

  System:
    OS: Linux 5.12 Arch Linux
    CPU: (8) x64 Intel(R) Core(TM) i7-9700 CPU @ 3.00GHz
    Memory: 7.21 GB / 15.42 GB
    Container: Yes
    Shell: 5.1.8 - /bin/bash
  Binaries:
    Node: 16.2.0 - /usr/bin/node
    npm: 7.14.0 - /usr/bin/npm
  Browsers:
    Chromium: 90.0.4430.212
  npmPackages:
    @sveltejs/kit: next => 1.0.0-next.109 
    svelte: ^3.34.0 => 3.38.2 

• Your browser: Firefox 89

• Your adapter (e.g. Node, static, Vercel, Begin, etc…): The default one from npm init svelte@next, maybe static?

Severity It is not blocking but annoying.

Additional context I think there are three issues relating to ESLint:

1. When using the SvelteKit default ESLint configuration, ESLint does not notice broken imports at all.
2. When using another ESLint configuration, such as the one from the SvelteKit repository, ‘$lib’ errors that are correct cause errors by ESLint.
3. Even if ESLint notices any errors or warnings, npm run lint does not output them. I assume that prettier exits with an error code and stops the second part of the && from being executed.

[stalkerg]

Okay, I solve it for ESLint by eslint-import-resolver-custom-alias plugin. This is my config:

    "settings": {
        "import/resolver": {
            "eslint-import-resolver-custom-alias": {
                "alias": {
                    "$lib":"./src/lib",
                    "$app":"./.svelte-kit/runtime/app",
                    "@sveltejs":"./.svelte-kit/dev"
                },
                "extensions": [".js"]
            },
        }
    },

I think we should have this in the default template.

[iva2k]

I added a bit of stuff to the setup to resolve the issue like this:

1. npm i -D eslint-plugin-import eslint-import-resolver-typescript
2. Add few lines to .eslintrc.cjs:

{
  extends: [
    'eslint:recommended',
    'plugin:@typescript-eslint/recommended',
+    'plugin:import/recommended',
    'prettier'
  ],
  plugins: [
    ...
+    'import'
  ],
  settings: {
+    'import/resolver': {
+      typescript: {}
+    },
    ...
  },
  parserOptions: {
+    project: ['./tsconfig.json', './tsconfig.lint.json'],
+    tsconfigRootDir: './',
    ...
  }
}

1. Create file tsconfig.lint.json with:

{
  "extends": "./tsconfig.json",
  "include": ["./playwright.config.ts", "./svelte.config.js", "./tests/**/*.ts"]
}

1. Add few lines to tsconfig.json:

  "compilerOptions": {
    ...
+    "paths": {
+      "$app": ["./.svelte-kit/runtime/app"],
+      "$app/*": ["./.svelte-kit/runtime/app/*"],
+      "$lib": ["./src/lib"],
+      "$lib/*": ["./src/lib/*"]
+    }
  }
}

These changes fix the issue for me. I think those deserve to be added to svelte-kit templates.