no-restricted-globals doesn't allow self in service worker envs

[perrin4869]

Upgrading to eslint-config-airbnb broke my service worker linting and the fix is not clear.

Inside a service worker, self is a global variable referring to the ServiceWorkerGlobalScope and is the standard method for setting event listeners. However, the new no-restricted-globals rule disallows the use of self, even if the top of the file includes /* global self */.

One possible solution to the problem would be to set const self = this explicitly on top of the file, but this poses an issue with es modules, where you cannot have this on the global context, and bundlers like rollup actually rewrite this as undefined.

Maybe removing self as a restricted global would be the way to go, or maybe the restricted globals should depend on the environment itself...

[ljharb]

eslint probably should add a new env for service workers; for a workaround, you'd need to override no-restricted-globals to be

javascript/packages/eslint-config-airbnb-base/rules/variables.js

Line 19 in 7ff6303

'no-restricted-globals': ['error', 'isFinite', 'isNaN'].concat(restrictedGlobals),

, but explicitly removing self - or, override this eslint rule in your file with /* eslint no-restricted-globals: 1 */.

One possible solution (if eslint adds a new service worker env), is to add an option to no-restricted-globals that allows specific globals to be allowed or restricted based on the env - but we'd have to file that on eslint itself.

[dmitriyButeiko]

I have the same problem

[priyajeet]

Use Number.isNaN/Number.isFinite instead of isNaN/isFinite.

It seems like eslint has had an environment for service workers for a while now: eslint/eslint#2557. However simply adding the environment to my eslintconfig doesn't seem to be ignoring the self reference in my service worker.

My eslintconfig:

module.exports = { extends: ['airbnb'], env: { browser: true, serviceworker: true }, rules: { indent: ['error', 4, { SwitchCase: 1, VariableDeclarator: 1, outerIIFEBody: 1 }], 'brace-style': ['error', 'stroustrup', { allowSingleLine: true }], 'consistent-return': 0, 'function-paren-newline': 0, 'react/jsx-filename-extension': ['error', { extensions: ['.js', '.jsx'] }], 'react/jsx-indent': ['error', 4], 'react/jsx-indent-props': ['error', 4], 'no-use-before-define': 0, 'import/prefer-default-export': 0, 'react/prop-types': 0, 'react/sort-comp': 0, }, };

[ljharb]

@donkeytronkilla thanks, that’s good to know. The env setting doesn’t affect the no-restricted-globals rule, though.

If there’s a way to make these mesh well, I’m on board!

[silverwind]

FWIW, I'm using a filename-based override, would prefer if env: worker would just work instead.

overrides:
  - files: ["**/*.worker.js"]
    rules:
      no-restricted-globals: [0]

[amiramix]

This happens because eslint-config-airbnb-base defines no-restricted-globals as

['error', 'isFinite', 'isNaN'].concat(confusingBrowserGlobals)

Where confusingBrowserGlobals imported from confusing-browser-globals is a long array with "confusing" names, including self.

It should be easy to override or use the default and remove self if eslint config is in JavaScript, but not so easy if it's a JSON file. In that case override as mentioned by "silverwind" is an easy and quick, but not as good fix.

[electriquo]

i had the same thing, but fixed it by using environment in eslint configurations as follows:

env: {
    browser: true
}