Typescript support for eslint-plugin-import

[jaridmargolin]

Caution: I don't yet have a great grasp on this entire issue. Perhaps someone with more knowledge will be able to fill in the blanks.

Problem

When running from the command line, @postmates/eslint-config works as expected. However, when utilized by Microsoft/vscode-eslint, modules are not correctly being resolved.

Is anyone else running into this issue?

Temporary Solution

I was able to resolve editor errors by adding the following to my .eslintrc.js (ref: import-js/eslint-plugin-import#1256):

  settings: {
    'import/resolver': {
      node: {
        extensions: ['.js', '.jsx', '.json', '.ts', '.tsx'],
      },
    },
  }

Potential Fixes

First, it would be great to confirm that this is in-fact an issue with our config and not with the implementation of Microsoft/vscode-eslint. It is odd to me that the error only surfaces when using Microsoft/vscode-eslint. If the import/resolver extensions need to be added, it seems as though eslint should fail when running from the command line as well 🤔

If the patch should in-fact be added, which is the direction I am leaning towards based on import-js/eslint-plugin-import#1256, than I believe we have two options:

1. Immediately implement the above patch within rules/typescript.
2. Wait until [New] add config entry point for TypeScript import-js/eslint-plugin-import#1257 ships and use solution documented in https://github.com/benmosher/eslint-plugin-import/pull/1277/files

[wsabransky]

Discussed on slack.

[jaridmargolin]

For reference, as this wasn't immediately clear to me:

Resolvers

By default, when using eslint-plugin-import you get the stock node resolver. The node resolver will not look for .ts extensions. Read the "Resolvers" documentation for more context. Resolvers are inherently implementation specific as they are tied to the tooling used (webpack, typescript, jest, etc...) and as a result @postmates/javascript should be agnostic and leave it to the consumer to define.

For consumers, there are several solutions:

Tell the default node resolver to look for .ts extensions

Add the following settings to your .eslintrc config (js shown below).

  settings: {
    'import/resolver': {
      node: {
        extensions: ['.js', '.jsx', '.json', '.ts', '.tsx'],
      },
    },
  }

While this works, it actually isn't the most robust solution. There may be additional settings within your .tsconfig that alters the mechanics of the lookup.

RECOMMENDED: Use a custom resolver (Typescript, Webpack, Jest, ...)

Install an officially supported, or thrid-party resolver. A list of resolvers can be found by searching npm.

Example Typescript implementation:

Install:
npm install eslint-import-resolver-typescript --save-dev

Use:
Add the following settings to your .eslintrc config (js shown below).

  settings: {
    'import/resolver': {
      typescript: {},
    },
  }

These should be the most robust, as they will support both the correct extensions, and any implementation specific resolution mechanics (think aliases, baseDirs, etc...).