ESLint no-undef - BigCommerce 的 js 问题答案

【问题标题】：ESLint no-undef - js issue with BigCommerceESLint no-undef - BigCommerce 的 js 问题
【发布时间】：2017-10-08 06:28:35
【问题描述】：

我在通过 ESLint 运行的 .js 文件中获取了此代码。但它抛出了关于这一行的错误：iFrameResize({。

说：error 'iFrameResize' is not defined no-undef。

如果我这样定义：const iFrameResize()

我的代码不再有效，如何让 ESLint 满意并保持代码有效？

export default class Page extends PageManager {

before(next) {
    next();
}

loaded(next) {
    next();
}

after(next) {
    const url = Url.parse(location.href, true);
    const IC_PAGE = '/international-checkout';
    const currentPageUrl = url.pathname;
    if (currentPageUrl.indexOf(IC_PAGE) !== -1 && $('#icForm').length === 1) {
        $(document).ready(() => {
            if ($('#icForm').length === 1) {
                if ($('.GiftStatus') && $('.GiftStatus').val() === '1') {
                    alert('Gift Certificate is not available for international orders. Please remove Gift Certificate from shopping cart before proceeding with International Checkout.');
                    window.parent.location.href = '/cart.php';
                    return false;
                }
                $('.icformfields').each((i, e) => {
                    const currentId = $(e).attr('id');
                    const res = currentId.split('-');
                    const finalId = Number(res[1]) + 1;
                    const finalName = $(e).attr('name') + finalId;
                    $(e.currentTarget).attr('name', finalName);
                });
                document.getElementById('icIframe').src = 'https://www.internationalcheckout.com/cart.php';
                document.getElementById('icForm').submit();
                $('#icIframe').load(() => {
                    $('#icForm').remove();
                    $('#loading').css('display', 'none');
                    $('html, body').animate({
                        scrollTop: $('#icIframe').offset().top,
                    }, 1000);
                    $('#icIframe').fadeIn();
                });
            }
        });
        iFrameResize({
            checkOrigin: false,
            enablePublicMethods: true,
        });
    }
    next();
}

}

我想知道如何在不禁用特定行的错误报告的情况下满足 ESLint。

【问题讨论】：

Turning off eslint rule for a specific line的可能重复
@Michael 我明白你为什么认为它会重复，但我真的很想知道如何在不禁用错误报告的情况下让 ESLint 满意。
我现在看到了区别——我错过了你关于“不禁用错误报告”的问题的最后一部分，所以我同意这不是重复的

标签： javascript bigcommerce eslint

【解决方案1】：

同样值得注意的是，eslint 提供了多种解决方法。请查看eslint docs。

我建议将以下内容添加到文件顶部。使用此方法定义仅在几个地方使用的全局依赖项：

/* global iFrameResize */

你也可以提供一个数组：

/* global iFrameResize, iFrameManage, etc */

如果您经常使用 iFrameResize 或者如果您依赖于 jQuery 之类的东西，请考虑在您的 .eslintrc 文件中将其定义为全局。

"globals": {
    "iFrameManage": true,
}

【讨论】：

【解决方案2】：

如果您确定代码在 iFrameResize() 上运行，也许是因为您使用 js 文件设置的架构，您可能只想忽略该错误。最简单的是

// eslint-disable-line

禁用该行的 esilnt。

由于此函数定义来自可能将其附加到全局范围 window 的库，因此从该范围调用它就可以了

window.iFrameResizer()

现在 eslint 知道你正在调用驻留在 window 对象上的函数，所以它不会抱怨

【讨论】：

谢谢，这肯定回答了直接的问题。我希望我知道是否有办法在不禁用错误的情况下满足 ESLint...
这是一个名为iframe-resizer的库
这是一个存在于全球范围内的定义。只需执行 window.iFrameResizer()
完美！这就是诀窍，现在我对事情的理解更好了！感谢您的帮助。