Modern.js 项目中的 ESLint 规则集配置指南

前言

在现代前端开发中，代码质量管理和风格统一是保证项目可维护性的重要环节。Modern.js 提供了一套完整的 ESLint 规则集解决方案，帮助开发者轻松实现代码规范检查。本文将详细介绍如何在 Modern.js 项目中配置和使用 ESLint 规则集。

Modern.js ESLint 规则集概述

Modern.js 提供了两套主要的 ESLint 规则集：

1. @modern-js：针对 Node.js 项目的 Lint 规则
2. @modern-js-app：针对前端项目的 Lint 规则

这两套规则集已经集成了 Prettier 代码格式化功能，能够自动处理大部分代码风格问题。

常见问题解决方案

如何处理 Lint 问题

1. 实时自动修复

大多数代码问题可以通过以下方式自动修复：

• IDE 保存文件时自动执行修复
• 代码提交时自动修复剩余问题

2. 批量自动修复

对于旧项目迁移或需要一次性修复大量文件的情况，可以运行：

pnpm run lint:error

3. 人工修复

对于无法自动修复的问题：

1. 在 IDE 中点击问题提示
2. 查看规则文档了解问题原因
3. 根据建议手动修复

4. 声明例外情况

对于确实需要例外处理的代码块，可以使用 eslint-disable 注释：

/* eslint-disable filenames/match-exported */
// 例外代码
/* eslint-enable filenames/match-exported */

Modern.js 要求必须明确指定禁用范围和相关规则，避免滥用。

如何自定义 ESLint 规则

1. 通过 package.json 配置

在项目根目录的 package.json 中，可以覆盖默认规则：

"eslintConfig": {
  "extends": ["@modern-js"],
  "rules": {
    "filenames/match-exported": "off"
  }
}

2. 通过 .eslintrc.js 文件配置

对于 Universal JS 代码（同时运行在浏览器和服务器端的代码），可以在 src/.eslintrc.js 中配置：

module.exports = {
  root: true,
  extends: ['@modern-js-app'],
  parserOptions: {
    tsconfigRootDir: __dirname,
    project: ['../tsconfig.json'],
  },
  rules: {
    'filenames/match-exported': 'off'
  }
};

3. 目录级配置

可以在子目录中添加 .eslintrc.js 文件，只对该目录生效：

module.exports = {
  rules: {
    'filenames/match-exported': 'off'
  }
};

4. 忽略检查目录

在 package.json 中添加 eslintIgnore 字段，优化检查速度：

"eslintIgnore": [
  "node_modules",
  "dist",
  "output"
]

如何升级 ESLint 插件

对于非主版本升级（符合 Semver 的 ^ 范围）：

1. 在 package.json 中指定新版本
2. 删除 lock 文件或相关条目
3. 重新运行 pnpm install

注意：

• 主版本升级需要等待 Modern.js 官方更新
• Modern.js 会定期更新上游依赖

WebStorm 中的 ESLint 配置问题

当 WebStorm 报错找不到 tsconfig.json 时，需要手动配置解析器选项：

--parser-options=project:../tsconfig.json

最佳实践建议

1. 优先使用自动修复：让工具处理大多数风格问题
2. 谨慎使用禁用规则：只在确实必要时使用，并明确范围
3. 保持配置一致性：团队应统一 ESLint 配置
4. 定期更新规则集：获取最新的代码质量检查能力

总结

Modern.js 的 ESLint 规则集为开发者提供了开箱即用的代码质量保障方案。通过合理配置和正确使用，可以显著提高代码质量和团队协作效率。本文介绍的各种配置方法和问题解决方案，希望能帮助开发者更好地在项目中应用这些规则。