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

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