Configure ESLint with TypeScript in Visual Studio 2019

Question

I am trying to configure ESLint in Visual Studio 2019, I enabled ESLint in Options and I have installed ESLint 7.4.0 in node_modules inside my project, which should cause Visual Studio to use that version according to this document. But this causes a single not so helpful error.

When running eslint . in the command line from the same directory as the .eslintrc.yml file it works and errors and warnings about my code are reported.

When viewing a .js, .ts or .tsx file in Visual Studio it reports the following error internal-error: (ESLint) Unexpected token { at the first character of the file. No other errors are reported (where the command line does report errors). Visual Studio does report the usual intellisense TypeScript errors in these files.

The following is my .eslintrc.yml file.

---
parser: "@typescript-eslint/parser" # Specifies the ESLint parser
parserOptions:
    ecmaFeatures:
        jsx: true # Allows for the parsing of JSX
settings:
    react:
        version: detect # Tells eslint-plugin-react to automatically detect the version of React to use
extends:
    - plugin:react/recommended # Uses the recommended rules from @eslint-plugin-react
    - plugin:react-hooks/recommended # Uses the recommended rules from @eslint-plugin-react-hooks
    - plugin:@typescript-eslint/recommended # Uses the recommended rules from the @typescript-eslint/eslint-plugin

Is there a way to see what Visual Studio is executing and what causes this error?

I tried running devenv.exe /log, but this logged nothing interesting, only that something was done with eslint. As you can see below.

821  Begin export of category 'TypeScript_EsLint' ({d5d56c12-87c4-46f2-894f-3a75ee781f48}) from package 'Microsoft.VisualStudio.LanguageServices.TypeScript.TypeScriptPackage, Microsoft.VisualStudio.LanguageServices.TypeScript, Version=16.0.0.0, Culture=neutral' ({2FFE45C4-5C73-493C-B187-F2E955FF875E}). 3095452 KB of virtual memory currently available.   Profile manager 2020/08/19 08:11:21.001 
822  End export of category 'TypeScript_EsLint' ({d5d56c12-87c4-46f2-894f-3a75ee781f48}) from package 'Microsoft.VisualStudio.LanguageServices.TypeScript.TypeScriptPackage, Microsoft.VisualStudio.LanguageServices.TypeScript, Version=16.0.0.0, Culture=neutral' ({2FFE45C4-5C73-493C-B187-F2E955FF875E}). 3095452 KB of virtual memory currently available.   Profile manager 2020/08/19 08:11:21.003

This is this issue on Microsoft Developer Community https://developercommunity.visualstudio.com/content/problem/1109947/local-install-of-eslint-breaks-in-editor-linting.html — Qurben, Sep 09 '20 at 07:31

score 0 · Answer 1 · answered Sep 29 '21 at 10:11

I had almost the exact same problem, and thanks to the article linked from the comment by @Qurben, I solved it by:

Downgrade to ESLint 6.8, since ESLint 7 requires Node.js 12, and older versions of Visual Studio 2019 run Node.js 8. This may not be necessary any longer.
Add parserOptions.tsconfigRootDir = __dirname to .eslintrc.js (as seen in this instruction. Note that this probably doesn't work in .eslintrc.yml or .eslintrc.json.

Configure ESLint with TypeScript in Visual Studio 2019

1 Answers1