Overrides warnings not showing in problems pane

[mcchong]

I am migrating from a javascript project to typescript, and have set up a eslintrc.yml file with the following overrides:

  - files:
      - "*.ts"
      - "*.tsx"
    parser: "@typescript-eslint/parser"
    extends: 
      - plugin:@typescript-eslint/recommended

However, the warnings emitted by that overrides (which appear when building in the terminal) do not show in the problems pane. I can't figure how to enable them so I think this is a bug.

Some more details:

• lint task is enabled
• I can see warnings from eslint from other rules in the "Problems" tab
• I can modify my eslintrc.yml file and disable and enable other rules
• The rules from the overrides item above are not visible in the problems tab, but visible when compiling other ways (e.g. running the build task).

[dbaeumer]

Please see https://github.com/microsoft/vscode-eslint#settings-options especially the setting eslint.lintTask.enable.

Please ping if this doesn't address your problem.

[dbaeumer]

Just to be clear: you need to run the task to get problems for all files using the Run Task command in VS Code.

[mcchong]

Sorry, updating my description for clarity:

• lint task is enabled
• I can see warnings from eslint from other rules in the "Problems" tab
• I can modify my eslintrc.yml file and disable and enable other rules
• The rules from the overrides item above are not visible in the problems tab, but visible when compiling other ways (e.g. running the build task).

[dbaeumer]

@mcchong can you provide me with a GitHub repository I can clone that demos that.

[mcchong]

https://github.com/mcchong/react-image-compressor

[mcchong]

Specifically, looking at DemoComponent.tsx vs ImageCompressor.jsx

Building with "npm run build" or the build task emits 2 linter warnings, one for the jsx file on line 64, and one for the tsx file on line 8.
In the "Problems" pane, with both files open, I only see the warning for the issue in the jsx file.

[dbaeumer]

@mcchong I can not reproduce this. Running in the terminal gives:

[dbaeumer]

There is no file DemoComponent.tsx in the repository.

[mcchong]

Try cloning from here https://github.com/mcchong/react-image-compressor.git ? It's the forked repository under my account, master branch. The latest commit should be d785f00949794c1a80278112b2806939e26c9a6c, and DemoComponent.tsx is in src/components. I just tried cloning it myself and was able to reproduce..

[mcchong]

But running react-scripts build gives me different errors than ./node_modules/.bin/eslint .... Am I missing some config then?

[dbaeumer]

Yes, I guess react-scripts build will run with different ESLint settings. You need to look into these script to find out which settings they use from where. The ESLint extension uses the same settings as the eslint command in the terminal.

Let me know if you need further help.

[mcchong]

Were you able to reproduce the issue from the repo above? Both scripts seem to be using my .eslintrc file, but the eslint command seems to be missing some rules.

[mcchong]

Okay figured it out. There is an "eslintConfig" option in the package json that webpack uses that I didn't see. I made that consistent with the .eslintrc. Thanks for the tips.

[mcchong]

For anyone running into similar issues it looks like the issue is actually on react-scripts side:
facebook/create-react-app#8849
facebook/create-react-app#9083