loading...

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

mhaecker profile image Markus Häcker Updated on ・1 min read

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 🤓

Discussion

pic
Editor guide
Collapse
homerosbart2 profile image
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
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 Author

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

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