Use Airbnb's ESLint Config with TypeScript & Prettier in Svelte Apps

First install the necessary dependencies:

npm i @typescript-eslint/eslint-plugin \
    @typescript-eslint/parser \
    eslint \
    eslint-config-airbnb-typescript \
    eslint-config-prettier \ 
    eslint-plugin-eslint-comments \ 
    eslint-plugin-import \ 
    eslint-plugin-promise \ 
    eslint-plugin-svelte3 \ 
    prettier \ 
    --save-dev

Then create 3 files in your app's root folder:

1st file: .eslintrc.js:

module.exports = {
  root: true,
  parser: "@typescript-eslint/parser",
  parserOptions: {
    tsconfigRootDir: __dirname,
    project: ["./tsconfig.json"],
  },
  rules: {
    "import/no-extraneous-dependencies": ["error", { devDependencies: true }],
    "import/no-mutable-exports": 0,
    "no-labels": 0,
    "no-restricted-syntax": 0,
  },
  plugins: ["@typescript-eslint", "svelte3"],
  extends: [
    "airbnb-typescript",
    "plugin:@typescript-eslint/recommended",
    "plugin:eslint-comments/recommended",
    "plugin:promise/recommended",
    "prettier",
    "prettier/@typescript-eslint",
  ],
  overrides: [
    {
      files: ["**/*.svelte"],
      processor: "svelte3/svelte3",
    },
  ],
};

2nd file: .prettierrc - sample content:

{
  "singleQuote": true,
  "trailingComma": "all",
  "useTabs": true,
  "tabWidth": 4,
  "printWidth": 100,
  "overrides": [
    {
      "files": "*.ts",
      "options": {
        "parser": "typescript"
      }
    }
  ]
}

3rd file: .eslintignore:

node_modules

That's all 🤓

Comments

[Henry Campos]

Hello Markus, thank you for the tutorial. I'm still having some issues with typescript code lint in .svelte files. Javascript is being parsed correctly in .svelte files and typescript is being parsed correctly in .ts files, as expected. Maybe you know what is the problem. I removed the airbnb-typescript plugin, parserOptions.tsconfigRootDir, and parserOptions.project because, with them, the linting was not working, maybe there is the issue.

.eslintrc.js

module.exports = {
    root: true,
    parser: '@typescript-eslint/parser',
    plugins: ['@typescript-eslint', 'svelte3'],
    env: {
        browser: true,
        es6: true,
        node: true,
    },
    extends: [
        'plugin:@typescript-eslint/recommended',
        'plugin:eslint-comments/recommended',
        'plugin:promise/recommended',
        'prettier',
        'prettier/@typescript-eslint',
    ],
    overrides: [
        {
            files: ["**/*.svelte"],
            processor: 'svelte3/svelte3',
        },
    ],
    parserOptions: {
        ecmaVersion: 9,
        sourceType: 'module',
    },
    settings: {
        'import/core-modules': ['svelte'],
    },
    rules: {
        'no-console': 'error',
        'no-var': 'error',
        indent: ['error', 4],
        'linebreak-style': ['error', 'unix'],
        quotes: ['error', 'single'],
        semi: ['error', 'always'],
        eqeqeq: 'error',
        'comma-dangle': ['error', 'always-multiline'],
        'import/no-mutable-exports': 0,
        'no-labels': 0,
        'no-restricted-syntax': 0,
    },
};

.prettierrc.js

module.exports = {
    trailingComma: 'es5',
    tabWidth: 4,
    semi: true,
    singleQuote: true,
    printWidth: 120,
    overrides: [
        {
            files: "*.ts",
            options: {
                parser: "typescript"
            }
        }
    ]
}

tsconfig.json

{
    "include": [
        "src/**/*"
    ],
    "exclude": [
        "node_modules/*"
    ],
    "compilerOptions": {
        "target": "es2015",
        "module": "es2015",
        "types": [
            "svelte"
        ]
    }
}

typescript	javascript

[Johannes Zillmann]

Have you figured out how to get this working (eslint for typescritpt in svelte files) ?

[Henry Campos]

Not yet, sorry. I decided to work without ESLint for now.

[Ztnight]

Why we install react dependencies?

[Markus Häcker]

You're right, you don't need eslint-plugin-jsx-a11y, eslint-plugin-react and eslint-plugin-react-hooks.
I only installed them to get rid of the npm-warnings that otherwise appear:

npm WARN eslint-config-airbnb@18.1.0 requires a peer of eslint-plugin-jsx-a11y@^6.2.3 but none is installed. You must install peer dependencies yourself.
npm WARN eslint-config-airbnb@18.1.0 requires a peer of eslint-plugin-react@^7.19.0 but none is installed. You must install peer dependencies yourself.
npm WARN eslint-config-airbnb@18.1.0 requires a peer of eslint-plugin-react-hooks@^2.5.0 || ^1.7.0 but none is installed. You must install peer dependencies yourself.

I removed them in the npm install command above.

[Ztnight]

Ok, make sense!

[Gal Angel]

Thank you Markus for sharing, but sadly I wasn't able to make it work.
Do you have any updates?