Install Master CSS ESLint in Svelte

Guide to installing Master CSS ESLint in your Svelte project.

Installation

Install the plugin and parser into your project via package managers.

npm install -D @master/eslint-config-css@rc eslint-plugin-svelte @eslint/compat globals eslint

Set up ESLint config

Import and add the Master CSS ESLint Configuration css to eslint.config.js.

import js from '@eslint/js'
import { includeIgnoreFile } from '@eslint/compat'
import svelte from 'eslint-plugin-svelte'
import globals from 'globals';
import { fileURLToPath } from 'node:url'
import ts from 'typescript-eslint'
import css from '@master/eslint-config-css'
 
const gitignorePath = fileURLToPath(new URL("./.gitignore", import.meta.url))
 
export default ts.config(
    includeIgnoreFile(gitignorePath),
    js.configs.recommended,
    ...ts.configs.recommended,
    ...svelte.configs["flat/recommended"],
    {
        languageOptions: {
            globals: {
                ...globals.browser,
                ...globals.node
            }
        }
    },
    {
        files: ["**/*.svelte"],
        languageOptions: {
            parserOptions: {
                parser: ts.parser
            }
        }
    },
    css
)

Start linting your code

npx eslint

Not working in Visual Studio Code? Next, set up the VSCode ESLint.