系统性了解流行的 ESLint 插件

系统性了解流行的 ESLint 插件

ESLint 生态系统非常丰富，包含各种类型的插件，我将从多个维度统性地介绍当前最流行的 ESLint 插件。

一、核心分类

1. 语言支持类

• @typescript-eslint/eslint-plugin
  TypeScript 官方支持插件

  • 提供 TypeScript 特有的语法检查
  • 与 TSLint 迁移相关规则
  • 每周下载量：2000万+

• eslint-plugin-jsdoc
  JSDoc 注释检查

  • 验证 JSDoc 注释的完整性和正确性
  • 适用于 JavaScript 和 TypeScript

2. 框架专用类

• eslint-plugin-react
  React 专用规则

  • 检查 React hooks 使用
  • JSX 语法验证
  • 每周下载量：1500万+

• eslint-plugin-vue
  Vue.js 专用规则

  • 单文件组件(SFC)检查
  • Vue 2/3 版本特定规则

• eslint-plugin-angular
  Angular 专用规则

  • 检查 Angular 模板语法
  • 组件生命周期验证

3. 代码风格类

• eslint-config-prettier
  与 Prettier 兼容的配置

  • 关闭所有与 Prettier 冲突的规则
  • 必须与 Prettier 配合使用

• eslint-plugin-prettier
  将 Prettier 作为 ESLint 规则运行

  • 直接在 ESLint 中执行 Prettier 格式化

4. 代码质量增强类

• eslint-plugin-unicorn
  现代化 JavaScript 最佳实践

  • 200+ 条增强规则
  • 强调 ES6+ 特性使用
  • 每周下载量：800万+

• eslint-plugin-sonarjs
  基于 SonarQube 的规则

  • 检测代码重复和复杂度
  • 专注于可维护性问题

• eslint-plugin-security
  安全相关规则

  • 检测潜在安全漏洞
  • 如 eval()、不安全的正则等

5. 导入/导出相关

• eslint-plugin-import
  ES6+ 模块系统检查
  • 验证导入路径
  • 检查循环依赖
  • 每周下载量：3000万+

二、流行度排名 (基于npm下载量)

排名	插件名称	每周下载量(约)	主要用途
1	@typescript-eslint/eslint-plugin	2000万+	TypeScript支持
2	eslint-plugin-import	3000万+	模块系统检查
3	eslint-plugin-react	1500万+	React支持
4	eslint-plugin-vue	500万+	Vue支持
5	eslint-plugin-unicorn	800万+	代码质量增强
6	eslint-plugin-prettier	1200万+	Prettier集成
7	eslint-plugin-jsdoc	400万+	JSDoc检查
8	eslint-plugin-security	300万+	安全检测
9	eslint-plugin-sonarjs	200万+	代码质量
10	eslint-plugin-jest	500万+	Jest测试

三、典型组合方案

1. 现代JavaScript项目

module.exports = {
  extends: [
    'eslint:recommended',
    'plugin:unicorn/recommended',
    'plugin:import/recommended',
    'plugin:prettier/recommended'
  ],
  plugins: ['unicorn', 'import', 'prettier']
}

2. TypeScript + React项目

module.exports = {
  extends: [
    'eslint:recommended',
    'plugin:@typescript-eslint/recommended',
    'plugin:react/recommended',
    'plugin:react-hooks/recommended',
    'plugin:jsx-a11y/recommended',
    'plugin:prettier/recommended'
  ],
  plugins: [
    '@typescript-eslint',
    'react',
    'react-hooks',
    'jsx-a11y',
    'prettier'
  ]
}

3. Vue 3项目

module.exports = {
  extends: [
    'eslint:recommended',
    'plugin:vue/vue3-recommended',
    '@vue/typescript/recommended',
    'plugin:prettier/recommended'
  ],
  plugins: ['vue', '@typescript-eslint', 'prettier']
}

四、选择建议

1. 必选基础插件：

   • eslint-plugin-import (几乎所有项目都需要)
   • @typescript-eslint/eslint-plugin (TypeScript项目)
   • 对应框架插件 (React/Vue/Angular等)

2. 质量增强选配：

   • eslint-plugin-unicorn (现代化规则)
   • eslint-plugin-sonarjs (代码质量)
   • eslint-plugin-security (安全)

3. 风格统一：

   • eslint-config-prettier + eslint-plugin-prettier (与Prettier配合)

4. 按需添加：

   • eslint-plugin-jest (测试项目)
   • eslint-plugin-jsdoc (需要文档的项目)
   • eslint-plugin-compat (检查浏览器兼容性)

五、新兴趋势

1. ESLint Flat Config (ESLint v9+)

   • 新的配置系统
   • 插件兼容性需要更新

2. TypeScript优先

   • 越来越多的插件优先支持TypeScript
   • JavaScript项目也逐渐转向TS

3. 性能优化

   • 如eslint-plugin-perf等性能相关插件兴起

4. AI辅助

   • 一些插件开始整合AI分析能力

这个系统性概览应该能帮助全面理解ESLint插件生态。根据项目需求，可以从中选择合适的插件组合。