Javascript 仅 ESLint 'HTMLElement' 未定义 no-undef 错误？

Question

不是打字稿问题

我已经在关闭时问过这个问题，说它已经在这里得到回答：

ReferenceError：TypeScript 中未定义 HTMLElement

请注意，这不是一个打字稿项目，因此打字稿答案不适合。

又来问这个问题了。

对于此项目中的源文件此ESLint配置会创建这些错误。

/Users/oleersoy/Temp/Remove/fs-javascript-starter/src/hello-world.component.js
   7:42  error  'HTMLElement' is not defined     no-undef
  52:3   error  'customElements' is not defined  no-undef

/Users/oleersoy/Temp/Remove/fs-javascript-starter/src/hello-world.component.spec.js
  3:1  error  'suite' is not defined  no-undef
  4:3  error  'test' is not defined   no-undef

✖ 4 problems (4 errors, 0 warnings)

我们如何关闭这些以便 ESLint 允许

suite

、

test

、

HTMLElement

和

customElements

？

以下为参考源文件：

eslint.config.js

import eslint from "@eslint/js";

export default [
    // apply recommended rules to JS files
    {
        files: ["**/*.js", "**/*.cjs", "**/*.mjs"],
        rules: eslint.configs.recommended.rules
    },
    {
        ignores: ["rollup.config.js", "web-test-runner.config.js"]
    }
]

src/hello-world.component.js

/**
 *  @category WebComponent
 *
 * Hello World Web Component
 * that renders a greeting.
 */
export class HelloWorldComponent extends HTMLElement {
    static get observedAttributes() {
      return ['name'];
    }
  
    /**
     * The name to greet
     * @defaultValue World
     */
    name = 'World';
    something
    /**
     * Initializes the name property to `World`.
     */
    constructor() {
      super();
      //    this.name = 'World';
    }
  
    /**
     * Sets the component inner
     * html to the greeting.
     */
    connectedCallback() {
      this.textContent = `Hello ${this.name}!`;
    }
  
    //========================================
    // attribute change callback
    //========================================
    attributeChangedCallback(
      property,
      oldValue,
      newValue
    ) {
      if (oldValue === newValue) return;
      switch (property) {
        case 'name':
          this.name = newValue;
          break;
        default:
          throw new Error(`Unhandled attribute: ${property}`);
      }
    }
  }
  customElements.define('hello-world', HelloWorldComponent);

src/hello-world.component.spec.js

import {expect, fixture, html} from '@open-wc/testing';

suite('hello-world.component tests', () => {
  test('fixture instantiation', async () => {
    const el = (await fixture(
      html`<hello-world></hello-world> `
    ));
    expect(el).not.to.equal(null);
    //    expect(true).to.equal(false);
  });
});

Answer 1

好的 - 一种解决方案是添加这样的全局注释。

这将修复测试 linting 错误。

/*global suite*/
/*global test*/

这修复了组件中的全局变量。

/*global HTMLElement*/
/*global customElements*/