Vscode-eslint: Autofix lightbulb not shown in TypeScript

[jacobrask]

The fixes lightbulb with suppress options does not show up in TypeScript files. If I manually change the language mode of a file to JavaScript, it shows up, and then disappears again if I change it back to TypeScript. The error shows as expected and I have the following settings enabled:

    "eslint.validate": [
        "javascript",
        "javascriptreact",
        "typescript",
        "typescriptreact"
    ],

[dbaeumer]

Fixes are only automatically shown for JS right now. You can enable for TS using the following setting:

    "eslint.validate": [
        "javascript",
        "javascriptreact",
        { "language": "typescript", "autoFix": true }
        { "language": "typescriptreact", "autoFix": true }
    ],

Keeping the issue open to consider if we should auto enable TS.

[svipas]

@dbaeumer I vote for an automatic validation and auto fix enabling for TypeScript files because of this https://github.com/typescript-eslint/typescript-eslint. I'm currently using it in VS Code and it works perfectly. I even think TSLint after some time will be abandoned... Even TypeScript team will use ESLint for their own repo, you can read it here: https://github.com/Microsoft/TypeScript/issues/29288 and here https://eslint.org/blog/2019/01/future-typescript-eslint

[dbaeumer]

The only problem we need to keep in mind is that a misbehaving plugin might caused bad fixes in the code. This is why this is currently a opt in.

PR welcome to make this a opt-out.

[David-Else]

https://github.com/typescript-eslint/typescript-eslint seems to be working great, but I had to search through bug reports to find the above config info to make it work in VS Code... very bad user experience! Please enable it by default.

[dbaeumer]

I quickly looked into this and it is a little bit more tricky. The problem is that the extension currently doesn't know if the eslint npm module is configured in a way that it will be able to validate TS files. If I enable this by default and eslint is not configured correctly I will validate TS files with a JS validator which has bad effects. See also https://github.com/Microsoft/vscode-eslint/issues/642

If anyone knows about some eslint API to figure this I would appreciate it. See also https://github.com/eslint/eslint/blob/master/docs/developer-guide/nodejs-api.md

[saranshkataria]

Can we not read the eslintrc file to see if a typescript plugin is installed?

[agwells]

Could you use CLIEngine.getConfigForFile() to check for the presence of the @typescript-eslint plugin? https://github.com/eslint/eslint/blob/master/docs/developer-guide/nodejs-api.md#clienginegetconfigforfile

[dbaeumer]

@saranshkataria I would like to avoid reading the eslintrc file myself for the following reasons:

• can exist in different formats js, json, yml, ...
• if its format evolve I need to catch up.

I so far tried hard to stay away from this.

@agwells nice idea CLIEngine.getConfigForFile(). Would still require understanding the return JSON strcuture but at least it doesn't require file looksups and interpretation.

[agwells]

I'm not sure that it is really necessary to make sure the user has their ESlint configured correctly, so long as:

1. typescript and typscriptreact are not included in eslint.validate by default
2. And eslint.autoFixOnSave is false by default

Then, if the user enables all that, they've taken a deliberate step and can assume the risk themselves.

For that matter, the risk of inappropriate fixes being applied to a TypeScript file seems fairly small, because ESLint itself, if it's not configured for TypeScript, is most likely to mark a TypeScript file as full of unfixable parsing errors. :)

[dbaeumer]

@agwells 1. and 2. are actually the case but the requests ask to make this a better out of the box expierence. So include typescript and typscriptreact in the eslint.validate and even enable autofix. But this makes only sense when the linter is configured to lint TS files.

[ExE-Boss]

I think we should use CLIEngine.getConfigForFile(…) to determine whether ESLint is correctly configured to be able to lint TypeScript files, and if it’s not, we would give the user a suggestion to install the @typescript-eslint plugin.

[agwells]

I'm not sure that it is really necessary to make sure the user has their ESlint configured correctly, so long as:

1. `typescript` and `typscriptreact` are not included in `eslint.validate` by default

2. And `eslint.autoFixOnSave` is `false` by default

1. and 2. are actually the case but the requests ask to make this a better out of the box expierence. So include typescript and typscriptreact in the eslint.validate and even enable autofix. But this makes only sense when the linter is configured to lint TS files.

To me these settings are fine as-is. As I see it, this excellent plugin already has all the functionality it needs, it's just that this one config setting is confusing. :)

Specifically, as a user of the plugin, I expected that if I enter this in my settings...

    "eslint.validate": [
        "javascript",
        "javascriptreact",
        "typescript",
        "typescriptreact"
    ],

... that it would result in TypeScript and TSX getting the same level of functionality as JavaScript and JSX.

The ability for the plugin to auto-detect the TS configuration etc, would be nice. But I would be very happy with just this small change, of only requiring "typescript" in the settings instead of { "language": "typescript", "autoFix": true }

[dbaeumer]

But I would be very happy with just this small change, of only requiring "typescript" in the settings instead of { "language": "typescript", "autoFix": true }

This is actually easy and I can add this.

[scarcoco]

Fixes are only automatically shown for JS right now. You can enable for TS using the following setting:

    "eslint.validate": [
        "javascript",
        "javascriptreact",
        { "language": "typescript", "autoFix": true }
        { "language": "typescriptreact", "autoFix": true }
    ],

Keeping the issue open to consider if we should auto enable TS.

when config in project, it's not work, but when i config it in user, it is ok

[Stephen2]

FYI, this very fixed a problem I was having just now.

react/jsx-sort-props wouldn't autofix in TSX, but all other eslint rules would autofix fine in TSX.

Also CLI eslint autofixed them fine.

I am very happy it fixed stuff, but similarly confused as to why I need to do this.

[dbaeumer]

This got improved and fixed for 2.x. The extension now auto detects TypeScript. No config necessary.