How to display eslint errors in Visual Studio 2019 Error list

Question

Having SPA application with Angular and .net core web api, I would like to apply some typescript code style, so all of my team mates write code in same style. TSLint which is default linter shipped with angular is deprecated (as mentioned on theirs github page) so I went through tslint recomendations an try to use typescript-eslint. It was easy to add it to the project and run manually from cmd/powerShell. Now I want to run lint after msbuild so I added after build step in csproj file

<Target Name="typescript-eslint" AfterTargets="Build">
  <Exec WorkingDirectory="$(SpaRoot)" Command="npx eslint --ext .ts"/>
</Target>

Which is works fine, but errors appeared in Error List window not helpful at all. I wonder is there a way to output errors in same way as it will be regular .net compilation error, so I can double click on error and quickly navigate to it.

Answer 1

TSLint is deprecated. You can do the following:

• Install ESLint via npm.
• Amend your build script to the following:

<Target Name="RunESLint" BeforeTargets="AfterBuild">
    <Exec Command="npx eslint $(SpaRoot) --format visualstudio"></Exec>
</Target>

The key is in the --format option.

Answer 2

How to display eslint errors in Visual Studio 2019 Error list

First if all, VS cannot detect and specifically analyze external files and Error List window has no right to obtain the specific information of the error in the external file.

Further, you should make sure you have referenced typescript-eslint folder in your project.

1) Using Add Existing Item to import typescript-eslint folder into your project.

2) add these at the bottom of the xxx.csproj file to referenced these:

<PropertyGroup>
<SpaRoot>xxx\xxx\typescript-eslint-master\</SpaRoot>
</PropertyGroup>
<Target Name="typescript-eslint" AfterTargets="Build">
 <Exec WorkingDirectory="$(SpaRoot)" Command="npx eslint --ext .ts"/>
</Target>

If you have done these and still face the same error, it is quite strange and I think whether you did any extra operation or the project itself.

Also, I have downloaded your link's file typescript-eslint and use your target and this defined property, I built the project without any errors.

And if you did any operation about your project files, it will be caught by the error list and locate the error.

Suggestion

close VS Instance, delete .vs hidden folder under the solution folder, bin, obj folder and then restart your project again.

In addition, if you did any other target operation to cause this issue, you could share with us.

Update 1

I have made a full description about the possible situation and thanks for your patience.

Besides, all of these above is due to these files are handled by VS IDE.

Error list can locate the specific errors from the referenced files handled by VS IDE.

However, your errors are from external CMD command line, the whole errors are just errors returned by CMD.

And VS intelligently judges whether your CMD command is correct, but the error returned by the specific execution steps, VS can display, but can not capture the specific location.

And VS does not have the job to catch specific errors for third-party tools.

Conclusion

So you cannot get what you want from Error List in your situation.