DEV Community

Markus Häcker
Markus Häcker

Posted on • Updated on

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
Enter fullscreen mode Exit fullscreen mode

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",
    },
  ],
};
Enter fullscreen mode Exit fullscreen mode

2nd file: .prettierrc - sample content:

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

3rd file: .eslintignore:

node_modules
Enter fullscreen mode Exit fullscreen mode

That's all 🤓

Top comments (7)

Collapse
 
homerosbart2 profile image
Henry Campos • 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
Collapse
 
o_a_e profile image
Johannes Zillmann

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

Collapse
 
homerosbart2 profile image
Henry Campos

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

Collapse
 
doopline profile image
Ztnight

Why we install react dependencies?

Collapse
 
mhaecker profile image
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.

Collapse
 
doopline profile image
Ztnight

Ok, make sense!

Collapse
 
galangel profile image
Gal Angel • Edited

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