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

#svelte #eslint #typescript #prettier

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 🤓

Top comments (7)

Henry Campos • May 30 '20 • Edited

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 • Jun 1 '20

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

Henry Campos • Jun 15 '20

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

Ztnight • Apr 10 '20

Why we install react dependencies?

Markus Häcker • Apr 13 '20

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.