Eslint not working with my svelte components

[js2me]

Here is my eslint config

module.exports = {
    extends: ['eslint:recommended', 'prettier'],
    parserOptions: {
        ecmaVersion: 2019,
        sourceType: 'module'
    },
    env: {
        es6: true,
        browser: true
    },
    plugins: [ 'svelte3' ],
    overrides: [
        {
            files: '*.svelte',
            processor: 'svelte3/svelte3'
        }
    ],
    globals: {
        "module": true,
        "process": true,
    },
    rules: {
        // ...
    },
    settings: {
        // ...
    } 
};

Here is dev. dependencies of package.json:

Where is contains my svelte components:

I have non formatted code:

And what tell me eslint:

After eslint . and eslint . --fix commands the code of svelte component still non formatted

I'm sure that I'm doing something wrong, hope on your help.

[Conduitry]

https://github.com/sveltejs/eslint-plugin-svelte3#using-the-cli https://eslint.org/docs/user-guide/command-line-interface#--ext

When linting directories, you need to tell ESLint which files to lint with the --ext option - otherwise it will only lint .js files.

[js2me]

@Conduitry I've updated my config to:

{
    "root": true,
    "rules": {
        "indent": [2, "tab", { "SwitchCase": 1 }],
        "semi": [2, "always"],
        "keyword-spacing": [2, { "before": true, "after": true }],
        "space-before-blocks": [2, "always"],
        "no-mixed-spaces-and-tabs": [2, "smart-tabs"],
        "no-cond-assign": 0,
        "no-unused-vars": 2,
        "object-shorthand": [2, "always"],
        "no-const-assign": 2,
        "no-class-assign": 2,
        "no-this-before-super": 2,
        "no-var": 2,
        "no-unreachable": 2,
        "valid-typeof": 2,
        "quote-props": [2, "as-needed"],
        "one-var": [2, "never"],
        "prefer-arrow-callback": 2,
        "prefer-const": [2, { "destructuring": "all" }],
        "arrow-spacing": 2,
        "no-inner-declarations": 0
    },
    "env": {
        "es6": true,
        "browser": true,
        "node": true,
        "mocha": true
    },
    "extends": [
        "eslint:recommended",
        "plugin:import/errors",
        "plugin:import/warnings"
    ],
    "plugins": ["svelte3"],
    "parserOptions": {
        "ecmaVersion": 9,
        "sourceType": "module"
    },
    "settings": {
        "import/core-modules": ["svelte"]
    }
}

And now I see this error:

When I run command npx eslint src/* --ext .svelte,.js -c .eslintrc.json --fix I see

What's wrong?

[Conduitry]

Your new config doesn't have the overrides section specifying the preprocess option, which is necessary with ESLint 6 and version 2 of this plugin.

[js2me]

@Conduitry thanks for your help! Now it works but I still have some problems with lint like empty spaces:
After npx eslint src/* --ext .svelte,.js -c .eslintrc.json --fix command:

[js2me]

@Conduitry Fixed it after adding "no-multi-spaces" rules but it not works for styles and html templates

[Conduitry]

That's expected. This is only for linting the javascript parts of your components - <script> tags and template {expressions}.

[js2me]

@Conduitry Thanks for your help!

[js2me]

Just if somebody will want to integrate eslint svelte in VS Code just needs to update workspace config:

{
    "eslint.autoFixOnSave": false,
    "eslint.validate": [
        "javascript",
        "javascriptreact",
        {"language": "svelte", "autoFix": true}
    ],
    "eslint.enable": true

This line {"language": "svelte", "autoFix": true} allows vs code to validate .svelte files

[SteveALee]

@js2me I just tried your code settings with "no vars" set but am not getting any errors in code (works fine from CLI). Do you know if anything might have changed recently?

[SteveALee]

to answer my own question: it's the files.associations setting that the svelte offical docs say use. When I removed that the lint errors appear. I guess the validate option was getting overridden.