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 eslint . --fix commands the code of svelte component still non formatted

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

Answer 1

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.

Answer 2

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

Answer 3

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!