If I remove the plugin from the plugins array and use the settings section to add the alias (similar to what you did), ESLlint still complains about lines like:

import { App } from '~/App';

Although annoyingly the error is

Missing file extension for "~/App"eslintimport/extensions

and if I add .tsx, the error becomes

Unexpected use of file extension "tsx" for "~/App.tsx"eslintimport/extensions

I can silence these by turning off the import/extensions rule but I still want it to force the use of extensions for everything that isn't a TS module. I can also configure the rule to give that behavior but that feels like it shouldn't be necessary since that's the default behavior of import/extensions in the first place if aliases aren't used. Somehow the alias plugin and the import plugin are not playing nice together.

Thats what i said in the above reply to @Doug-Colin that the default functionality for this must be improved in some way. Btw try adding extensions to your paths ending like instead of ~/App do App.jsx although ik it feels weird. Also restart app and then tell what you are getting now

Moreover there was no need for me to define this plugin in the plugins as to the documentation suggests this.

Refer these:

https://www.npmjs.com/package/eslint-plugin-import#resolvers
https://www.npmjs.com/package/eslint-import-resolver-alias

@ianpaschal I am having the same issue with no avail.

@ianpaschal Nevermind let me save your day:

Try this:

// .eslintrc.json
       settings: {
    'import/resolver': {
      node: {
        paths: ['src'],
        extensions: ['.js', '.jsx', '.ts', '.d.ts', '.tsx'],
      },
      typescript: {
        project: './tsconfig.json',
      },
      alias: {
        map: [['~', path.resolve(__dirname, './src')]],
        extensions: ['.js', '.jsx', '.ts', '.d.ts', '.tsx'],
      },
    },
  },

Something I needed to do in VS Code after making changes was get the menu up (cmd + shift + p) and then ESLint: Restart ESLint Server.

path.resolve works