Does not appear to work with Svelte

[Jakobud]

I have the following svelte.config.js setup:

import adapter from '@sveltejs/adapter-auto';
import preprocess from 'svelte-preprocess';
import eslint from '@nabla/vite-plugin-eslint';

/** @type {import('@sveltejs/kit').Config} */
const config = {
  kit: {
    adapter: adapter(),
    vite: () => {
      return {
        plugins: [
          eslint()
        ]
      }
    }
  },
  preprocess: preprocess({
    scss: {
      prependData: `@import './src/scss/global.scss';`
    }
  })
};

export default config;

When I run npm run dev I don't see any linting errors. I see linting errors when I manually run eslint from the terminal as expected.

Any clues?

[ArnaudBarre]

Yes this is because of the shouldLint option

I still check for ignored files afterwards, so maybe this option should be removed instead of having a default regex more and more complex.

Try eslint({ shouldLint: () => true }) and tell me if it works and if you have undesired noise or not

[Jakobud]

Doesn't appear to make a difference:

import adapter from '@sveltejs/adapter-auto';
import preprocess from 'svelte-preprocess';
import eslint from '@nabla/vite-plugin-eslint';

/** @type {import('@sveltejs/kit').Config} */
const config = {
  kit: {
    adapter: adapter(),
    vite: () => {
      return {
        plugins: [
          eslint({
            shouldLint: () => true
          })
        ]
      }
    }
  },
  preprocess: preprocess({
    scss: {
      prependData: `@import './src/scss/global.scss';`
    }
  })
};

export default config;

[ArnaudBarre]

Did you opened the app in your browser?

Vite is lazy and only transpile files on demand (and this plugin hook on file transformation to lint them).

I got it working with the default starter and this configuration:

vite: {
  plugins: [
    eslint({
      shouldLint: (path) => path.match(/\/src\/[^?]*\.(svelte|m?[jt]sx?)$/)
    })
  ]
},

In fact this option is needed for vue and svelte to avoid running eslint on in-memory file like index.svelte?svelte&type=style&lang.css

I will add svelte to the default regex on the next release

[Jakobud]

Oh okay so in the browser I get:

TypeError: shouldLint is not a function
    at TransformContext.transform (D:\repos\markdownpreview\node_modules\@nabla\vite-plugin-eslint\src\index.js:25:11)
    at Object.transform (D:\repos\markdownpreview\node_modules\vite\dist\node\chunks\dep-27bc1ab8.js:36672:53)
    at async doTransform (D:\repos\markdownpreview\node_modules\vite\dist\node\chunks\dep-27bc1ab8.js:55662:29)

Kinda of weird that an error like that doesn't show up in the terminal...

I tried both of thise:

shouldLint: (path) => path.match(/\/src\/[^?]*\.(svelte|m?[jt]sx?)$/) shouldLint: () => { return true }

same result

[Jakobud]

Oh it appears to be working now. I have no idea why. Just restarted the dev server. So I'm seeing linting errors but I also see warnings like this for every .svelte file:

[eslint] File not found D:/repos/myproject/src/routes/__layout.svelte?svelte&type=style&lang.css

[ArnaudBarre]

The last warning should not be visible if you use: shouldLint: (path) => path.match(/\/src\/[^?]*\.(svelte|m?[jt]sx?)$/)

[Jakobud]

Great I got it working now. Thank you for your help and patience. So one question, you say Vite is lazy and only transpiles when something is requested in the browser. Is there a way to force this plugin to lint whenever I save a file instead? There are many situations where I may edit a file and save it even though that component is not currently being used/requested in my open web browser.

[ArnaudBarre]

In that case I would personally only use the IDE. ESLint has no default watcher, but quickly searching on google gave me this repo: https://github.com/rizowski/eslint-watch