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 🔗︎