在前端开发中，使用 linter 工具可以使我们更加规范和高效地编写代码。而 eslint-plugin-jquery 是一个特别针对 jQuery 代码检查的插件，它可以帮助我们避免一些常见的错误和不规范的代码风格。
安装
首先需要安装好 eslint 和 jQuery，然后通过 npm 安装 eslint-plugin-jquery：
npm install eslint-plugin-jquery --save-dev
配置
在项目的 .eslintrc.js 文件中配置 eslint-plugin-jquery 插件：
-- -------------------- ---- -------
-------------- - -
-- ---
-------- -
-- ---
--------
--
------ -
-- ---
----------------- --
-------------------- --
----------------- --
-- ---
--
--上面的例子中，我们启用了三个规则：
no-ajax：禁止使用$.ajax()方法，应该使用$.get()或者$.post()代替。no-animate：禁止使用$.animate()方法，因为它可能会导致性能问题。no-attr：不强制要求使用.prop()替代.attr()方法。
你可以根据自己的需求来配置这些规则，也可以在 eslint-plugin-jquery 的文档 中查看所有可用的规则。
使用
在项目根目录下运行 eslint 命令即可检查代码：
npx eslint --ext .js,.vue src/
或者在 package.json 文件中添加 npm script：
"scripts": {
"lint": "eslint --ext .js,.vue src/"
},然后运行 npm run lint 即可进行代码检查。
示例代码
下面是一个使用了 jQuery 的示例代码，其中包含了一些不符合 eslint-plugin-jquery 规则的代码：
-- -------------------- ---- -------
---------------------------- -
----------------------- ---------- -
-- -- ---- --
--------
---- ------------
-------- -------------- -
-- ---- --- --
----------------------- --------- -----
------------------------ ---------
-
---
---
---在运行 eslint 命令后，我们可以看到以下输出：
src/index.js 4:5 error Unexpected $.ajax() jquery/no-ajax 8:9 warning Unexpected $.animate() jquery/no-animate 9:9 warning Unexpected $.attr() jquery/no-attr ✖ 3 problems (1 error, 2 warnings)
通过这个输出，我们可以看到 eslint-plugin-jquery 检查出了三个问题，并给出了相应的错误和警告提示。我们可以根据提示来修改代码，使其更加规范和高效。
总之，使用 eslint-plugin-jquery 可以帮助我们更好地编写 jQuery 代码，提高前端开发的效率和质量。
来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/49347