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:
ng new
command. 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.
ESLint is a JavaScript linter that you can use to lint either TypeScript or JavaScript code.
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.
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.
An ESLint parser which leverages TypeScript ESTree to allow for ESLint to lint TypeScript source code.
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
If you love us? You can donate to us via Paypal or buy me a coffee so we can maintain and grow! Thank you!
Donate Us With