Support typescript-eslint when it becomes available

[johnnyreilly]

TypeScript are planning to move to using eslint in future to lint TypeScript: microsoft/TypeScript#29288

See also: https://eslint.org/blog/2019/01/future-typescript-eslint

Given this plugin supports running tslint side by side with the compiler it makes sense to allow the same functionality with eslint when that becomes ready. It will likely involve integrating with this project:

https://github.com/typescript-eslint/typescript-eslint

Given typescript-eslint requires a fairly high version to work we will only be able to support this with newer versions of TypeScript; but that's fine.

If someone wants to look at integrating this into the plugin when typescript-eslint is sufficiently mature that would be amazing! ❤️

https://medium.com/palantir/tslint-in-2019-1a144c2317a9

[johnnyreilly]

This PR that adds support for typescript-eslint to create-react-app could well prove useful as inspiration when someone is looking into adding eslint support directly to fork-ts-checker-webpack-plugin

facebook/create-react-app#6513

😀🌻

[ux-engineer]

As a new comer with this package, I'm wondering what's the current state of ESLint support?

TypeScript's future is with ESLint instead of TSLint (as linked above). README doesn't even mention ESLint so it seems I'd need to wait before I can give this a try. Although linting integration is optional, I'm not sure if the package would be fully useful without it.

[johnnyreilly]

As yet it hasn't been added - eslint TypeScript support is still a very new thing. If someone would like to submit a PR adding support we'd be super grateful.

In the longer term given that tslint is being deprecated, I'd imagine support for tslint with the plugin will be too. But that's going to be some time away.

The main purpose of the plugin is type checking. Linting comes a close second. Until support is added to the plugin there's nothing stopping you doing what create-react-app are doing currently; that is to say running eslint alongside the fork-ts-checker-webpack-plugin.

[johnnyreilly]

A Plan!

Yesterday I took the functionality in place in create-react-app for a spin. Based upon that experience I think that TypeScript eslint has got to a pretty good place.

I'm not sure whether I'm going to have time to attempt this in the near future, but I think implementation of this functionality may actually prove fairly straightforward. I've certainly an idea of a rough plan - if someone wants to take have a crack at this and report back that'd be amazing! Here's the plan:

1. Implement a new eslint option in https://github.com/Realytics/fork-ts-checker-webpack-plugin/blob/master/src/ApiIncrementalChecker.ts - note this is the API incremental checker which is the default unless you're using Vue. We'd want to share this functionality between that and the IncrementalChecker in future, but let's at least get started 😁

2. Look at the eslint-loader for prior art. Note: this is exactly what create-react-app is using as it was already rolling with eslint long before TypeScript was even on the horizon. The code of interest is here: https://github.com/webpack-contrib/eslint-loader/blob/master/index.js

There's actually very little work to do I think - most of what we need will be achieved by using something like the following:

var engine = new eslint.CLIEngine(config);
lint(engine, input, resourcePath);

// where input is the source file contents
// and resourcePath is name of file

function lint(engine, input, resourcePath) {
  return engine.executeOnText(input, resourcePath, true);
}

Our work is pretty much just mapping that back into a NormalizedMessage and that's it.. tick! 😆

If someone wants to have a crack at this I'd be happy to collaborate.

cc @piotr-oles @phryneas

[johnnyreilly]

I've tentatively started the beginnings on work on this in the linked PR. Very preliminary stages right now, people should feel free to pitch in and help as I predict this maybe slightly stop / start from my side 😄

[hawx1993]

@johnnyreilly thanks for your update, but eslint-loader can't use custom .eslintrc.js file. I tried to use

{
        test: /\.(ts|tsx)$/,
        enforce: 'pre',
        use: [
          {
            options: {
              baseConfig: {
                extends: '../.eslintrc.js',
              },
              eslintPath: require.resolve('eslint'),
            },
            loader: require.resolve('eslint-loader'),
          },
        ],
      },

but it seems only work on babel-eslint paser not on @typescript-eslint/parser, that's so awkward, because babel-eslint not support ts type checker, and @typescript-eslint/parser not
work on eslint-loader on dev mode.
if fork-ts-checker-webpack-plugin support eslint ,that would be better

[johnnyreilly]

Hi,

Thanks for commenting! Essentially I don't think we're bound by any restrictions eslint-loader may have. I'm intending to use executeOnFiles: https://eslint.org/docs/1.0.0/developer-guide/nodejs-api#executeonfiles

From the CLI engine:

https://eslint.org/docs/1.0.0/developer-guide/nodejs-api#cliengine

Presumably that should just work and surface up the lint info needed. Incidentally, if you'd like to take what I've done so far for a spin / hack on it to make it work / make it better then do feel free!

[hawx1993]

@johnnyreilly have you tried eslint-loader? can you used that on webpack dev mode to lint ts file?