ESLint：什么是 globals 选项？
在前端开发中，使用 ESLint（JavaScript 的静态代码分析工具）可以帮助开发者规范化代码风格、发现潜在的问题并解决它们。其中，globals 选项是其中一个非常有用的功能。
globals 选项可以用于指定当前域中可用的全局变量，防止代码在没有声明或初始化变量的情况下使用它们。下面我们来详细讲解一下这个选项的用法及意义。
使用 globals 选项
在 .eslintrc 文件中，我们可以使用 globals 选项指定我们在当前域中使用的全局变量。例如，我们有一个全局变量 window，它可以在任何地方使用，但如果没有在文件开头将其定义为全局变量，就会报 ESLint 错误。
在 .eslintrc 文件中，我们可以这样使用 globals：
{
"globals": {
"window": true,
"document": true
}
}这里我们定义了两个全局变量，它们会在代码中使用，而不会引起 ESLint 的错误。
除了可以在 .eslintrc 文件中指定，还可以在代码中使用 /* global */ 注释来指定。例如：
/* global jQuery, $ */
$(function() {
// code here using jQuery or $
});/* global / 注释一般用于限制 JavaScript 文件在根源代码中的范围。如果在代码库中没有机制去启用每个文件的标准，则通过使用 / global */ 注释，可以在代码文件中的内部启用全局变量，并在其他文件的上下文中被认为是全局的。
globals 选项的意义
使用 globals 选项可以使我们更好地控制代码中使用的全局变量，并防止代码中的全局变量使用具有任意性和随意性。它可以在一定程度上保护代码的基础架构，避免潜在的问题。
在实际开发中，不同的 JavaScript 库和框架提供了大量的全局变量，但是不同的全局变量之间可能会发生冲突。在使用 ESLint 时，可以通过正确地配置 globals 选项，来确保代码的可维护性和可扩展性，并避免出现全局变量冲突的问题。
示例代码
这是一个简单的示例，演示如何使用 globals。
/* global window */
function alertWindowWidth() {
alert(window.innerWidth);
}在这个例子中，我们使用 /* global window */ 注释指定了全局变量 window。在函数中，我们使用了 window 的 innerWidth 属性展示窗口的宽度。由于我们在代码中使用了全局变量，如果没有指定，ESLint 将报告错误。
总结
在前端开发中，代码的质量和规范性对于项目的成功十分重要。ESLint 是一个非常好的工具，可以帮助开发者实现代码的规范和质量要求。globals 选项是其中非常重要的一个功能，可以帮助开发者掌控全局变量，并使代码更加规范和可靠。如果您想成为一名优秀的前端工程师，了解并掌握 ESLint 工具以及其 globals 选项，是非常必要的。
来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/64ef033ff6b2d6eab39032b4