Logo Questions Linux Laravel Mysql Ubuntu Git Menu
 

ESLint is not recognizing "@typescript-eslint/eslint-plugin"

I have been trying to get ESLint to work on a new Angular project in VS Code but it is failing to load "@typescript-eslint/eslint-plugin". I have spent the last 3 hours trying to figure out where the problem is and looked everywhere for a solution.

Failed to load plugin '@typescript-eslint' declared in 'png-ui/.eslintrc.js': Cannot find module '@typescript-eslint/eslint-plugin'
Require stack:
- /Users/Yahia/Desktop/Plugngrow-UI/__placeholder__.js
Referenced from: /Users/Yahia/Desktop/Plugngrow-UI/png-ui/.eslintrc.js
Happened while validating /Users/Yahia/Desktop/Plugngrow-UI/png-ui/.eslintrc.js
This can happen for a couple of reasons:
1. The plugin name is spelled incorrectly in an ESLint configuration file (e.g. .eslintrc).
2. If ESLint is installed globally, then make sure '@typescript-eslint/eslint-plugin' is installed globally as well.
3. If ESLint is installed locally, then '@typescript-eslint/eslint-plugin' isn't installed correctly.

Consider running eslint --debug /Users/Yahia/Desktop/Plugngrow-UI/png-ui/.eslintrc.js from a terminal to obtain a trace about the configuration files used.

Debugging steps that I have taken so far:

  • I uninstalled the global version as well as the extension, then reinstalled the extension and installed ESLint locally in the project folder.
  • I am using a fresh install of an Angular app that was created using Angular ng new command.
  • I ran eslint --debug /Users/Yahia/Desktop/Plugngrow-UI/png-ui/.eslintrc.js command. It results in no warnings other than a warning for ignoring the ".eslintrc.js" file while debugging.

Please note that ESLint works fine in another project which I downloaded from Angular docs while doing the introductory tutorial.

I have created a Github repo for the project if that helps with checking.

Please, excuse my novelty in programming and related tools.

like image 206
Yahia El-Masry Avatar asked Dec 11 '19 13:12

Yahia El-Masry


People also ask

Can I use ESLint with TypeScript?

ESLint is a JavaScript linter that you can use to lint either TypeScript or JavaScript code.

Do you need ESLint for TypeScript?

In the TypeScript 2019 Roadmap, the TypeScript core team explains that ESLint has a more performant architecture than TSLint and that they will only be focusing on ESLint when providing editor linting integration for TypeScript. For that reason, I would recommend using ESLint for linting TypeScript projects.

Does prettier work with TypeScript?

Using the above config, Prettier will not format TypeScript code on paste or save but it will format code on paste or save for any other language that it understands.

What does TypeScript ESLint parser do?

An ESLint parser which leverages TypeScript ESTree to allow for ESLint to lint TypeScript source code.


1 Answers

I just met with this problem yesterday. I would suggest you reinstall "@typescript-eslint/eslint-plugin" locally and see that help. You can also have fresh setup of eslintrc.js file and should be easy to fix.

This link was helpful. https://www.robertcooper.me/using-eslint-and-prettier-in-a-typescript-project

like image 57
indolentdeveloper Avatar answered Oct 16 '22 12:10

indolentdeveloper