Typescript eslint - Missing file extension "ts" import/extensions

Solution 1:

Add the following code to rules:

"rules": {
   "import/extensions": [
      "error",
      "ignorePackages",
      {
        "js": "never",
        "jsx": "never",
        "ts": "never",
        "tsx": "never"
      }
   ]
}

airbnb ESLint config leads the problem.

Solution 2:

I know this is late, but if you're extending the Airbnb rules you can use eslint-config-airbnb-typescript. Please refer to the project page for the latest instructions. Here's the gist of it as of Oct. 2021:

Install

npm install -D eslint-config-airbnb-typescript

ESLint config file

using React - add 'airbnb-typescript' after 'airbnb'

extends: [
  'airbnb',
+ 'airbnb-typescript'
]

without React - add 'airbnb-typescript/base' after 'airbnb-base'

extends: [
  'airbnb-base',
+ 'airbnb-typescript/base'
]

set parserOptions.project to path of your tsconfig.json

{
  extends: ['airbnb', 'airbnb-typescript'],
+ parserOptions: {
+   project: './tsconfig.json'
+ }
}

NOTE: Prior to August 2021, you would need to also do the following tasks. These instructions are remaining here for historical reference only. You should not need to do this any more.

First uninstall the old one and add the new one:

# uninstall whichever one you're using
npm uninstall eslint-config-airbnb
npm uninstall eslint-config-airbnb-base

# install the typescript one
npm install -D eslint-config-airbnb-typescript

Then update your ESlint config, remove the old Airbnb from the "extends" section and add the new one:

extends: ["airbnb-typescript"]