Svelte with prettier/eslint

Question

I am trying to make an app using svelte to try it out.

I would like to setup prettier and eslint, I installed those dependencies and the extension for Svelte for VS Code.

  "dependencies": {
    "eslint": "^7.7.0",
    "eslint-plugin-svelte3": "^2.7.3",
    "prettier": "^2.0.5",
    "prettier-plugin-svelte": "^1.1.0",
    "save-dev": "0.0.1-security",
    "sirv-cli": "^1.0.0",
    "stylelint": "^13.6.1"
  }

Now, I am having trouble setting everything up.

I made

.eslintrc

{
  "plugins": ["eslint-plugin-svelte3"],
  "parserOptions": {
    "ecmaVersion": 6,
    "sourceType": "module",
    "ecmaFeatures": {
      "jsx": true
    }
  },
  "rules": {
    "semi": "error"
  }
}

.prettierrc

{
  "tabWidth": 2,
  "semi": false,
  "singleQuote": true,
  "trailingComma": "es6"
}

and I would like autosave with settings.json under .vscode

{
  "editor.formatOnSave": true,
  "editor.defaultFormatter": "esbenp.prettier-vscode",
  "editor.codeActionsOnSave": {
    "source.fixAll.eslint": true,
    "source.fixAll.prettier": true
  },
  "typescript.tsdk": "node_modules/typescript/lib",
  "eslint.validate": ["svelte"]
}

Now I tried to use this, but nothing happen when I save, neither when I execute

"fix": "npx eslint --fix \"src/**/*.svelte\"",
"format": "npx prettier --write \"src/**/*.svelte\""

Am I missing something ?

Answer 1

The formatting problems occur because in your settings you tell VSCode to format everything with the esbenp.prettier-vscode extension, which cannot handle Svelte files. Add this to your config and it should work.

  "[svelte]": {
    "editor.defaultFormatter": "svelte.svelte-vscode"
  },

As an alternative you can install prettier-plugin-svelte from npm. After a reload, Prettier will notice this plugin if it's in the same node_modules folder and defer formatting of Svelte file to it. This should also fix your "Svelte files do not get formatted when running npm run format" problem.

For reference: https://github.com/sveltejs/language-tools/tree/master/docs#my-code-does-not-get-formatted

The ESLint problem likely occurs because the plugin name is wrong and you are missing the overrides section which tells ESLint how to treat Svelte files:

module.exports = {
  plugins: [
    'svelte3'
  ],
  overrides: [
    {
      files: ['*.svelte'],
      processor: 'svelte3/svelte3'
    }
  ],
  ..
};

Reference for setup: https://github.com/sveltejs/eslint-plugin-svelte3#installation

Answer 2

The eslint-plugin-svelte3 is deprecated, instead it's recommended to use eslint-plugin-svelte.

From official SVELTEJS repository :

This ESLint plugin is deprecated. eslint-plugin-svelte is the new official ESLint plugin for Svelte.

FOLLOW THESE STEPS

FYI my configuration are based on sveltekit (I am using a svelte/vite project)

1/ Check if prettier & svelte vscode extensions are installed in your vscode.

2/ Install these packages :

pnpm i -D eslint prettier eslint-config-prettier eslint-plugin-svelte prettier-plugin-svelte

• I use pnpm package manager, but you can use npm or yarn.
• -D only means installed in devDependencies
• eslint-config-prettier is useful for eslint & prettier work well together
• eslint-plugin-svelte & prettier-plugin-svelte are needed to easily manage svelte files

3/ Initialize these eslint & prettier configuration files :

.eslintrc.cjs (I use .cjs but you can use any of extension supported by eslint)

module.exports = {
  root: true,
  extends: ['eslint:recommended', 'plugin:svelte/recommended', 'prettier'],
  parserOptions: {
    sourceType: 'module',
    ecmaVersion: 2020,
    extraFileExtensions: ['.svelte'],
  },
  env: {
    browser: true,
    es2017: true,
    node: true,
  },
};

.prettierrc (I use .prettierrc but you can use any name supported by prettier)

{
  "tabWidth": 2,
  "singleQuote": true,
  "semi": true,
  "printWidth": 100,
  "plugins": ["prettier-plugin-svelte"],
  "overrides": [
    {
      "files": "*.svelte",
      "options": {
        "parser": "svelte"
      }
    }
  ]
}

• you can set your own preferred code style, but the most important parts are plugins & overrides.

.eslintignore (optional but useful for git)

.DS_Store
node_modules
/dist
.env
.env.*
!.env.example

# Ignore files for PNPM, NPM and YARN
pnpm-lock.yaml
package-lock.json
yarn.lock

.prettierignore (optional but useful for git)

.DS_Store
node_modules
/dist
/package
.env
.env.*
!.env.example

# Ignore files for PNPM, NPM and YARN
pnpm-lock.yaml
package-lock.json
yarn.lock

4/ Add this in your .vscode/settings.json :

{
  ...
  "eslint.validate": ["javascript", "svelte"],
  ...
}

5/ Add script in your package.json in order to format all your JS/HTML/(S)CSS/SVELTE files in one command :

"scripts": {
  ...
  "format": "prettier --plugin-search-dir . --write ."
},

6/ check your VS Code settings (both global and workspace) to make sure that the default formatter for Svelte files is set to Prettier.

7/ Restart your vscode

8/ Test if it works with the command line pnpm format (or npm run format or yarn format)

BONUS :

If you want to auto-format your code, when saving a file, add this line in your .vscode/settings.json :

{
  ...
  "editor.formatOnSave": true
}