Enable ESLint for SvelteKit in VSCode

Introduction

You’ve finally taken the plunge and dived into the beautiful world of Svelte and its framework SvelteKit. You spin up your first project in Visual Studio Code and since you aren’t a cowboy in the Wild Wild West, you enable ESLint to make your code clean and consistent. ESLint has been your trusty companion in all of your React, Next, and Nuxt projects, making sure that VSCode throws warnings and error at every unused variable and missing semicolon. Once you’ve set up your rules and are ready to go, you start coding like a mad man. The code has never been cleaner nor problem free. But then you notice the unused var and the 5 missing semicolons. Where’s the lint?!

The fix

First, make sure you have the ESLint VSCode extension installed. Then you’ll have to edit the settings.json file in VSCode. Find it in preferences or press CMD+P (CTRL+P) and search for “settings.json. Here you add:

ESLint is only enabled in javascript and React files on default, so we have to add .svelte files to the scope.