如何在Vue3/Vite项目中用ESLint正确校验SharedWorker代码？

以下是几种无需屏蔽错误规则、让ESLint正确校验SharedWorker代码的方法：

方法1：开启ESLint的Worker环境 #

ESLint内置了worker环境配置，开启后会自动识别SharedWorker全局作用域下的API（包括onconnect）。修改项目根目录的ESLint配置文件（如.eslintrc.cjs）：

module.exports = {
  // 保留原有配置...
  env: {
    browser: true,
    es2021: true,
    node: true,
    worker: true // 添加该行开启Worker环境
  }
}

方法2：单独声明onconnect为全局变量 #

如果不想全局开启Worker环境，可在ESLint配置中单独指定onconnect为合法全局变量：

module.exports = {
  // 保留原有配置...
  globals: {
    onconnect: 'readonly' // 标记onconnect为只读全局变量
  }
}

方法3：在worker.js文件内添加注释 #

仅针对单个worker.js文件处理的话，可在文件顶部添加ESLint注释声明全局变量：

/* global onconnect */
onconnect = function(e) {
  // 你的SharedWorker业务逻辑
}

以上方法均能让ESLint正确识别SharedWorker的全局上下文，既解决错误提示，又保证代码校验的严谨性。

内容的提问来源于stack exchange，提问作者Alexandra Urushadze