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.
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)
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.