前言
在前端开发中，我们经常使用 jQuery 来操作 DOM 元素以及处理用户交互。jQuery 有很多方便实用的插件，可以帮助我们快速实现一些交互效果、表单验证等功能。但是，随着项目越来越大，代码量越来越多，代码规范问题也越来越严重。这时候就需要一个工具来检查代码规范，这就是 ESLint。
ESLint 是一个开源的 JavaScript 代码检查工具，可以帮助我们检查代码中可能存在的问题，比如未定义的变量、不符合规范的代码格式等。ESLint 支持很多的配置和插件，比如：eslint-plugin-jquery，可以帮助我们检查 jQuery 代码中的规范问题。
ESLint-plugin-jquery
针对 jQuery 代码的检查，ESLint 官方提供了插件 eslint-plugin-jquery。eslint-plugin-jquery 可以检查代码中可能存在的问题，比如：未定义的选择器、不符合规范的方法调用等等。
安装
在安装 eslint-plugin-jquery 之前，需要先安装 ESLint。
$ npm install eslint --save-dev
然后安装 eslint-plugin-jquery。
$ npm install eslint-plugin-jquery --save-dev
配置
在使用 eslint-plugin-jquery 前，需要在 .eslintrc.js 中配置插件。
module.exports = {
plugins: [
'jquery'
],
...
}规则
eslint-plugin-jquery 的规则都是以 "jquery/" 开头的，比如：jquery/no-ajax，jquery/no-attr 等等。
在 .eslintrc.js 中配置规则。
module.exports = {
rules: {
'jquery/no-ajax': 2,
'jquery/no-attr': 2
},
...
}在这个例子中，我们配置了两个规则：jquery/no-ajax 和 jquery/no-attr。
- jquery/no-ajax：禁止使用 jQuery 的 Ajax API。
- jquery/no-attr：禁止使用 attr() 和 removeAttr() 方法。
示例代码
下面是一个使用了 jQuery.ajax 的示例代码。
-- -------------------- ---- -------
--------
---- -------------
-------- -------------- -
-- ----
--
------ ------------- -
-- ----
-
--根据 jquery/no-ajax 规则，上面的代码会被标记为错误。这是因为我们在配置规则时禁止了使用 jQuery 的 Ajax API。
我们可以将代码改为使用原生的 XMLHttpRequest 实现，从而符合规范。
-- -------------------- ---- -------
--- --- - --- ----------------
--------------- ------------- -----
---------------------- - ---------- -
-- --------------- --- -- -
-- ----------- --- ---- -
--- ---- - ----------------------------
-- ----
- ---- -
-- ----
-
-
-
----------总结
ESLint-plugin-jquery 是一个非常实用的插件，可以帮助我们规范 jQuery 代码，降低出错率。在实际开发中，我们可以根据自己的需求来配置规则，从而让代码更加规范、易于维护。
来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/6469e388968c7c53b09abe02