Using ESLint and Prettier with both TypeScript and JavaScript

Question

I'm trying to set up my project with ESLint and Prettier to support both JavaScript and TypeScript linting on VSCode. I want to use the Airbnb Style Guide: https://github.com/airbnb/javascript I initially had JavaScript only node/express project so I set it up using these instructions: https://blog.echobind.com/integrating-prettier-eslint-airbnb-style-guide-in-vscode-47f07b5d7d6a and everything worked fine.

When I started adding TypeScript, I followed the instructions here: https://github.com/typescript-eslint/typescript-eslint

My prettier config file looks as follows:

.prettierrc

{
    "tabWidth": 4,
    "printWidth": 200,
    "singleQuote": true,
    "endOfLine": "auto",
    "trailingComma": "all"
}

When I had my project set up for just JavaScript,my config file was:

.eslintrc.json

{
    "extends": ["airbnb", "prettier"],
    "plugins": ["prettier"],
    "rules": {
        "prettier/prettier": ["error"],
        "no-console": "off"
    }
}

With this, the JavaScript linting worked perfectly according to the airbnb guide. When I added TypeScript support this config file became the following:

.eslintrc.json

{
    "extends": ["airbnb", "prettier", "airbnb-typescript", "prettier/@typescript-eslint"],
    "parser": "@typescript-eslint/parser",
    "plugins": ["prettier", "@typescript-eslint"],
    "rules": {
        "prettier/prettier": ["error"],
        "no-console": "off"
    }
}

However, this breaks JavaScript linting as some of the errors I had in my .js files just disappear.

How do I set up a .eslintrc.json that works with both JavaScript and TypeScript for the airbnb style guides?

Answer 1

You should setup overrides to only check .ts files with typescript:

{
    "extends": ["airbnb", "prettier"],
    "plugins": ["prettier"],
    "rules": {
        "prettier/prettier": ["error"],
        "no-console": "off"
    },
    "overrides": {
        "files": ["*.ts", "*.tsx"],
        "extends": ["airbnb", "prettier", "airbnb-typescript", "prettier/@typescript-eslint"],
        "plugins": ["prettier", "@typescript-eslint"],
        "parser": "@typescript-eslint/parser",
    }
}

From Specifying a Processor docs