ESLint: Unexpected use of file extension "ts" for '.../something.ts' import/extensions rule

[ialwayswatching]

Hey folks!
I am trying to setup react-native project with many eslint plugins and so on, and got stuck on that problem for freaking many hours, could someone help with that?
I already tried everything I was able to find in google/gpt answers, and for now I am done, down below, you can check my tsconfig/esling.js/prettier/package.json files, also I am share some webstorm screenshots
I was trying to make Webstorm import files without extensions but for some reason, I can't understand this is doesn't seems to work, glad for any help!
Error:

Code style in webstorm:

package.json
tsconfig.json
Eslint setup:

module.exports = {
env: {
es2021: true,
node: true,
},
root: true,
extends: [
'plugin:react/recommended',
'airbnb',
'plugin:import/recommended',
'airbnb-typescript',
'airbnb/hooks',
'plugin:@typescript-eslint/recommended',
'prettier',
'plugin:prettier/recommended',
],
plugins: ['react', 'react-hooks', '@typescript-eslint', 'prettier', 'simple-import-sort', 'react-native', 'import'],
rules: {
'prettier/prettier': ['error', { semi: true }],
'react/jsx-filename-extension': [
1,
{
extensions: ['.js', '.jsx', '.ts', '.tsx'],
},
],
'import/extensions': [
'error',
'ignorePackages',
{
js: 'never',
jsx: 'never',
ts: 'never',
tsx: 'never',
},
],
'no-plusplus': ['error', { allowForLoopAfterthoughts: true }],
'@typescript-eslint/ban-ts-comment': 2,
'react/display-name': 2,
'react/function-component-definition': 0,
'no-use-before-define': 2,
'@typescript-eslint/no-use-before-define': 2,
'no-console': [2, { allow: ['warn', 'error'] }],
'react-native/no-unused-styles': 1,
'import/order': 0,
'no-underscore-dangle': 2,
'react/jsx-props-no-spreading': 0,
'no-nested-ternary': 2,
'no-promise-executor-return': 0,
'@typescript-eslint/no-explicit-any': 0,
'import/prefer-default-export': 0,
'@typescript-eslint/no-var-requires': 0,
'simple-import-sort/exports': 1,
'react-hooks/exhaustive-deps': 1,
'simple-import-sort/imports': [
'warn',
{
groups: [
['^react', '^@?\w'],
['^\u0000'],
['^(@|components|navigation|screens)(/.|$)'],
['^(@|hooks|libs|analytics|rx|services|types|utils)(/.|$)'],
['^(@|assets|configs|constants|theme)(/.|$)'],
['^\.\.(?!/?$)', '^\.\./?$'],
['^\./(?=./)(?!/?$)', '^\.(?!/?$)', '^\./?$'],
],
},
],
},
parser: '@typescript-eslint/parser',
parserOptions: {
ecmaVersion: 2021,
sourceType: 'module',
project: './tsconfig.json',
},
settings: {
react: {
pragma: 'React',
version: 'detect',
},
},
};

[JounQin]

You should never use .ts suffix which is how TypeScript works, instead, you should use .js even for .ts files, or just omit it, the bundler with handle that.

This has nothing to do with this plugin.

[ialwayswatching]

You should never use .ts suffix which is how TypeScript works, instead, you should use .js even for .ts files, or just omit it, the bundler with handle that.

This has nothing to do with this plugin.

I understand why we need this rule, its query.ts file, and I am importing something from it, and my question was: What I need to do, to make eslint or IDE import files like something/query automatically without extension in path, because I can't make it happen

[ialwayswatching]

@JounQin
This is expected result

[JounQin]

It seems your IDE's responsibility?

[ialwayswatching]

There a screenshot, where I turned off that behavior inside webstorm settings

[JounQin]

I don't understand what's your meaning, it's beyond control of the plugin itself.