confusing-browser-globals

What is confusing-browser-globals?

The confusing-browser-globals npm package provides a list of global variables that are commonly found in browser environments. This package is useful for developers who want to avoid naming collisions or conflicts when defining new variables or functions in the global scope of a web application.

What are confusing-browser-globals's main functionalities?

Listing browser globals

This feature allows developers to access a list of common global variables in browser environments, helping to prevent naming conflicts. The code sample imports the list from the package and logs it to the console, providing a quick way to view all the globals.

import confusingGlobals from 'confusing-browser-globals';
console.log(confusingGlobals);

Other packages similar to confusing-browser-globals

globals

The 'globals' package also provides lists of global variables for different environments including browsers. It is similar to confusing-browser-globals but offers a broader scope by covering more environments such as Node.js and common testing frameworks, making it more versatile for projects that span multiple environments.

reserved-words

This package helps in checking and listing reserved words in JavaScript, including those in browser and other environments. While it focuses more on language keywords than environment-specific globals, it serves a similar purpose in helping developers avoid naming conflicts.

README

confusing-browser-globals

A curated list of browser globals that commonly cause confusion and are not recommended to use without an explicit window. qualifier.

Motivation

Some global variables in browser are likely to be used by people without the intent of using them as globals, such as status, name, event, etc.

For example:

handleClick() { // missing `event` argument
  this.setState({
  	text: event.target.value // uses the `event` global: oops!
  });
}

This package exports a list of globals that are often used by mistake. You can feed this list to a static analysis tool like ESLint to prevent their usage without an explicit window. qualifier.

Installation

npm install --save confusing-browser-globals

Usage

If you use Create React App, you don't need to configure anything, as this rule is already included in the default eslint-config-react-app preset.

If you maintain your own ESLint configuration, you can do this:

const restrictedGlobals = require('confusing-browser-globals');

module.exports = {
  rules: {
    'no-restricted-globals': ['error'].concat(restrictedGlobals),
  },
};

License

MIT