Tiaan du Plessis

ESLint and Prettier setup for Sapper

I recently started to get very into Svelte. The developer experience has been delightful, especially transitions and animations which have always felt a bit meh to me in React land.

In the world of Svelte, the meta-framework of choice is Sapper. It draws a close comparison to Next.js. I frequently use Next.js for projects at Full Facing. So it was an easy choice.

My first real Svelte/Sapper application is a marketing site for a development agency. As with any project, I consider it essential to have linting and formatting in place. It also forms the base of the Testing Trophy. Unfortunately, I usually forget the configuration steps quite quickly so I decided to document them here. Yes, you have been reading documentation the whole time.

Installing dependencies #

npm install -D eslint prettier

We start by installing ESLint and Prettier. We will also need plugins to support Svelte and Cypress. Cypress is included in the default Sapper template so I include it in the configuration. An ESLint configuration will also be needed to disable all formatting related rules. So ESLint and Prettier can play together nicely.

npm install -D prettier-plugin-svelte eslint-plugin-svelte3 eslint-config-prettier eslint-plugin-cypress

Configuration #

We can now create the configuration files for ESLint and Prettier as well as a .eslintignore file to ignore the build output directory.

touch .prettierrc.js .eslintrc.js .eslintignore

A lot of the configuration options are my preference, so update as you see fit.

// .prettierrc.js
module.exports = {
svelteSortOrder: 'styles-markup-scripts',
svelteStrictMode: true,
svelteBracketNewLine: true,
svelteAllowShorthand: false,
plugins: ['prettier-plugin-svelte']
}
// .eslintrc.js
module.exports = {
"extends": ["eslint:recommended", "prettier"],
parserOptions: {
ecmaVersion: 2020,
sourceType: 'module'
},
env: {
es6: true,
browser: true,
node: true,
},
plugins: [
'svelte3',
],
overrides: [
{
files: ['*.svelte'],
processor: 'svelte3/svelte3'
},
{
"extends": [
"plugin:cypress/recommended"
],
files: ["cypress/**/*"],
env: {
"cypress/globals": true
},
plugins:[
"cypress"
]
}
],
}
// .eslintignore
__sapper__

We should be good to go. Now we need to add the scripts to the package.json. I'm also making prettier format the markdown, JSON, CSS, and HTML file types.

// package.json
"scripts": {
...
"format": "prettier --write ./**/*.{js,svelte,md,html,css,json}",
"prelint": "npm run format",
"lint": "eslint './**/*.{js,svelte}'",
"lint:fix": "eslint --fix './**/*.{js,svelte}'",
"pretest": "npm run lint",
...
},

Bonus points #

After running the linter initially and fixing all the issues, you probably don't want this process to be manual every time you change a source file. Here is where lint-staged comes into play.

npx mrm lint-staged

Now lint-staged and husky are installed. The command should configure both for you out of the box. Resulting in the options being added to your package.json. Now the linter will only run on staged files.

 "husky": {
"hooks": {
"pre-commit": "lint-staged"
}
},
"lint-staged": {
"*.{js,svelte,md,html,css,json}": "prettier --write",
"*.{js,svelte}": "eslint --cache --fix"
}

← Home