在使用前端开发中，我们时常会遇到 ESLint ESlint(no-undef) ‘$’ is not defined 错误。这是因为 ESLint 提示我们这个变量或函数没有被定义，我们需要对其做出相应的解决。这篇文章将帮助你详细了解为什么会出现这个错误以及如何解决它。
为什么会出现这个错误？
在使用 JavaScript 进行开发时，我们时常会用到第三方库和框架来提供更好的交互和体验。其中，jQuery 是一个常用的类库，在使用 jQuery 时，我们会用到 ‘$’ 符号来调用其方法，例如 $(document).ready() 等。
然而，ESlint 不能识别这个符号，它认为这个符号没有被定义过，所以就会报错。因此，在使用 jQuery 等第三方类库时，我们需要对其中包含的 ‘$’ 进行特殊处理。
解决方法
一种解决方法是使用 --global 标志指定一个全局变量，使其可以在代码中任意使用。
/* eslint-env jquery */
另一种解决方法是使用对应的对象来访问其方法。例如，可以使用 jQuery(document).ready 替换 $(document).ready。这种方法的缺点是代码量增加，而 HTML 和 JavaScript 代码变得混乱。
此外，我们还可以将错误忽略掉，使用 /* eslint-disable no-undef */ 注释来取消其提示，例如：
/* eslint-disable no-undef */
$(document).ready(function() { … });
/* eslint-enable no-undef */这样可以暂时避免错误提示。不过，这种方法并不是一个好的做法，因为这样会使得我们的代码更容易出错。
最好的方法是使用 babel-eslint 插件，它提供了一种更好的处理方式。通过这个插件，我们可以让 ESLint 支持 ES6 和 JSX 语法，并且还可以配置使用 ‘$’ 符号。具体操作如下：
- 安装插件。
npm install babel-eslint --save-dev
- 配置 .eslintrc 文件
-- -------------------- ---- -------
-
--------- ---------------
---------------- -
-------------- --
------------- ---------
--------------- -
------ ----
-
--
---------- -
-------
--
-------- -
---------------------- -
--
---------- -
--------- -----
---- ----
-
-这就是最好的处理方式，在使用 ESLint 时，我们应该尽可能遵循规范，规避代码中的错误提示，提高代码质量，降低维护成本。
总结
本文介绍了ESLint ESlint(no-undef) ‘$’ is not defined 错误的原因，以及如何解决。最重要的是，我们应该养成良好的编码习惯，尽可能规避错误提示，提高代码质量。
如果你还有其他解决方法或者相关经验，请在评论区留言，我们一起来分享！
来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/64d1d497b5eee0b52592969d