Avoiding eslint error no-unused-vars when importing for VS Code intellisense

Question

I want to have Intellisense with code-completion in VS Code when working with ES6 classes. To achieve this I import a class and add JSDoc markup to tell VS Code that this class is used in a particular method. This works fine, but ESLint complains about no-unused-vars for the import statement when I turn on this rule. The reason is that the imported class is only referenced in JSDoc but not in the actual JavaScript code.

Consider this example:

class1.js

import Class2 from './class2'; // ESLint complains about no-unused-vars here

export class Class1 {
    /**
     * @param {Class2} foo 
     */
    anotherMethod(foo) {
        foo.someMethod(); // Intellisense and code-completion works for foo.
    }
}

class2.js

export default class Class2 {
    someMethod() { }
}

Is there any way of not getting the no-unused-vars error for imports that are (only) referenced in JSDoc without fully turning it off?

Answer 1

NOTE: you should be careful using this in case the import has side-effects! (rare with ES modules but still possible)

import Class2 from './class2'; // eslint-disable-line no-unused-vars

You can't really get around that in JavaScript proper...

In TypeScript, you could:

// @ts-ignore
type Class2 = import ("./class2").default;

The right way to reference a class without impacting the runtime would be to use the TypeScript-style import within your JSDoc. My VSCode doesn't appear to pick up on the type of Class2 (hover over it and it just says 'any' type) but you may have more luck.

Here's how:

/**
 * @typedef {import("./class2").default} Class2
 * @param {Class2} view
 */

or simply:

/**
 * @param {import("./class2").default} view
 */

Answer 2

You can achieve this using the eslint-plugin-jsdoc.

npm install --save-dev eslint-plugin-jsdoc

Then just add to your .eslintrc file:

"rules": {
    "jsdoc/no-undefined-types": 1
},
"plugins": [
    "jsdoc"
]

From the docs:

no-undefined-types

Checks that types in jsdoc comments are defined. This can be used to check unimported types.

When enabling this rule, types in jsdoc comments will resolve as used variables, i.e. will not be marked as unused by no-unused-vars.