Improve integration with eslint-config-airbnb and plugins on which it depends

[kripod]

Currently, I'm using the following .eslintrc.json file for my TypeScript React projects:

{
  "extends": [
    "airbnb",
    "plugin:prettier/recommended",
    "prettier/react",
    "prettier/typescript"
  ],
  "parser": "eslint-plugin-typescript/parser",
  "plugins": ["typescript"],
  "env": {
    "browser": true
  },
  "settings": {
    "import/resolver": {
      "node": {
        "extensions": [".ts", ".tsx", ".js", ".jsx"]
      }
    }
  },
  "overrides": [
    {
      "files": ["**/*.ts", "**/*.tsx"],
      "rules": {
        "typescript/no-unused-vars": "error",
        "react/jsx-filename-extension": ["error", { "extensions": [".tsx"] }]
      }
    }
  ]
}

For example, it would be great if I could get rid of the overrides by fixing false-positives around typescript/no-unused-vars and possibly co-operating with the maintainers of eslint-config-airbnb for changing the react/jsx-filename-extension rule.

I'm not sure how, but the settings section may also be eliminated by an officially supported integration with eslint-import-resolver-typescript.

[bradzacher]

If you've got some false positives for typescript/no-unused-vars for non-ts files, then log them as issues!
We are only extending the base rule with TS cases - so there shouldn't be any false positives for non-ts features, but if there are - we won't know if you don't let us know.

There's the option to use our recommended config, this will set the parser + plugin for you automatically (note that you have to list our recommended before prettier/typescript).

In regards to your other points... It's unfortunate that the ecosystem is a bit clunky in this regard.

---

AFAIK airbnb doesn't use typescript.
Looking at the issue you linked, it doesn't look like they want to make it compatible with the base config (because it could have side-effects for people who don't use TS).

One option for that would be to open a PR to add a separate TS specific config to the airbnb repo (i.e. you could use it via airbnb/typescript). Because it's a separate config, they might be in support of that.

---

eslint-plugin-import; due to the fact that there's many different resolvers (node, typescript, webpack to name a few), we can't provide a recommended config to set it without potentially breaking someone's config, and we don't really want to export one config from this plugin for every single external plugin use case. It's bloat that only makes things harder to understand.

If you want to make that setup easier, the best option is to open a PR to add a recommended config to the resolvers themselves.

---

As an aside, I would consider just disabling react/jsx-filename-extension; typescript compiler should actually break on your code if you don't name your jsx files .tsx

[kripod]

Thank you for the insightful answer, I think there already is an open issue for false-positives without using typescript/no-unused-vars, but I'm providing a repo which produces several false-positives when the "typescript/no-unused-vars": "error" rule is removed: https://github.com/simonyiszk/schdesign-web/tree/1ee8aa87b702a1ef0473e8a553207c3a2355d128