Enable code lint in Svelte components
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.
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)
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.
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.