ESLint and Prettier with Svelte

Here is my typically setup for using ESLint and Prettier with Svelte.

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

Create the file .eslintrc.json in the project root directory containing the following:

{
"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"]
}

Create the file .prettierrc in the project root directory containing the following:

{
"arrowParens": "avoid",
"bracketSpacing": false,
"singleQuote": true,
"svelteSortOrder": "options-scripts-markup-styles",
"trailingComma": "none"
}

Create the file .prettierignore in the project root directory containing the following:

public/build

Add the following scripts in package.json:

  "format": "prettier --write '{public,src}/**/*.{css,html,js,svelte}'",
"lint": "eslint --fix --quiet src --ext .js,.svelte",

To run ESLint, enter npm run lint.

To run Prettier, enter npm run format.