ESLint support for TypeScript imports

[vvidday]

What feature(s) would you like to see in RepoSense

Within a TypeScript file, the default way to import from another local TypeScript file is to omit the file extension, e.g. import x from y over import x from y.ts. (Docs). Attempting to include the .ts file extension results in a TypeScript error: An import path cannot end with a '.ts' extension. Consider importing './y.js' instead.

Additional context - since .ts files are compiled into javascript files at runtime, the imports ending in .ts might fail.

Currently, each import x from y within a TypeScript file where y is a local TypeScript file causes ESLint to throw 2 errors:

• Unable to resolve path to module '../..'
• Missing file extension for '../..'

The first error is because ESLint is not configured properly for TypeScript imports, and the second is because ESLint is configured to throw an error if the file extension is missing from a local .ts import.

Is the feature request related to a problem?

ESLint throws errors when we import from TypeScript files. The current codebase doesn't face this problem because there aren't any .ts imports inside any TypeScript file, but this will change when we start migrating over from .js files (e.g. #1903)

If possible, describe the solution

Configure ESLint to extend the import/typescript plugin, which will solve the first error.

For the second, I suggest that we configure the import extensions rule to disallow file extensions for .js and .ts files. This will allow us to enforce consistency throughout the codebase, while keeping the default method of importing TypeScript files as mentioned above.

The side effect is that we will have to remove the file extension from existing .ts file imports inside .vue files, since ESLint will enforce this rule across the codebase. This however will have no functional change.

If applicable, describe alternatives you've considered

1. Ignore the ESLint import extension rule. This will get rid of the error and eliminate the need to change the imports in existing .vue files, but will make the codebase inconsistent, i.e. Typescript imports in .ts files will not have a file extension but imports in .vue will.
2. Use .ts file extensions in imports, and configure webpack to resolve the imports at compile time. This will allow the code to run, but 1) requires us to modify webpack and 2) VSCode/IDEs will still show the An import path cannot end with a '.ts' extension. Consider importing './y.js' instead. error, since they do not know webpack is resolving the files at compile time.

I feel that the proposed solution is the most straightforward, as it will only result in a one-time change of imports in .vue files, following which the imports will be consistent throughout the codebase.