ESLint not working in Visual Studio 2017 or 2019

Question

I am trying to use ESLint to lint the typescript files in my React SPA Asp.net Core Project.

I found that VS uses its own ESLint and TS settings. It wouldn't care any of my local config files included .eslintrc or tsconfig.json in the root folder of React App.

For ESLint, I can enable ESlint there, but the global config file is not working.

For TS, I found some formatting in setting and typescript build in project properties.

The interesting part is, although I installed the latest Typescript for Visual Studio(4.3.2), ESNEXT is missing in ECMAScript Version. And therefore I got tons of errors:

I have read this post ESLint support Visual Studio 2017. It is quite old (2018) but it stated that the ESLintversion embedded in VS is old and VS won’t use my installed ESLint.

Then my question is, How to get rid of the all errors (which included I think produced by the wrong target version of ES version) and make ESLint run as good as VS can?

BTW, I am using 2019 v16 and 2017 >= v15.8.

Thank you so much for all attention. I have wasted many times on this issue.

Answer 1

I still have problem to use ESLint but now I eliminated all TS errors.

I solved TS errors by deleting the following PropertyGroup in .csproj:

After deleting it, my typescript build in project properties looks like this:

And now VS finally detected my tsconfig.json and therefore compile well.

This Post also helped me.

Answer 2

Yes, it seems like VS 2019 (16.10.0) does not take into account the global %USERPROFILE%\.eslintrc (at least, it does not respect parserOptions.ecmaVersion and parserOptions.sourceType), perhaps because of the conflict of typescript versions in the local (4.3.2) and %LOCALAPPDATA%\Microsoft\TypeScript\ESLint (3.7.4) folders.

I created a local .eslintrc.json file in the project root with simple configuration, and id did the trick for me:

{
    "parserOptions": {
        "ecmaVersion": 6,
        "sourceType": "module"
    },
    "env": {
        "es6": true
    }
}

No mentioning eslint in local package.json, no local eslint in node_modules! VS uses its global ESLint modules and its default config. Beware that VS resets its ESLint\package.json to initial if you try to update versions of the modules in it!

PS. This approach does not work if parserOptions.project is specified in local .eslintrc file: eslint does not understand ECMA2015 module import again, despite tsconfig module and target options

PPS. ESLint does not process files other than .tsx? or .jsx? when runs under VS IDE (eg .vue) And I have not found how exactly VS runs eslint and passes arguments to it. It obviously uses typescriptlinting.all.js, but it is vague