Enable code lint in Svelte components

Set ESLint to validate script tags in VS Code’s settings.json

TL;DR

In the .vscode/settings.json, add svelte in the eslint.validate array.

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

Create-Svelte

When initializing a SvelteKit project using npm init svelte, there is an option to add ESLint for code linting. If TypeScript is selected for type checking, TypeScript ESLint is installed and configured by default as well.

Setting up a SvelteKit project using create-svelte@2.0.0-next.135

Validation

However, code inside .svelte files’ <script lang=”ts”> are not validated by default. For example, unused variables do not show any error, even though no-unused-vars is enabled. (ts does show relevant information though)

TypeScript does show that a variable is never read

By including svelte files to be validated by ESLint, variable is assigned a value but never used error message is shown with a yellow underline.

ESLint and TypeScript both informs about unused variables

Note

eslint.validate is an option of the ESLint VS Code extesnsion. Therefore, if this extension is not installed, validation error will not be shown in the editor.