Prettier and ESLint Setup for Svelte.js

05/20/20191 Min Read — In JavaScript, Svelte.js

1. Installation

You need to install the following packages as dev dependencies:

yarn add --dev prettier eslint eslint-config-prettier eslint-plugin-prettier prettier-plugin-svelte eslint-plugin-svelte3

or

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

2. Configuration

Create an .eslintrc file in your project root directory:

{
"plugins": ["prettier", "svelte3"],
"extends": ["prettier"],
"rules": {
"prettier/prettier": "error"
}
}

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 prettier.config.js in your project directory.

module.exports = {
tabWidth: 2,
semi: false,
singleQuote: true,
trailingComma: 'es5',
plugins: ['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

Further Reading