Capacitor v3 Plugin Typings VS Code ESLint Extension Errors

[KevinKelchen]

Hello! 👋

I've bumped into an issue that I don't think is the fault of Capacitor but rather is an odd behavior of the VS Code ESLint extension with Capacitor v3.

I'm posting this Q&A to see if anyone else has noticed the same issue, learn how they've potentially worked around or fixed it, and to share this knowledge with others. 🙂

We're working on upgrading from Capacitor v2 to v3. We do not have this issue in our app with v2 but it occurs with v3. We use VS Code with the ESLint extension in an Ionic Angular app.

Issue Description

With Capacitor v3, when going to definition on an import from a Capacitor plugin, the typings file opens and VS Code displays an error from the ESLint extension.

Here's an example of going to definition on Directory in the import import { Directory } from "@capacitor/filesystem";:

ESLint: Failed to load config "@ionic/eslint-config/recommended" to extend from. Referenced from: /Users/<redacted>/node_modules/@capacitor/filesystem/package.json. Please see the 'ESLint' output channel for details.

Note the annoying pop-up that gets in the way of viewing Capacitor plugin typings. Viewing the typings are useful in the dev workflow for quickly learning about a plugin's capabilities, so this is unfortunate. The issue also happens with other plugins.

There are no linting errors when running ESLint from the command-line. That's not surprising though because in our ESLint configuration node_modules should not be included. It's an issue with the VS Code ESLint extension only where it tries to lint files open in the editor which are not included in the ESLint config--including third-party files in node_modules. I've tried being more explicit about excluding node_modules and even adding an .eslintignore to address it. No changes in behavior.

It appears that someone else has run into the same issue with a different library. It seems to pertain to having a dependency on a library (in our case, a Capacitor plugin) that extends an ESLint configuration/plugin that your own project does not (in our case, @ionic/eslint-config).

It looks like with an upcoming release of the ESLint VS Code extension that this error pop-up may no longer be a thing.

Workaround

Given the error message mentioning @ionic/eslint-config, I added that package to our devDependencies and the error went away.

We can get by doing this for now and hope it will eventually be resolved by the VS Code ESLint extension.

In Closing

If anyone else is aware of this issue and has addressed it in a more elegant way, feel free to chime in! If not, hopefully this discussion can help someone else who likewise runs into the issue. 🙂