ESLint and .ts Typescript files

>I had hoped to use ESLint Other Options (i.e. --ext .ts. .) but that does not seem to work.

http://eslint.org/docs/user-guide/command-line-interface#ext clearly indicates that this option is supposed to be used for specifying extra JAVASCRIPT file extensions, it's not designed to be used for linting other languages...

There is typescript-eslint-parser (https://github.com/eslint/typescript-eslint-parser) that can be used to build a syntax tree from typescript code that can be passed to ESLint for linting. Please install it and update ESLint config accordingly:

"parser": "typescript-eslint-parser",
  "plugins": ["typescript"]

>In case your wondering why, I want the benefit of using TypeScript in place of Babel for ES6/ES7, as well as, the inferred type assistance.

Why not using TSLint for linting then?

I'm having the same issue. 

I use ESLint with the Airbnb extension via typescript-eslint-parser with .ts and .tsx file. ESLint is much more mature than TSLint right now and also supports React much better than TSLint.

Like the OP I can do this happily with VSCode but not with WebStorm. Notably, the TSLint tab in WebStorm has the option to "Lint JavaScript files" so couldn't the ESLint tab have a similar option? Ideally for both Javascript and JSX.

>Like the OP I can do this happily with VSCode but not with WebStorm.

Can you elaborate on this? WebStorm 2017.1.3 does support ESLint + typescript-eslint-parser; you just need to install both 'typescript' plugin and 'typescript-eslint-parser' and modify your ESLint config accordingly:

"parser": "typescript-eslint-parser",
"plugins": ["typescript"]

Hi Elena,

That's how I already have my ESLint config which allows me to run .ts and .tsx files through ESLint via the command line, but I don't see any ESLint errors or warnings in WebStorm. It just feels like .ts and .tsx files are being ignored by the ESLint plugin because it picks up ESLint errors just fine in files with a .js extension.

works for me:

please provide a sample project that shows upo the issue

please share a sample project I can use to recreate the issue. BTW, does it work when running ESLint in terminal?

@Ypconstante See https://youtrack.jetbrains.com/issue/WEB-29829 for a related open issue. In my case, I wasn't using eslint-plugin-typescript and it made it so WebStorm didn't run ESLint in .ts files.

Also, https://youtrack.jetbrains.com/issue/WEB-29828 is a related issue when using this configuration.

For me the problem is more the other way round: It throws errors at me for nearly everything, while my colleague next to me is fine in Visual Studio Code. For example it doesn't find 'component/foo' because it searches for 'component/foo/index.js' but there is only 'index.ts'. And a larger TypeScript File is just pure read all over - that makes it nearly unusable. I tried both Webstorm 2018.3 EAP and 2018.2.3 - and yes I have set both plugin and parser in my .eslintrc.js file

>For example it doesn't find 'component/foo' because it searches for 'component/foo/index.js' but there is only 'index.ts'

please can you attach a screenshot of the issue? BTW, what is the result of running eslint in terminal?

>yes I have set both plugin and parser in my .eslintrc.js file

Please can you provide it?

Sure, so here is a part of my eslint file:

And this is an example file, where it doesn't seem to find the file - which is there though.

But I can't change it to have tsx at the end, because then it yells this at me:

Captured in Webstorm 2018.3 EAP with typescript-eslint-parser installed in node_modules.

Does eslint work for you when running it in command line? Also, did you try adding .ts and .tsx to import/extensions (https://www.npmjs.com/package/eslint-plugin-import#importextensions):

> Does eslint work for you when running it in command line?

Yes, but since ts files get first transformed into js - I don't know how to write something in TS that will fail in JS Eslint after transformation.

> try adding .ts and .tsx

This fixed it not finding the files, cool! But still every interface in TS is just pure red.

It seems to be the known issue, and turning no-undef off is the only workaround: https://github.com/eslint/typescript-eslint-parser/issues/416#issuecomment-363115171

Thanks that helps a lot!

OK one more question (thanks for bearing with me) .

I got eslint to yell at me on the CLI the same way Webstorm does by using

eslint --ext .ts,tsx,.js src

I also added

'no-restricted-globals': 'off'

To the overrides, as they are also false positives (https://github.com/eslint/typescript-eslint-parser/issues/414)

Now I get a lot of errors regarding type declaration imports that I couldn't easily fix with the extensions settings you suggested before.

It's about files that go index.d.ts

vs.

can't recreate - for me, EsLint correctly resolves imports from 'geojson' module (no import/no-unresolved errors reported). Do you have this module installed in your project via npm i geojson? can you share a sample project that shows up the issue?

Sure, here you go: https://files.fm/u/udx72tma

(npm i && npm test)

I see, thanks:) Seems ESLint eslint-plugin-import doesn't support resolving imports from typeRoots. It looks for a module in node_modules. Installing geojson locally via npm i geojson should solve your issue

I used WebStorm 2018.3 EAP and in last update eslint start linting ts files. How disabled it? My config doesn't include ts-parser and eslint always show error

Yes - since 2018.3, WebStorm runs ESLint on TypeScript files even if the ts-parser is not there: as Babel 7 parses TypeScript, it doesn't make sense to check for specific plugins or parsers any more.

As a workaround, you can try adding *.ts to an .eslintignore.

I am using 2018.3.2 and ESLint simply does nothing even if I run it manually via right click -> Fix ESLint problems. Running via console works fine.

I am using following config: https://github.com/ringcentral/ringcentral-typescript/blob/master/src/index.js

I found a fix here: https://youtrack.jetbrains.com/issue/WEB-29829#focus=streamItem-27-3182764-0-0

Thanks for pointing us to that issue, Kirill.

To anyone else searching for this, you must go to Help > Find Action and type "registry". Click the first result (Registry...) and scroll down to eslint.additional.file.extensions. Add js,ts.

The issue for me is that IntelliJ/Webstorm only does this automatically if you're using typescript-eslint-parser and eslint-plugin-typescript. However, those packages are now @typescript-eslint/parser and @typescript-eslint/eslint-plugin.

Thanks Adam, This worked as a charm.

Thanks Mohamed!

I created a new issue here: https://youtrack.jetbrains.com/issue/WEB-36988

Hopefully this change gets merged into an upcoming release.

Thanks Adam this worked great for us as well - however with a slight amendment we also added tsx and jsx - but this is more of a flavor thing I guess.

I'm using PHPstorm and couldn't see eslint.additional.file.extensions.

So I've added eslint-plugin-typescript even though my vscode colleagues don't need that.

I get lint errors now but the auto fix keyboard shortcut I have setup doesn't work.  It still works on js files.

>I'm using PHPstorm and couldn't see eslint.additional.file.extensions.

What PHPstorm version is it?

2018.1.6

wow I see I am on an old version, I had toolbox and presumed it was auto updating me.  I have now been able to change eslint.additional.file.extensions and all is ok.