解决 ESLint 错误“no-unused-vars”

Posted 2023-02-21

【中文标题】解决 ESLint 错误“no-unused-vars”

【英文标题】：Resolve ESLint error "no-unused-vars"

【发布时间】：2018-06-27 13:49:43

【问题描述】：

错误

由于以下 eslint 错误，模块构建失败：

错误 1：“player”被赋值但从未使用过no-unused-vars

错误 2：未定义“YT”no-undef

错误 3：“onYouTubeIframeAPIReady”已定义但从未使用过no-unused-vars

守则

function videoInit() 
    // Initialise video
    var tag = document.createElement('script');
    tag.src = "https://www.youtube.com/iframe_api";
    var firstScriptTag = document.getElementsByTagName('script')[0];
    firstScriptTag.parentNode.insertBefore(tag, firstScriptTag);

    // Initialise the player
    var player;

    function onPlayerReady(event) 
        event.target.playVideo();
    

    function onPlayerStateChange(event) 
        if (event.data === YT.PlayerState.ENDED) 
            event.target.playVideo();
        
    
    
    function onYouTubeIframeAPIReady()  
        player = new YT.Player('player', 
            height: '100%',
            width: '100%',
            videoId: 'ScMzIvxBSi4',
            playerVars : 
                'mute' : 1,
            ,
            events: 
                'onReady': onPlayerReady,
                'onStateChange': onPlayerStateChange,
            ,
        );
    

目标

解决 no-unused-vars 和 no-undef 错误。

函数调用不在本地文件中，而是来自 YouTube API 根据documentation：

onYouTubeIframeAPIReady – 当页面完成播放器 API 的 javascript 下载后，API 将调用此函数，这样您就可以在页面上使用该 API。因此，此函数可能会创建您希望在页面加载时显示的播放器对象。

可以通过使用忽略错误no-unused-vars /* eslint-disable no-unused-vars */，但我相信有更好的方法来解决这些问题。

非常感谢任何建议。

【问题讨论】：

单独的.eslintrc 文件？

【参考方案1】：

这个函数应该可以作为全局变量使用（=window 对象的属性）。就目前而言，它只是一个本地的，在videoInit() 内可用 - 但不能从外部调用。所以 ESLint 实际上在这一点上是正确的。

使用类似于...的东西

window.onYouTubeIframeAPIReady = onYouTubeIframeAPIReady;

对于player，如果你打算使用new YT.Player()调用的返回值（播放器的实例），你只需要这个变量。在这种特殊情况下，您不使用它，因此会发出警告。考虑将 videoInit 转换为返回 Promise 的函数（使用 player 值解决）。

【讨论】：

非常感谢您的解释，它解决了所有问题。