为 VS Code 智能感知导入时避免 eslint 错误 no-unused-vars

Question

在使用 ES6 类时，我希望在 VS Code 中使用具有代码完成功能的 Intellisense。为了实现这一点，我导入了一个类并添加了 JSDoc 标记来告诉 VS Code 这个类在特定方法中使用。这工作正常，但是当我打开此规则时，ESLint 会抱怨 import 语句没有未使用的变量。原因是导入的类只在 JSDoc 中引用，而在实际的 JavaScript 代码中没有引用。

考虑这个例子：

类1.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() { }
}

对于在 JSDoc 中（仅）引用的导入，是否有任何方法不会获得 no-unused-vars 错误而无需完全关闭它？

Answer 1

您可以使用eslint-plugin-jsdoc来实现此目的。

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

然后只需添加到您的 .eslintrc 文件中：

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

来自文档：

无未定义类型

检查 jsdoc 注释中的类型是否已定义。这可用于检查未导入的类型。

启用此规则时，jsdoc 注释中的类型将解析为已使用的变量，即不会被 no-unused-vars 标记为未使用。

Answer 2

注意：您应该小心使用它，以防导入有副作用！（很少使用 ES 模块，但仍有可能）

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

在 JavaScript 中你无法真正解决这个问题......

在 TypeScript 中，您可以：

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

在不影响运行时引用类的正确方法是在 JSDoc 中使用 TypeScript 样式的导入。我的 VSCode 似乎没有接受Class2（将鼠标悬停在它上面，它只是说“任何”类型），但你可能有更多的运气。

就是这样：

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

或者干脆：

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