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.
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() {
this.setState({
text: event.target.value
});
}
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:
var restrictedGlobals = require('confusing-browser-globals');
module.exports = {
rules: {
'no-restricted-globals': ['error'].concat(restrictedGlobals),
},
};
License
MIT