ESLint (https://eslint.org/) is a tool that bills itself as the “pluggable linting utility for JavaScript and JSX.” It can report many syntax errors and potential runtime errors. It can also report deviations from specified coding guidelines in order to make the code in an application more consistent.

To install everything needed to use ESLint in a Svelte or Sapper project, enter the following:

npm install -D eslint eslint-plugin-import eslint-plugin-svelte3

One benefit of the Svelte3 ESLint plugin is that it warns about unused CSS selectors. For more detail, see the eslint-plugin-svelte3 GitHub page (https://github.com/ sveltejs/eslint-plugin-svelte3).

To configure the use of ESLint, create the following file in the top directory of each Svelte app.

Listing D.1 The .eslintrc.json file

{
  "env": {
    "browser": true,
    "es6": true,
    "jest": true,
    "node": true
  },
  "extends": ["eslint:recommended", "plugin:import/recommended"],
  "overrides": [
    {
      "files": ["**/*.svelte"],
      "processor": "svelte3/svelte3"
    }
  ],
  "parserOptions": {
    "ecmaVersion": 2019,
    "sourceType": "module"
  },
  "plugins": ["import", "svelte3"]
}

Add the following npm script to package.json:

"lint": "eslint --fix --quiet src --ext .js,.svelte",

To run ESLint, enter npm run lint. Here are examples of messages that can be output by ESLint:

/Users/mark/.../svelte-and-sapper-in-action/travel-packing-ch14/src/Baskets.svelte
  18:6   error  'hoveringOverBasket' is assigned a value but never used  no-unused-vars
  20:11  error  'dragStart' is defined but never used                    no-unused-vars
  25:2   error  Mixed spaces and tabs                                    no-mixed-spaces-and-tabs

For more information on Svelte-specific ESLint options, see the eslint-plugin-svelte3 GitHub page (https://github.com/sveltejs/eslint-plugin-svelte3).

Many editors and IDEs, including VS Code, have extensions for running ESLint as code is entered or when files are saved.