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 newcommand. - I ran
eslint --debug /Users/Yahia/Desktop/Plugngrow-UI/png-ui/.eslintrc.jscommand. 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.
package.json(as it is in you github repo), did you executenpm installto install a the needed plugins?