Plugins 和 Extends 使用

🎯 引言

掌握 ESLint v9 的配置文件 eslint.config.mjs 中的 extends 和 plugins 配置，能让你轻松继承和扩展代码规范，提高代码质量和团队协作效率。本文将结合最新 ESLint v9 标准，详细讲解如何合理使用 extends 和 plugins 让你的项目规则既专业又灵活。

🌟 ESLint v9 和 eslint.config.mjs 简介

ESLint 是 JavaScript 和前端项目中最常用的代码检查工具，能够自动帮你发现代码中的潜在问题和不规范写法。版本 9 更新了配置方式，强烈推荐使用基于 ES 模块的 eslint.config.mjs 配置文件，这样可以用原生的 JavaScript 语法书写配置，更加灵活。

⚙️ eslint.config.mjs 基础写法

eslint.config.mjs 是一个 ES 模块文件，需要用 export default 导出配置对象：

export default {
    rules: {
        semi: ['error', 'always'], // 代码必须以分号结尾
    },
};

你可以在这里配置各种规则、插件和继承。

🧩 extends：继承已有规则集，避免重复造轮子

extends 让你可以继承官方或社区提供的规则配置，快速套用一整套规则，省去自己逐条写规则的麻烦。

extends 的作用

• 轻松使用 ESLint 官方推荐的规则集合，比如 "js/recommended"
• 集成社区或团队制作的共享规则包
• 支持数组写法，多个配置会依次合并，后面的覆盖前面相同规则

eslint.config.mjs 中 extends 的写法示例

export default {
    extends: ['js/recommended'],
};

🧰 plugins：扩展 ESLint 功能，提供新规则和语法支持

当你需要检查特定的语法特性或者框架特有的代码规则时，plugins 就派上用场了。插件可以新增很多规则，让 ESLint 功能更强大。

plugins 的作用

• 加载额外的 ESLint 规则集和校验逻辑
• 支持解析特殊语法或语言特性，比如 TypeScript、JSX 等
• 允许你自定义或者社区共享的规则包参与校验

eslint.config.mjs 中 plugins 的写法示例

import js from '@eslint/js';

export default {
    plugins: { js },
};

这里插件的名字对应安装的 npm 包名。

🔗 extends 和 plugins 如何协作

• plugins 负责告诉 ESLint 你装了哪些插件，加载它们的规则和功能
• extends 负责应用某个插件内预设的推荐规则或自定义规则集
• 先声明插件 plugins，再在 extends 中继承插件的规则配置，是常见的配置套路

示例：

export default {
    plugins: { js },
    extends: ['js/recommended'],
};

⚠️ 常见误区及注意事项

插件未安装却写了 plugins/extends

一定要确认对应插件已经安装，否则 ESLint 会报错找不到插件。

eslint.config.mjs 必须是 ES Module

使用 export default 导出配置，不可使用 CommonJS 语法。

🧾 小节总结

• extends 用于继承官方或第三方的规则配置，支持数组写法，后者覆盖前者
• plugins 用于声明额外安装的插件，扩展 ESLint 的功能和规则
• ESLint v9 推荐使用 eslint.config.mjs，基于 ES Module，配置更加灵活
• 组合使用 plugins 和 extends 可以快速启用丰富的规则集
• 使用时务必确认插件已正确安装、配置 parser，避免配置错误

❓ 知识问答（Q&A）

Q：为什么要用 eslint.config.mjs 而不是 .eslintrc.js？

A：eslint.config.mjs 是 ESLint v9 推荐的配置文件，基于原生 ES Module，支持更灵活的写法和现代语法，更适合未来生态。

Q：extends 中的 "js/recommended" 是什么意思？

A：表示继承 js 插件提供的推荐 recommended 规则集，快速启用这套规则。

Q：我只写了 plugins，但是没有写 extends 会怎样？

A：只声明插件没启用规则，ESLint 只会加载插件内的规则，但不会自动开启任何规则，通常需要配合 extends 使用。

🧪 小练习

练习一：基础 ESLint 配置

请你写一个 eslint.config.mjs，继承官方推荐规则，关闭规则 no-console，允许代码中使用 console.log。

模板代码：

export default {
    // TODO: 添加 extends
    // TODO: 在 rules 中关闭 no-console
};

🎉 恭喜你已经全面掌握了 ESLint v9 中 eslint.config.mjs 文件的 extends 和 plugins 配置方法！现在你可以用它们来快速搭建专业的代码检查规则，保证项目代码质量啦！