Svelte and ESLint

Question

A few days ago I decide to migrate frontend application to Svelte from Vanilla JS (specific reasons).

And at first I decided to configure eslint config. I spent about 3 hours to find an answer of how to integrate svelte into eslint and I didn't find nothing besides this plugin

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.

At the bottom of the [plugin page](https://github.com/sveltejs/eslint-plugin-svelte3) it says "Using this with the command line eslint tool shouldn't require any special actions. Just remember that if you are running eslint on a directory, you need to pass it the --ext flag to tell it which nonstandard file extensions you want to lint." I am not sure what files it means by "non standard", but did you try that? — 2pha, Jun 26 '19 at 23:24

score 18 · Answer 1 · answered May 04 '20 at 08:58

To use eslint with svelte 3, all you have to do is :

npm install \
  eslint \
  eslint-plugin-import \
  eslint-plugin-node \
  eslint-plugin-promise \
  eslint-plugin-standard \
  eslint-plugin-svelte3 \
  --save-dev

Add this script in package.json :

  "scripts": {
    "lint": "eslint . --ext .js,.svelte --fix"
  },

And add a file .eslintrc.js next to the package.json file :

module.exports = {
  parserOptions: {
    ecmaVersion: 2019,
    sourceType: 'module'
  },
  env: {
    es6: true,
    browser: true,
    node: true
  },
  extends: [
    'eslint:recommended'
  ],
  plugins: [
    'svelte3'
  ],
  ignorePatterns: [
    'public/build/'
  ],
  overrides: [
    {
      files: ['**/*.svelte'],
      processor: 'svelte3/svelte3'
    }
  ],
  rules: {
    // semi: ['error', 'never'] // uncomment if you want to remove ;
  },
  settings: {
    // ...
  }
}

Then you can run npm run lint to fix your files.

score 2 · Answer 2 · answered Jul 28 '19 at 20:12

ESLint (and linters in general) are good for finding and potentially fixing things that violate certain rules, but ESLint isn't primarily a formatting tool.

To format Svelte files automatically, you'll have better luck with Prettier and the Svelte plugin for Prettier.

If you're using Visual Studio Code, you can install the Svelte for VS Code plugin which will be able to format your files automatically when you save them (assuming you have formatOnSave turned on).

score 0 · Answer 3 · answered Jan 17 '20 at 21:13

I assume you are using VSCode by looking at your screenshots. At the documentation's page of the plugin you mention, there's an explanation of how to configure it in your code editor. ( https://github.com/sveltejs/eslint-plugin-svelte3/blob/master/INTEGRATIONS.md )

You'll need the ESLint extension installed.

Unless you're using .html for your Svelte components, you'll need to configure files.associations to associate the appropriate file extension with the html language. For example, to associate .svelte, put this in your settings.json:

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

Then, you'll need to tell the ESLint extension to also lint files with language html and to enable autofixing where possible. If you haven't adjusted the eslint.validate setting, it defaults to [ "javascript", "javascriptreact" ], so put this in your settings.json:

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

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".

Reload VS Code and give it a go!

Svelte and ESLint

3 Answers3