Note: updated instructions for eslint-plugin-svelte3 on 2019-10-30.

1. Installation

You need to install the following packages as dev dependencies:

npm install --save-dev prettier eslint prettier-plugin-svelte eslint-plugin-svelte3

2. Configuration

Create an .eslintrc.json file in your project root directory:

{
  "env": {
    "browser": true,
    "es6": true
  },
  "parserOptions": {
    "ecmaVersion": 2019,
    "sourceType": "module"
  },
  "plugins": ["svelte3"],
  "extends": ["eslint:recommended"],
  "overrides": [
    {
      "files": ["**/*.svelte"],
      "processor": "svelte3/svelte3"
    }
  ],
  "rules": {
    "prettier/prettier": "error",
    "svelte3/lint-template": 2
  }
}

If you want to know more about how to run prettier and eslint together, you can read the prettier documentation.

You also need a configuration file for prettier. Create a file called .prettierrc.json in your project directory.

{
  "tabWidth": 2,
  "semi": false,
  "singleQuote": true,
  "trailingComma": "es5",
  "plugins": ["prettier-plugin-svelte"]
}

You can see all options at the official prettier homepage.

3. How to Use

You can format the code with prettier CLI. Assuming you want to format your main app file in src/App.svelte:

prettier --write --plugin-search-dir=. src/App.svelte

You can can also run the eslint CLI:

eslint --fix src/App.svelte

Or you can format all files with a .svelte extension. Add this script to package.json:

{
  "scripts": {
    "format": "npx prettier --write \"{,!(node_modules)/**/}*.{js,jsx}\""
  }
}

The script makes use of a glob to format files recursively.

Further Reading