ESLint and .ts Typescript files

I would like to be able to have ESLint process .ts files as .js.  I had hoped to use ESLint Other Options (i.e. --ext .ts. .) but that does not seem to work.

I was able to get this to work in Visual Studio Code by simple adding the 'TypeScript' to 'eslint.validate'.

To be clear, I am not looking for ESLint to handleTypeScript specific notation etc.  I am aware there are plugins for this.  Rather, I simply want ESLint to process .ts the same way it processes .js.

(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.  I intend to use comments to add type definitions if I feel it is necessary.)

 

 

 

 

 

32 comments
Comment actions Permalink

>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"]
0
Comment actions Permalink

>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?

0
Comment actions Permalink

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.

1
Comment actions Permalink

>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"]

 

 

0
Comment actions Permalink

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.

2
Comment actions Permalink

works for me:

please provide a sample project that shows upo the issue

1
Comment actions Permalink

When the parser and plugin options are in the override section only, the TypeScript lint doesn't work. Example:

overrides: [{
files: "app/**/*.ts"),
parser: "typescript-eslint-parser",
plugins: [
"typescript",
"lodash",
],
env: {
browser: true,
},
....
0
Comment actions Permalink

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

0
Comment actions Permalink

@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.

0
Comment actions Permalink

@Elena When I get home i'll make the sample project. Running ESLint with this kind of config works in the terminal.

@Alangpierce my project already has the eslint-plugin-typescript, but it's in the overrides config, and even if I put it in the root plugins config IntelliJ WebStorm doesn't work in the file. Only when I put the parser outside the overrides it works with WebStorm.

0
Comment actions Permalink

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

0
Comment actions Permalink

>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?

0
Comment actions Permalink

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.

0
Comment actions Permalink

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):

"import/resolver": {
    "node": {
      "extensions": [
        ".js",
        ".tsx",
        ".ts"
      ]
    }
  }
1
Comment actions Permalink

> 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.

0
Comment actions Permalink

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

2
Comment actions Permalink

Thanks that helps a lot!

0
Comment actions Permalink

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.

0
Comment actions Permalink

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?

 

0
Comment actions Permalink

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

(npm i && npm test)

0
Comment actions Permalink

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

0
Comment actions Permalink

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

0
Comment actions Permalink

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.

2
Comment actions Permalink

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

0
Comment actions Permalink

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.

 

11
Comment actions Permalink

Thanks Adam, This worked as a charm.

1
Comment actions Permalink

Thanks Mohamed!

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

Hopefully this change gets merged into an upcoming release.

 

1
Comment actions Permalink

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.

1
Comment actions Permalink

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.

0
Comment actions Permalink

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

What PHPstorm version is it?

0

Please sign in to leave a comment.