方法链中如何添加TSLint禁用注释消除未使用变量警告？

问题根源 #

你看到的警告来自ESLint的@typescript-eslint/no-unused-vars规则，不是TSLint，所以用TSLint的/* tslint:disable:no-unused-variable */注释完全无效，得用ESLint对应的禁用规则。

三种解决方法 #

1. 直接移除未使用的参数（最推荐）

既然_和i在map回调里完全没用到，直接简化代码：

return (
    <div className={style}>
        <Header title="INVENTORY" />
        {Array(slots)
            .fill(0)
            .map(() => (
                <ItemSlot />
            ))}
    </div>
)

这样从根源上消除警告，代码更简洁。

2. 用ESLint单行禁用注释

如果需要保留参数（比如后续可能用到），在map方法的前一行添加ESLint的禁用注释：

return (
    <div className={style}>
        <Header title="INVENTORY" />
        {Array(slots)
            .fill(0)
            // eslint-disable-next-line @typescript-eslint/no-unused-vars
            .map((_, i) => (
                <ItemSlot />
            ))}
    </div>
)

// eslint-disable-next-line会忽略下一行的指定规则警告。

3. 用ESLint块级禁用注释

如果要禁用某一段代码的规则，用块注释包裹：

return (
    <div className={style}>
        <Header title="INVENTORY" />
        {/* eslint-disable @typescript-eslint/no-unused-vars */}
        {Array(slots)
            .fill(0)
            .map((_, i) => (
                <ItemSlot />
            ))}
        {/* eslint-enable @typescript-eslint/no-unused-vars */}
    </div>
)

注意用完要重新启用规则，避免影响其他代码。

内容的提问来源于stack exchange，提问作者Michael Moreno