VS Code integration, and playing nice with the svelte-vscode plugin

[Bellarmine-Head]

FWIW,

Here is a set up for VS Code as of December 2019 that works nicely for me wrt eslint-plugin-svelte3.

My package.json contains this:-

    "eslint": "^6.8.0",
    "eslint-plugin-svelte3": "^2.7.3"

My VS Code's settings.json contains this:-

    "svelte.plugin.typescript.enable": false,
    "eslint.validate": [
        "javascript",
        "svelte"
    ]

My .eslintrc.json file contains this:-

{
    "env": {
        "browser": true,
        "es2017": true
    },
    "parserOptions": {
        "ecmaVersion": 2017,
        "sourceType": "module"
    },
    "extends": [
        "eslint:recommended"
    ],
    "plugins": [
        "svelte3"
    ],
    "overrides": [
        {
            "files": [
                "**/*.svelte"
            ],
            "processor": "svelte3/svelte3"
        }
    ],
    "ignorePatterns": ["build/"],
    "rules": {
        "no-var": "error",
        "semi": "error",
        "max-params": [
            "error",
            4
        ],
        "eqeqeq": "error"
    }
}

I have James Birtles's Svelte VSCode plugin installed. Its .prettierrc file in my project (at the same folder level as the .eslintrc.json file) contains this:-

{
  "svelteSortOrder" : "markup-scripts-styles",
  "svelteStrictMode": true,
  "svelteBracketNewLine": true,
  "svelteAllowShorthand": false
}

so that I can format .svelte files and have <!-- comments --> at the top of document.

I have found that wrt https://github.com/sveltejs/eslint-plugin-svelte3/blob/master/INTEGRATIONS.md#visual-studio-code

a) I did not need nor want:-

{
  "files.associations": {
    "*.svelte": "html"
  }
}

and

b) the following is invalid syntax in VSCode's settings.json:-

{
  "eslint.validate": [
    "javascript",
    "javascriptreact",
    {
      "language": "html",
      "autoFix": true
    }
  ]
}

and all I actually needed was:-

    "eslint.validate": [
        "javascript",
        "svelte"
    ]

(I left out "javascriptreact" because I do Svelte and not React 😄 )

[Conduitry]

There's a note on the page you linked to:

If you are using an extension that provides Svelte syntax highlighting, don't associate *.svelte files with the html language, and instead enable the ESLint extension on "language": "svelte".

Should this be made more prominent?

Using "svelte" vs { "language": "svelte", "autoFix": true } shouldn't affect anything really. The autoFix is needed for html because that's not enabled by default in the language, but I think if the definition of the svelte language you're using enables it itself, you're fine either way.

[lud]

I had to put this configuration in order to let eslint format my svelte js code:

"svelte.plugin.svelte.format.enable": false

[jhechtf]

I seem to be running into the same issue, but @lud 's fix didn't work for me.

ESLint Version: 6.8.0
ESLint-Svelte3 Version: 2.7.3

*.eslint.js`

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

The error I get from my ESLint channel output is the following

[Error - 8:33:24 PM] Error: ESLint configuration of processor in 'front-end.eslintrc.js#overrides[0]' is invalid: 'svelte3/svelte3' was not found.
at validateProcessor (C:\Users\Jim\projects\written-word\front-end\node_modules\eslint\lib\shared\config-validator.js:227:15)
at validateConfigArray (C:\Users\Jim\projects\written-word\front-end\node_modules\eslint\lib\shared\config-validator.js:336:9)
at CascadingConfigArrayFactory._finalizeConfigArray (C:\Users\Jim\projects\written-word\front-end\node_modules\eslint\lib\cli-engine\cascading-config-array-factory.js:417:13)
at CascadingConfigArrayFactory.getConfigArrayForFile (C:\Users\Jim\projects\written-word\front-end\node_modules\eslint\lib\cli-engine\cascading-config-array-factory.js:271:21)
at CLIEngine.isPathIgnored (C:\Users\Jim\projects\written-word\front-end\node_modules\eslint\lib\cli-engine\cli-engine.js:951:18)
at CLIEngine.executeOnText (C:\Users\Jim\projects\written-word\front-end\node_modules\eslint\lib\cli-engine\cli-engine.js:868:38)
at c:\Users\Jim.vscode\extensions\dbaeumer.vscode-eslint-2.0.15\server\out\eslintServer.js:1:37996
at ae (c:\Users\Jim.vscode\extensions\dbaeumer.vscode-eslint-2.0.15\server\out\eslintServer.js:1:43747)
at c:\Users\Jim.vscode\extensions\dbaeumer.vscode-eslint-2.0.15\server\out\eslintServer.js:1:37967
at c:\Users\Jim.vscode\extensions\dbaeumer.vscode-eslint-2.0.15\server\out\eslintServer.js:1:38995

[wahidshafique]

I am getting the exact same issues as @jhechtf Running on a windows 10 machine, I tried everything and I keep getting said override error

[wahidshafique]

@jhechtf Hey I think I may have found a solution, for me I was working in a nested folder, in vscode I changed this in my settings.json

"eslint.workingDirectories": ["./whatever dir you work out of"]

This caused all the errors to go away

[richardeschloss]

Update 05/09/2020: this is what I needed...

• VScode: 1.45.0
• ESLint VScode extension: 2.1.5 (<-- this was the key change needed to fix " 'svelte3/svelte3' was not found" error)
• Required settings.json:

"eslint.validate": [
   "javascript",
   "svelte"
]

[soanvig]

I had eslint working in svelte files from CLI, but not in VSC (so not auto-save fix goodies).

I can confirm @richardeschloss solution works.

[dummdidumm]

Closing as this is now also explained at https://github.com/sveltejs/eslint-plugin-svelte3/blob/master/INTEGRATIONS.md#visual-studio-code

[PierBover]

Thanks @Bellarmine-Head !

I had to add this to my .vscode/settings.json to make it work:

    "eslint.validate": [
        "javascript",
        "svelte"
    ]

[jdukleth]

I had to put this configuration in order to let eslint format my svelte js code:

"svelte.plugin.svelte.format.enable": false

This was a life saver, thank you. It was doing the changes then immediately undoing them until I put this in.